我已经用React.js构建了一个单页应用程序，并将其托管在Cognito登录页面后面的AWS上（请参见this blog post和this Lambda template）。这触发了抱怨缺少content security policy的错误，因此我使用csp-html-webpack-plugin将create-react-app react-app-rewired转换为我的标准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'"],
"frame-src": ["https://drive.google.com/"],
"manifest-src": ["'self'"],
};
function addCspHtmlWebpackPlugin(config) {
if (process.env.NODE_ENV === "production") {
config.plugins.push(new cspHtmlWebpackPlugin(cspConfigPolicy));
}
return config;
}
module.exports = {
webpack: override(addCspHtmlWebpackPlugin),
};
。
config-overrides.js
INLINE_RUNTIME_CHUNK=false
.env
/build/index.html这将导致一个带有Content-Security-Policy元标记的style-src 'self'文件，并且没有任何内联JavaScript或CSS，但是仍然无法完美运行。关于内联样式仍然存在很多错误（大概是React组件注入了CSS）。我可以通过手动删除'unsafe-inline';之后的随机数并将其替换为 <meta
http-equiv="Content-Security-Policy"
content="base-uri 'self'; object-src 'none'; script-src 'self' 'nonce-4vMiP/MSTpSmzZRvWpahlQ==' 'nonce-ttbsbXQ2ka2E/pUj4y8w0g==' 'nonce-SPF0ZOWgqYX6X7cGjFBdNQ=='; style-src 'self' 'unsafe-inline'; default-src 'none'; img-src 'self'; frame-src https://drive.google.com; manifest-src 'self';"
/>
来绕过那些随机数。这不是理想的选择，但我认为我的应用程序可以接受。
frame-src更大的问题是，即使在元标记中设置了manifest-src和{
"meetingName": "Updated meeting name",
"startDateTime": "Tue Jul 27 2020 11:40:30 GMT+0530 (India
Standard Time)",
"priority": "Medium",
"endDateTime": "Tue Jul 27 2020 11:40:30 GMT+0530 (India Standard Time)",
"isScheduled": true,
"isRepeated": false,
"repeatInfo": {
"repeatType": "Weekly",
"weekPattern":[ "Mon","tue"],
"endRecurrance": "Tue Jul 27 2020 11:40:30 GMT+0530 (India
Standard Time)"
}
}
的策略，浏览器似乎也没有读取它们。它仍然会输出以下错误，并拒绝在iframe中显示跨域内容。
拒绝使用框架“ https://drive.google.com/”，因为它违反了以下内容安全政策指令：“ default-src'none'”。请注意，未明确设置“ frame-src”，因此将“ default-src”用作后备广告。
拒绝从“ https://mysubdomain.cloudfront.net/manifest.json”加载清单，因为它违反了以下内容安全策略指令：“ default-src'none'”。请注意，未明确设置“ manifest-src”，因此将“ default-src”用作备用。
所有其他内容现在正在正确加载。当我在本地运行该应用或未经Cognito授权托管该应用时，不会出现错误。
关于如何解决此问题的任何想法？