CSP内容安全策略

2019-07-06

前言

从搜索如何预防xss脚本攻击，了解到CSP。

CSP全称Content Security Policy （内容安全策略），是为了页面内容安全而制定的一系列防护策略。通过CSP所约束的的规责指定可信的内容来源（这里的内容可以指脚本、图片、iframe、fton、style等等可能的远程的资源）。通过CSP协定，让WEB处于一个安全的运行环境中。

以下是常用的指令说明:

指令名	demo	说明
default-src	‘self’ cdn.example.com	默认策略,可以应用于js文件/图片/css/ajax请求等所有访问
script-src	‘self’ js.example.com	定义js文件的过滤策略
style-src	‘self’ css.example.com	定义css文件的过滤策略
img-src	‘self’ img.example.com	定义图片文件的过滤策略
connect-src	‘self’	定义请求连接文件的过滤策略
font-src	font.example.com	定义字体文件的过滤策略
object-src	‘self’	定义页面插件的过滤策略,如
media-src	media.example.com	定义媒体的过滤策略,如 HTML6的
frame-src	‘self’	定义加载子frmae的策略
sandbox	allow-forms allow-scripts	沙盒模式,会阻止页面弹窗/js执行等,你可以通过添加allow-forms allow-same-origin allow-scripts allow-popups, allow-modals, allow-orientation-lock, allow-pointer-lock, allow-presentation, allow-popups-to-escape-sandbox, and allow-top-navigation 策略来放开相应的操作
report-uri	/some-report-uri

指令值

所有以-src结尾的指令都可以用一下的值来定义过滤规则,多个规则之间可以用空格来隔开

值	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()方法

示例

1	<meta http-equiv="Content-Security-Policy" content="script-src 'self';">

注意：我们知道js的引入方式有3种，上面这种写法只能用于外链引入js文件，行内以及内嵌script标签的方式都会报错。

1	<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';">

加上’unsafe-inline’，上面这种写法就3种引入方式都可以了。

允许特性的域名请求资源，这里以code.jquery.com为例

1	<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' code.jquery.com;">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' code.jquery.com;">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <title>Title</title>
</head>
<div >
    <button class="test">测试</button>
</div>
<body>
<script>
    console.log(11111111)
    $('.test').on("click",function () {
        alert('success')
    })
</script>
</body>
</html>

其它资源如video都有相应的指令，只要按照要求写就可以了。

参考链接：https://www.cnblogs.com/heyuqing/p/6215761.html