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

时间 2020-01-10

原文原文链接

问题

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

缘由

从网上获取了类似状况的图片：
html

首先谷歌浏览器拦截了未经验证来源的脚本，而后控制台打印出了混合内容报错，大概模板是这样的：
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.jquery

解决方法

点击网址输入栏右边的小金盾，容许加载未知来源的脚本
将https链接的协议，改成http链接的协议，好比： https://www.123.cn 改成http://www.123.cn

最近社区中也发现了mixed content的问题，列下补充一下：

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

问题1：

在博客中，引入优酷视频，采用的是iframe形式，以下：github

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

但没法打开这个视频，chrome浏览器下提示错误：web

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.chrome

问题2：

博客中，经过Ajax引入了http资源，也是没法顺利访问，chrome浏览器下提示错误：api

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