React 应用程序中的内容安全策略没有阻止在线脚本
jak*_*son 7 content-security-policy reactjs webpack
我按照这篇文章将 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 刚刚添加到生产版本中），但在此之前，为了测试它是否有效，我将 jquery 添加到了里面的脚本中index.html：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
不幸的是，jquery 被添加到构建中，CSP 没有阻止它。
难道我做错了什么？还是我误解了内容安全策略？
awr*_*an5 20
实际上你不需要一个包来实现这一点，你可以添加一个<meta>标签作为你的第一个元素来<head>阻止index.html在public文件夹中创建。
至于 jQuery 问题，我的猜测可能是 ahash或nonce自动生成的csp-html-webpack-pluginjQuery 可能导致允许它？
另外，请注意使用unsafe-evaleval 被认为是不安全的。并且应该避免。
考虑到这一点，请注意，如果您要在某些在线安全工具中测试站点安全性，它基本上会失败。是的，添加<meta>安全标签对于基本保护就足够了，您可以考虑使用服务器端HTTP 标头来解决其他安全漏洞。实际上不需要元标记，它是可选的。
例如，对于 CSP 策略，我已经部署了一个测试react 应用程序using<meta>方法，在immuniweb.com或gf.dev上进行测试时，您会看到没有 CSP 策略！不过，它工作正常，请参阅此处的测试
因此，如果您可以配置服务器环境，我鼓励您这样做。您可以将 Express 与express-csp-header和/或使用 Nginx 作为反向代理
如果不能，请尝试将<meta>其设置为相当简单：
语法将是：
<meta http-equiv="Content-Security-Policy" content="directive 'source';">
就像键值对一样，指令是键，即base-uri, script-src，style-src源（带单引号）是值，即self, none,unsafe-inline
例如，由于您使用的是 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 font 或 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';">
| 归档时间： |
|
| 查看次数： |
13724 次 |
| 最近记录： |