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

Question

我关注了this文章，将CSP添加到我现有的react应用程序中。我在那里完成了用“使用内联脚本或样式”编写的所有步骤，这是我的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刚刚添加到生产版本中，但之前，为了测试是否有效，我在index.html中的脚本中添加了jquery：

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

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

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

Answer 1

实际上，您不需要Package即可实现，只需将<meta>标签作为第一个元素添加到<head>文件夹中index.html内的public块中。

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

[另外，请注意，使用unsafe-eval评估被认为是unsafe。并且应该避免。

考虑到这一点，请注意，如果要使用某些在线安全工具测试站点安全性，它将失败，因为您仍需要设置一些服务器端Headers

例如，我已经使用react app方法部署了测试<meta>，但是在immuniweb.com或gf.dev上进行测试时，您会看到存在无CSP策略！，但是它可以正常工作很好，请参见测试Here

因此，如果可以配置服务器环境，则可能需要将Express与express-csp-header和/或Nginx用作reverse proxy

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

语法为：

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

就像key:value，其中伪指令是base-uri，script-src，script-src和source（例如：self，none，unsafe-inline）是值。

无-防止从任何源加载资源。
全部-允许此资源的所有来源。
自我-匹配当前原点，但不匹配子域。
数据-匹配data: URI作为内容源。
不安全的内联-允许使用内联资源，例如<script>和<style>元素。
不安全的Eval-允许使用诸如eval（）之类的方法从字符串中解释代码。

例如，由于您正在使用React，而React正在使用内联<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字体或Google Analytics（分析）：

<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的更多信息，也可以生成自己的策略Here

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

问题描述投票：0回答：1

1个回答

最新问题

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

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1