https是以安全为目标的 http通道,所以在 https承载的页面上不允许出现 http 请求,一旦出现,浏览器就会出现警告。
注意是警告而不是报错,排除安全性来说,https的页面的还是可以接受http的请求静态资源,只是做法不严谨。
Mixed Content: The page at ‘‘ was loaded over HTTPS, but requested an insecure image ‘http://xxx.xxx.com/xxx.jpg’. This content should also be served over HTTPS.
如何解决这烦人的警告呢?
CSP设置upgrade-insecure-requests
W3C 工作组在 2015 年 4 月份就出了一个Upgrade Insecure Requests的草案,反正看不懂,大致意思就是,它的作用让浏览器自动升级请求。
在我们服务器的响应头中加入:header("Content-Security-Policy: upgrade-insecure-requests");
即可
我们的页面是 https 的,而这个页面中包含了大量的 http 资源(图片、iframe等),页面一旦发现存在上述响应头,会在加载 http 资源时自动替换成 https 请求。 可以查看 google 提供的一个demo
如果不方便在服务器上添加响应头的话,也可以直接在页面中加入 meta 头:
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
那么兼容性来了,目前只有 chrome 43.0支持这个设置。从 W3C 工作组给出的 example,可以看出,这个设置不会对外域的 a 链接做处理,所以可以放心使用。