解决https网页加载http资源报错问题

https 是 http over secure socket layer，以安全为目标的 http 通道，所以在 https 承载的页面上不允许出现 http 请求，一旦出现就是提示或报错：

mixed content: the page at ‘https://www.taobao.com/‘ was loaded over https, but requested an insecure image ‘http://g.alicdn.com/s.gif’. this content should also be served over https.

https改造之后，我们可以在很多页面中看到如下警报：

很多运营对 https 没有技术概念，在填入的数据中不免出现 http 的资源，体系庞大，出现疏忽和漏洞也是不可避免的。

csp设置upgrade-insecure-requests

好在 w3c 工作组考虑到了我们升级 https 的艰难，在 2015 年 4 月份就出了一个 upgrade insecure requests 的草案，他的作用就是让浏览器自动升级请求。

在我们服务器的响应头中加入：

header("content-security-policy: upgrade-insecure-requests");

我们的页面是 https 的，而这个页面中包含了大量的 http 资源（图片、iframe等），页面一旦发现存在上述响应头，会在加载 http 资源时自动替换成 https 请求。可以查看 google 提供的一个 demo：

不过让人不解的是，这个资源发出了两次请求，猜测是浏览器实现的 bug：

当然，如果我们不方便在服务器/nginx 上操作，也可以在页面中加入 meta 头：

<meta http-equiv="content-security-policy" content="upgrade-insecure-requests" />

目前支持这个设置的还只有 chrome 43.0，不过我相信，csp 将成为未来 web 前端安全大力关注和使用的内容。而 upgrade-insecure-requests 草案也会很快进入 rfc 模式。

从 w3c 工作组给出的 example，可以看出，这个设置不会对外域的 a 链接做处理，所以可以放心使用。

相关阅读

http://www.w3.org/tr/mixed-content/

https://www.chromestatus.com/feature/6534575509471232

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。