✨点击上方关注☝️，追踪不迷路！
前言
HTTP 响应头 Content-Security-Policy 允许站点管理者在指定的页面控制用户代理的资源。除了少数例外，这条政策将极大地指定服务源以及脚本端点。这将帮助防止跨站脚本攻击（Cross-Site Script） (XSS).
语法
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
CPS 的block-all-mixed-content指令
作用是？
通过 CSP 的 block-all-mixed-content 指令，可以让页面进入对混合内容的严格检测模式, 禁止mixed-content。在这种模式下，所有非 HTTPS 资源都不允许加载。
DEMO github地址为：gitee.com/front-end-h…
安装依赖
$ npm install
启动服务
# npm run start
浏览器打开 http://localhost:3000/
参考
Upgrade Insecure Requests Sample
最后，创作不易请允许我插播一则自己开发的小程序广告，感兴趣可以访问体验：
【「合图图」产品介绍】
- 主要功能为：本地添加相册图片进行无限长图高清拼接，各种布局拼接等
- 安全：无后台服务无需登录，全程设备本地运行，隐私100%安全；
- 高效：自由布局+实时预览，效果所见即所得；- 高清：秒生高清拼图，一键保存相册。
- 立即体验 →合图图 或微信小程序搜索「合图图」
点个赞👍和收藏⭐支持我吧！
