解决chrome阻止未经验证脚本加载的问题

chuxiaoguo

问题

最近遇到了个问题,同事电脑的谷歌浏览器在加载websocket(实际项目用的是stomp.js)的时候,websocket连接不上。

原因

从网上获取了相似情况的图片:
谷歌浏览器bug.png

谷歌浏览器console.png

首先谷歌浏览器拦截了未经验证来源的脚本,然后控制台打印出了混合内容报错,大概模板是这样的:
Mixed Content: The page at '****************' was loaded over HTTPS, but requested an insecure resource '****************'. This request has been blocked; the content must be served over HTTPS.

解决方法

  1. 点击网址输入栏右边的小金盾,允许加载未知来源的脚本
  2. 将https连接的协议,改为http连接的协议,比如: https://www.123.cn 改为http://www.123.cn
最近社区中也发现了mixed content的问题,列下补充一下:

HTTPS页面里动态的引入HTTP资源,比如引入一个js文件,会被直接block掉的。
在HTTPS页面里通过AJAX的方式请求HTTP资源,也会被直接block掉的。

问题1:

在博客中,引入优酷视频,采用的是iframe形式,如下:

<div class="video_content">
    <iframe height=148 width=220 src="http://player.youku.com/embed/XMTU4MTY4OTg5Mg==" frameborder=0 allowfullscreen></iframe>
</div>

但无法打开这个视频,chrome浏览器下提示错误:

Mixed Content: The page at 'https://xifengxx.github.io/web-demo/imooc/index.html' was loaded over HTTPS, but requested an insecure resource 'http://player.youku.com/embed/XMTU4MTY4OTg5Mg=='. This request has been blocked; the content must be served over HTTPS.

问题2:

博客中,通过Ajax引入了http资源,也是无法顺利访问,chrome浏览器下提示错误:

jquery.min.js:4 Mixed Content: The page at 'https://xifengxx.github.io/web-demo/music-APP/index.html' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://api.jirengu.com/fm/getChannels.php'. This request has been blocked; the content must be served over HTTPS.

具体的的解决方法主要是:
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
可以在相应的页面的<head>里加上这句代码,意思是自动将http的不安全请求升级为https。

图片获取:https://www.cnblogs.com/Marydon20170307/p/9086279.html
参考文章: https://thehackernews.com/2015/04/disable-mixed-content-warning.html

阅读 5.5k

可视化数据开发工程师,自己独立开发了数据可视化网站[[链接]],欢迎star

277 声望
36 粉丝
0 条评论

可视化数据开发工程师,自己独立开发了数据可视化网站[[链接]],欢迎star

277 声望
36 粉丝
文章目录
宣传栏