Content Security Policy(简称CSP)浏览器内容策略的使用

首先要提一下,在做开发测试的过程中,使用chrome时,重新加载更改后的应用时(修改了后端代码的话),要记得清理下缓存。。。清理缓存。。。清理缓存。。。。


前言

最近,项目中需要增加一个代码高亮的小功能,于是在调研后就选择了Prism.js插件,小巧易用,赞!在使用过程中,却遇到了浏览器内容策略限制导致的错误。项目中掉用Prism.highlightElement()方法后,执行方法体里的worker = new Worker()时,报了如下的错误:

再看看响应头中的csp指令都是什么?
Content Security Policy(简称CSP)浏览器内容策略的使用_第1张图片
显示的是,csp规则中的child-src指令的值未明确指定,回退执行 “default-src none”的安全规则,然而该规则表示禁止加载任何资源,当然也包括项目里使用的prism插件的内容。所以也就报了上面贴出的错误。那么CSP究竟是个神马东东呢?


CSP简介
CSP官网是这样介绍它的:“The new Content-Security-Policy HTTP response header helps you reduce XSS risks on modern browsers by declaring what dynamic resources are allowed to load via a HTTP Header.”
大意是说,通过在http的响应头中设定csp的规则,可以规定当前网页可以加载的资源的白名单,从而减少网页受到XSS攻击的风险。所以说csp是一个在现代浏览器加载资源白名单的安全机制,只有响 应头中白名单里列出的资源才能够被加载、执行。

当前浏览器对csp支持情况如下表所示:
Content Security Policy(简称CSP)浏览器内容策略的使用_第2张图片

csp指令

CSP level1 和CSP level2共列举了15个指令,其中frame-src是被废弃的指令,但是浏览器还仍支持。
Content Security Policy(简称CSP)浏览器内容策略的使用_第3张图片
Content Security Policy(简称CSP)浏览器内容策略的使用_第4张图片

csp指令的取值

Content Security Policy(简称CSP)浏览器内容策略的使用_第5张图片

通过在响应头中设置所需要的指令及对应的值,我们就可以通过设定的白名单规定自己网页应用里可以加载哪些资源了,白名单之外的资源将不备加载、执行。
CSP配置下阻止内联代码执行是防止内容注入的最大安全保障。这里的内联代码包括:

你可能感兴趣的:(javascript边学边用,nodejs)