Content Security Policy是一种防止恶意资源加载和请求的方式.它的实现和执行全部由浏览器完成，开发者只需提供配置。

在开发使用了CSP. 有一种方式是只需设置响应头,如下

response.addHeader("Content-Security-Policy","default-src 'self' 'unsafe-inline' 'unsafe-eval'");

在设置了该之后, 发现系统本来的Websocket功能失效了.请求直接被浏览器拦截了.后面才知道是CSP的原因,因为系统的Websocket使用的ws请求协议,而'self'值则表示只能加载相同源的内容

CSP是一种白名单制度.故我们需要在HTTP头标上ws请求协议. 如下

response.addHeader("Content-Security-Policy","default-src 'self' ws: 'unsafe-inline' 'unsafe-eval'");

==========时间分隔线:2019-08================

今天在系统中集成pageoffice功能时,在页面进行打开pageoffice窗口时,又出现了请求被CSP拦截的问题.如下

Refused to load the script 'http://127.0.0.1:57070/json.htm?callback=jQuery19105572142063946166_1567148915531&_=1567148915532' because it violates the following Content Security Policy directive: "default-src 'self' ws: 'unsafe-inline' 'unsafe-eval'". Note that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

排查后发现pageoffice应用会占用本机的57070端口.故在请求的时候被拦截了.故我将本机57070的也加入到白名单.以为问题解决了.随后又报了另外一个错误.

 Uncaught DOMException: Blocked a frame with origin "http://127.0.0.1:8885" from accessing a cross-origin frame

看似一个关于跨域问题的错误,但是这个请求并不涉及到跨域.后来换了firefox浏览器.看到了另外一个错误信息

Content Security Policy: 页面设置阻止读取位于 pageoffice://|http://192.168.0.66:8885/test/openPageoffice?fileId=1|width=1200px;height=800px;ismodal=false;||A19D4FBC3ED50087A507847139949A53|1693066E79D4741A4406550723999B89 的一项资源("default-src http://192.168.0.66:8885 ws: 'unsafe-inline' 'unsafe-eval' http://127.0.0.1:57070")。

这看就知道也是因为被CSP拦截造成的.在使用POBrowser打开pageoffice窗口时,pageoffice会把我们的请求做了一些处理.浏览器F12可以看到请求变成了 pageoffice://|http://192.168.0.66:8885/test/openPageoffice?fileId=1.

function goPageOffice(){
        var poUrl = top.$('#basePath').val()
            +'test/openPageoffice?fileId=1';
        POBrowser.openWindowModeless(poUrl, 'width=1200px;height=800px;');
    }

所以在CSP白名单中也加上 pageoffice: 即把问题解决.

response.addHeader("Content-Security-Policy","default-src 'self' ws: 'unsafe-inline' 'unsafe-eval' 127.0.0.1:57070 pageoffice:");

此处得了一个教训,在浏览器报错找了大半天没找出原因时,需要换个浏览器.看下报出的错误信息是不是不一样.

问题解决. CSP可以针对不同的资源类型可以指定不同的值. 详细见下面链接.很详细

http://www.ruanyifeng.com/blog/2016/09/csp.html