React 应用程序中的内容安全策略未阻止在线脚本

Question

我按照 this 文章将 CSP 添加到我现有的 React 应用程序。我在那里完成了 "Using inline script or style" 中编写的所有步骤，这是我的 config-overrides.js 文件：

const { override } = require('customize-cra');
const cspHtmlWebpackPlugin = require('csp-html-webpack-plugin');

const cspConfigPolicy = {
  'default-src': "'none'",
  'base-uri': "'self'",
  'object-src': "'none'",
  'script-src': ["'self'"],
  'style-src': ["'self'"],
  'img-src': ["'self'"],
};

function addCspHtmlWebpackPlugin(config) {
  if (process.env.NODE_ENV === 'production') {
    config.plugins.push(new cspHtmlWebpackPlugin(cspConfigPolicy));
  }

  return config;
}

module.exports = {
  webpack: override(addCspHtmlWebpackPlugin),
};

为了测试它是否有效，我使用 npm run build 构建了应用程序（因为 CSP 刚刚添加到生产构建中）但之前，为了测试它是否有效，我将 jquery 添加到脚本中 index.html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

不幸的是 jquery 被添加到构建中，CSP 没有阻止它。

我是不是做错了什么？还是我误解了内容安全政策？

Answer 1

实际上你不需要一个包来实现它，你可以只添加一个 <meta> 标签作为你的第一个元素到 <head> 块里面的 index.html 成立于 [=17] =]文件夹。

至于 jQuery 问题，我猜测 csp-html-webpack-plugin 自动生成的 hash 或 nonce 可能指的是 jQuery 这可能导致允许吗？

此外，请注意使用 unsafe-eval eval 被视为。并且应该避免。

考虑到这一点，请注意，如果您要在某些在线安全工具中测试您的网站安全性，它基本上会失败。是的，添加 <meta> 安全标签可能足以提供基本保护，但您可以考虑使用 服务器端 HTTP Headers 来解决其他安全漏洞。实际上不需要meta标签，它是可选的。

例如，关于 CSP 策略，我部署了一个测试 react app using <meta> method, when testing on immuniweb.com or gf.dev, you'll see that there is No CSP policy! though, it works fine, see test Here

因此，如果您可以配置您的服务器环境，我鼓励您这样做。您可以将 Express 与 express-csp-header and/or using Nginx as a reverse proxy

一起使用

如果不能，请尝试设置您的 <meta> 相当简单：

语法为：

<meta http-equiv="Content-Security-Policy" content="directive 'source';">

就像 key-value pair 一样，其中指令是键，即 base-uri、script-src、style-src，来源（带单引号）是值，即 self, none, unsafe-inline

见Directive Reference List | Source Reference List

例如，由于您正在使用 React，而 React 正在使用内联脚本 <script></script>，您需要将 'unsafe-inline' 添加到脚本 directive 中，如下所示：

<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self' 'unsafe-inline'; style-src 'self'; base-uri 'self';">

如果您要添加一些内联 CSS 或要使用像 styled-components 这样的库，您还需要将 'unsafe-inline' 添加到您的样式指令中：

<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; base-uri 'self';">

如果您想允许一些外部 URL，例如 google 字体或分析：

<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self' www.google-analytics.com 'unsafe-inline'; style-src 'self' https://fonts.googleapis.com 'unsafe-inline'; font-src 'self' https://fonts.gstatic.com; base-uri 'self';">

阅读更多关于指令和规则的信息here You can also generate your own policy Here

React 应用程序中的内容安全策略未阻止在线脚本

Content security policy in React app didn't block online script

content-security-policy

reactjs

webpack