Refused to load the script 'xxx' because it violates the followi

nginx配置内容安全策略csp的代码举例 问题描述
工作中,我们做好项目以后,要发布到服务器上,供用户使用。不过为了项目安全,还是需要使用http协议自带的安全策略规则,去进行相应的配置,以防止别人使用一些脚本去攻击我们的项目(跨站脚本攻击Cross-Site Script,即XSS

所以本篇文章举例记录一下nginx中如何配置(如何在请求头中加上csp)
关于Content-Security-Policy
概念咱就不赘述了,详见官方文档:
https://developer.mozilla.org...
业务场景
比如我做的项目中,有以下资源需要从外部引入:
项目中使用了jquery脚本,从cdn.bootcdn.net拿过来的
项目中使用了外部css样式,从cdn.bootcss.com拿过来的
项目中使用了外部的图片,好几个网站的都有
项目中也使用了外部的媒体资源音频,好几个网站的都有
要求:
  1. 除了这两个网站cdn.bootcdn.net、cdn.bootcss.com的脚本和样式表能访问,别的一概拒绝。只要不是这两个网站的,都拒接访问,那肯定不好攻击我们的项目了呗
  2. 对于图片资源和媒体资源不做限制(因为图片媒体资源并不太好攻击项目,js脚本倒是有一定的风险)
nginx代码配置
http { includemime.types; default_typeapplication/octet-stream; sendfileon; keepalive_timeout65; server { listen80; server_namelocalhost; # 全局配置资源访问规则-除自己外全禁了(后面写的除外)# 允许使用内联资源,内联脚本啥的# data的URIs和blob流文件啥的也都可以访问的,就是这一块不怎么限制,这个倒是没事的# 这个基本上弃用了,加上吧,无妨 add_header Content-Security-Policy "default-src 'self'; script-src 'self' https://cdn.bootcdn.net https://cdn.bootcss.com 'unsafe-inline' 'unsafe-eval'; connect-src * 'unsafe-inline'; img-src * data: blob: 'unsafe-inline'; media-src * data: blob: 'unsafe-inline'; font-src * data: blob: 'unsafe-inline'; frame-src *; style-src * 'unsafe-inline'; worker-src * data: blob: 'unsafe-inline'; "; # 脚本资源访问规则-只放行自己,外人全禁用(上面这两个网站的脚本允许访问呢)# 允许使用eval函数# 所有图片资源都放行允许访问# 所有媒体资源都放行允许访问# 所有字体资源都放行允许访问# 样式文件资源都放行# 工作的资源都放行,不加就报错!得加上呢! location / { try_files $uri $uri/ /index.html; root C:/nginx-1.18.0/html/personmanage/dist; indexindex.html index.htm; } location /api/ { proxy_pass http://localhost:10000/; } } }

注意:
  • 上述代码中add_header Content-Security-Policy里面我写的有注释,大家细心看下,就知道什么意思了。
  • 且,上述代码亲测有效的!我自己也是使用的。
  • 然后,上述代码加到项目中以后,也通过了公司安全组部门对于上线的项目的安全扫描,所以是没什么问题的
  • 大家直接可以复制粘贴,按照自己的项目中的实际情况去改一下即可
  • 大家复制粘贴更改使用的时候,一定要注意,nginx的空格啊、位置啊、分号啊、单引号双引号啊之类的,这些如果有一点点偏差,就会报错(nginx其实挺严谨的)
加上以后,在请求报文的响应头中可以看到csp
Refused to load the script 'xxx' because it violates the followi
文章图片

未正确配置csp的报错截图
这里搞几个没有正确配置csp的报错截图给大家瞅瞅,方便大家审查自己的代码
使用了外部jquery的js脚本,csp中未放行报错 【Refused to load the script 'xxx' because it violates the followi】Refused to load the script 'xxx' because it violates the followi
文章图片

jquery来自于cdn.bootcdn.net,可以从报错信息中看到,已经:拒绝加载cdn.bootcdn.net的jquery脚本了,所以csp中要放行才行,要加上对应网址
使用了外部的图片,csp中未放行报错 Refused to load the script 'xxx' because it violates the followi
文章图片

这里引入了外部图片,csp中没有加:img-src * data: blob: 'unsafe-inline'; 没有放行,所以就报错,当然图片也就加载不出来了,所以csp图片放行要加上呢
使用了外部的字体,csp未放行报错 Refused to load the script 'xxx' because it violates the followi
文章图片

这里引入了外部字体样式,csp中没有加:font-src * data: blob: 'unsafe-inline'; 没有放行,所以就报错... 加加加,走起
worker-src不加也会报错 Refused to load the script 'xxx' because it violates the followi
文章图片

不加就报错,所以:worker-src * data: blob: 'unsafe-inline'; 也得加上呢
好记性不如烂笔头,记录一下呗 ^_^

    推荐阅读