乐趣区

关于xss:Refused-to-load-the-script-xxx-because-it-violates-the-followi

jiezi

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 {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       80;
        server_name  localhost;
                                           # 全局配置资源拜访规定 - 除本人外全禁了（前面写的除外）# 容许应用内联资源，内联脚本啥的                                         # 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;
            index  index.html index.htm;
        }
        location /api/ {proxy_pass http://localhost:10000/;}
    }
}

留神：

  • 上述代码中 add_header Content-Security-Policy 外面我写的有正文，大家仔细看下，就晓得什么意思了。
  • 且，上述代码亲测无效的！我本人也是应用的。
  • 而后，上述代码加到我的项目中当前，也通过了公司平安组部门对于上线的我的项目的平安扫描，所以是没什么问题的
  • 大家间接能够复制粘贴，依照本人的我的项目中的理论状况去改一下即可
  • 大家复制粘贴更改应用的时候，肯定要留神，nginx 的空格啊、地位啊、分号啊、单引号双引号啊之类的，这些如果有一点点偏差，就会报错（nginx 其实挺谨严的）

加上当前，在申请报文的响应头中能够看到 csp

未正确配置 csp 的报错截图

这里搞几个没有正确配置 csp 的报错截图给大家瞅瞅，不便大家审查本人的代码

应用了内部 jquery 的 js 脚本，csp 中未放行报错

jquery 来自于 cdn.bootcdn.net，能够从报错信息中看到，曾经：回绝加载 cdn.bootcdn.net 的 jquery 脚本了，所以 csp 中要放行才行，要加上对应网址

应用了内部的图片，csp 中未放行报错

这里引入了内部图片，csp 中没有加：img-src * data: blob: 'unsafe-inline'; 没有放行，所以就报错，当然图片也就加载不进去了，所以 csp 图片放行要加上呢

应用了内部的字体，csp 未放行报错

这里引入了内部字体款式，csp 中没有加：font-src * data: blob: 'unsafe-inline'; 没有放行，所以就报错 … 加加加，走起

worker-src 不加也会报错

不加就报错，所以：worker-src * data: blob: 'unsafe-inline';也得加上呢

好忘性不如烂笔头，记录一下呗 ^_^

退出移动版