MixedContent:ThepageatwasloadedoverHTTPS,butrequestedaninsecureimag

让浏览器不再显示 https 页面中的 http 请求警报

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

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改造之后&＃xff0c;我们可以在很多页面中看到如下警报&＃xff1a;

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

CSP设置upgrade-insecure-requests

好在 W3C 工作组考虑到了我们升级 HTTPS 的艰难&＃xff0c;在 2015 年 4 月份就出了一个 Upgrade Insecure Requests 的草案&＃xff0c;他的作用就是让浏览器自动升级请求。

在我们服务器的响应头中加入&＃xff1a;

header("Content-Security-Policy: upgrade-insecure-requests");

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

不过让人不解的是&＃xff0c;这个资源发出了两次请求&＃xff0c;猜测是浏览器实现的 bug&＃xff1a;

当然&＃xff0c;如果我们不方便在服务器/Nginx 上操作&＃xff0c;也可以在页面中加入 meta 头&＃xff1a;

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

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

Buy me a cup of coffee :)