HTTPS站点中含有HTTP链接的内容

leoskey -

添加“微博秀”到网站中，由于因为网站是https协议，而微博秀默认是http，所以会导致“微博秀”不能正常显示。直接将微博秀源代码中的src属性http修改为https即可，但依然会引用到http的链接。

当HTTPS站点中含有HTTP链接的内容，Chrome浏览器则会在控制台提示“This content should also be served over HTTPS”提示。

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

<span class="hljs-title">Mixed</span> Content: The page at <span class="hljs-string">'https://domain.com/w/a?id=074ac65d-70db-422d-a6d6-a534b0f410a4'</span> was loaded over HTTPS, but requested an insecure image <span class="hljs-string">'http://img.domain.com/images/2016/5/3/2016/058c5085-21b0-4b1d-bb64-23a119905c84_cf0d97ab-bbdf-4e25-bc5b-868bdfb581df.jpg'</span>. This content should also be served over HTTPS.

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

解决办法一：CSP设置upgrade-insecure-requests

W3C工作组考虑到了我们升级HTTPS的艰难，在2015年4月份就出了一个Upgrade Insecure Requests 的草案（http://www.w3.org/TR/mixed-content/），他的作用就是让浏览器自动升级请求。
在我们服务器的响应头中加入：

server {
  ...
  add_header Content-Security-Policy upgrade-insecure-requests;
  ...
}

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

方法二、
页面中加入 meta 头：

<span class="hljs-tag"><<span class="hljs-title">meta</span><span class="hljs-attribute">http-equiv</span>=<span class="hljs-value">"Content-Security-Policy"</span><span class="hljs-attribute">content</span>=<span class="hljs-value">"upgrade-insecure-requests"</span> /></span>

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

参考：SegmentFault