前端设置 Content-Security-Policy
1.什么是 Content-Security-Policy?
首先W3C的官方解释链接 Content-Security-Policy
MDN的链接配置 Content-Security-Policy
简单来说:
跨域脚本攻击 XSS 是最常见、危害最大的网页安全漏洞。为了防止它们,浏览器自动禁止外部注入恶意脚本.
CSP 的实质就是白名单制度,开发者明确告诉客户端,**哪些外部资源可以加载和执行,**等同于提供白名单。它的实现和执行全部由浏览器完成,开发者只需提供配置。
CSP 大大增强了网页的安全性。攻击者即使发现了漏洞,也没法注入脚本,除非还控制了一台列入了白名单的可信主机。
两种方法可以启用 CSP。一种是通过 HTTP 头信息的Content-Security-Policy
的字段。
1.在HTML上使用
通过meta 标签
<meta http-equiv="content-security-policy" content="策略">
<meta http-equiv="content-security-policy-report-only" content="策略">
例如:
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline';script-src 'self' 'unsafe-eval' 'unsafe-inline';img-src 'self' 'unsafe-inline' 'unsafe-eval' data:">
限制方式
default-src
限制全局,默认所有都会使用这种规则script-src
限制JavaScript的源地址。style-src
限制层叠样式表文件源。img-src
限制图片和图标的源地址- … 还有很多
限制规则
default-src ‘self’;
只允许同源下的资源
script-src ‘self’;
只允许同源下的js
script-src ‘self’ www.google-analytics.com ajax.googleapis.com;
允许同源以及两个地址下的js加载
default-src ‘none’; script-src ‘self’; connect-src ‘self’; img-src ‘self’; style-src ‘self’;
多个资源时,后面的会覆盖前面的
值 | demo | 说明 |
---|---|---|
* | img-src * | 允许任意地址的url,但是不包括 blob: filesystem: schemes. |
‘none’ | object-src ‘none’ | 所有地址的咨询都不允许加载 |
‘self’ | script-src ‘self’ | 同源策略,即允许同域名同端口下,同协议下的请求 |
data: | img-src ‘self’ data: | 允许通过data来请求咨询 (比如用Base64 编码过的图片). |
domain.example.com | img-src domain.example.com | 允许特性的域名请求资源 |
*.example.com | img-src *.example.com | 允许从 example.com下的任意子域名加载资源 |
https://cdn.com | img-src https://cdn.com | 仅仅允许通过https协议来从指定域名下加载资源 |
https: | img-src https: | 只允许通过https协议加载资源 |
‘unsafe-inline’ | script-src ‘unsafe-inline’ | 允许行内代码执行 |
‘unsafe-eval’ | script-src ‘unsafe-eval’ | 允许不安全的动态代码执行,比如 JavaScript的 eval()方法 |
data: | img-src data: | 允许加载base64图片 |
mediastream: | media-src mediastream: | 允许mediastream: URI作为内容来源。 |
参考文献