CSP 内容安全策略( content security policy )

1 背景

跨域脚本攻击，网络安全漏洞，于是就有了内容安全防护策略，从根本上解决这个问题。

2 启用CSP的方式有2种

    修改meta标签，http-equive

    服务器 响应头设置

3 主要的CSP策略有5种

设置 CSP 的示范代码：

一般情况会这样设置： Content-Security-Policy:  block-all-mixed-content

res.writeHead(200, {
     'Content-Type': 'text-html',
     'Content-Security-Policy': 'default-src http: https:' 
});

 

不同csp限制类型的使用说明

a，不允许使用内联脚本或样式，限制引入文件的方式

'Content-Security-Policy': 'default-src http: https:'

 

b，允许加载指定域名下的文件资源

'Content-Security-Policy': 'default-src \'self\''

'Content-Security-Policy': 'default-src \'self\' https://cdn.bootcss.com/'

 

c，防止表单提交时访问站点

<form action="https://baidu.com">  会跳转到百度页面
    <button>click me</button>
</form>

'Content-Security-Policy': 'default-src \'self\' https://cdn.bootcss.com/; form-action \'self\''

 

d，default-src 设置的是全局，如果只想限制js类型的请求，可以这样写

'Content-Security-Policy': 'script-src http: https'

 

e，设置响应报告，浏览器会给服务器主动发送 report api 的请求，返回具体的违反CSP的信息，在执行限制策略的同时发送报告

'Content-Security-Policy': 'default-src \'self\' https://cdn.bootcss.com/; form-action \'self\; report-uri /report''

 

d，只发送报告，不执行限制的策略

'Content-Security-Policy-Report-Only' 只会发送报告，不会执行策略

 

f，在 meta 标签上设置 csp

<meta http-equiv="Content-Security-Policy" content="form-action 'self';">

和服务器上请求头上设置是一样的效果，但是不能发送违反策略的信息报告。

CSP详细策略可参考HTML5开发规范