前端设置Content-Security-Policy

前端设置 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作为内容来源。

参考文献

1. Content-Security-Policy详解

2. CSP策略及绕过方法