前言

HTTP 响应头 Content-Security-Policy 允许站点管理者在指定的页面控制用户代理的资源。除了少数例外，这条政策将极大地指定服务源 以及脚本端点。这将帮助防止跨站脚本攻击（Cross-Site Script） (XSS).

语法

1

Content-Security-Policy: <policy-directive>; <policy-directive>

CSP的upgrade-insecure-requests指令

作用是？

假如访问的页面是通过https加载进来的html，那么当html中含有http的请求资源，浏览器就会有提示或报错，或浏览器的地址栏会出现黄色角标，提示用户页面中包含有不安全的请求。HTTPS 网页中加载的 HTTP 资源被称之为 Mixed Content（混合内容），不同浏览器对 Mixed Content 有不一样的处理规则。

什么时候浏览器会出现提示呢？

现代浏览器（Chrome、Firefox、Safari、Microsoft Edge），基本上都遵守了W3C的Mixed Content规范，将Mixed Content分为Optionally-blockable 和 Blockable 两类 属于Optionally-blockable的会在在控制台中打印警告信息。这类资源包括： * 通过<img>标签加载的图片（包括SVG图片） * 通过<video>,<audio>和<source>标签加载的视频或音频 * 预读的（prefetched）资源

属于Blockable的资源包括：

除了以上三点以外的所有Mixed Content资源都属于

当我们对页面进行https改造时难免有很多运营对 https 没有技术概念，在填入的数据中不免出现 http 的资源，体系庞大，出现疏忽和漏洞也是不可避免的。

所以为了解决以上的问题，可以在返回头中设置CSP的指令upgrade-insecure-requests解决，设置后，页面中用到的http资源请求会被浏览器切换为https请求。

如何设置？

• 可以设置响应头 Content-Security-Policy: upgrade-insecure-requests
• 或在html里添加meta tag <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

CPS 的block-all-mixed-content指令

作用是？

通过 CSP 的 block-all-mixed-content 指令，可以让页面进入对混合内容的严格检测模式, 禁止mixed-content。在这种模式下，所有非 HTTPS 资源都不允许加载。

DEMO github地址为：https://github.com/wenyang12/csp-test.git

安装依赖

1

$ npm install

启动服务

1

# npm run start

浏览器打开 http://localhost:3000/

参考

Content-Security-Policy

腾讯前端开发女神与你谈：web安全与CSP

Upgrade Insecure Requests Sample

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