英文:
How to flush CSS Inline to CSP?
问题
在我的项目中，我有一些脚本（JavaScript），图像（webp）和内联HTML样式。
我想在CSP中执行以下操作：
对于所有脚本、样式和图像，我只想接受来自我的域名（localhost或在生产环境中的HTTPS）的内容。
但是我在浏览器控制台中遇到以下错误：
我的Webpack中的CSP代码如下：
const HtmlCSPWebpackPlugin = require("csp-html-webpack-plugin");
new HtmlCSPWebpackPlugin(
{
"default-src": "'self'",
"base-uri": "'self'",
"connect-src": "*",
"font-src": "*",
"frame-src": "'none'",
"img-src": "*",
"manifest-src": "*",
"media-src": "'none'",
"object-src": "'none'",
"script-src": ["'unsafe-inline'", "'self'", "'unsafe-eval'"],
"style-src": ["'unsafe-inline'", "'self'", "'unsafe-eval'"],
},
{
enabled: true,
hashingMethod: "sha256",
hashEnabled: {
"script-src": true,
"style-src": true,
},
nonceEnabled: {
"script-src": true,
"style-src": true,
},
}
);
英文:
In my project I have some scripts (javascript), images (webp) and inline HTML styles.
What I would like to do in CSP is the following:
For all scripts, styles and images I would like to only accept the one from my domain (localhost or when in production on HTTPS).
But I'm getting the following error in the browser console:
My code in Webpack for CSP is as follows:
const HtmlCSPWebpackPlugin = require("csp-html-webpack-plugin");
new HtmlCSPWebpackPlugin(
{
"default-src": "'self'",
"base-uri": "'self'",
"connect-src": "*",
"font-src": "*",
"frame-src": "'none'",
"img-src": "*",
"manifest-src": "*",
"media-src": "'none'",
"object-src": "'none'",
"script-src": ["'unsafe-inline'", "'self'", "'unsafe-eval'"],
"style-src": ["'unsafe-inline'", "'self'", "'unsafe-eval'"],
},
{
enabled: true,
hashingMethod: "sha256",
hashEnabled: {
"script-src": true,
"style-src": true,
},
nonceEnabled: {
"script-src": true,
"style-src": true,
},
}
),
答案1
得分: 1
The style-src指令在您的CSP中与错误消息不同，这意味着可能存在多个CSP。检查响应标头和元标记。如果没有保留多个CSP的理由，删除一个并修改另一个。
要允许被阻止的内容，您要么需要使nonce适用于您的内联样式，重写/替换内联样式，或者使用'unsafe-inline'，如果您在错误消息中的CSP中删除nonce，则会起作用。
英文:
The style-src directive in your CSP and the error message are different, which means there are likely multiple CSPs present. Check response headers and meta tags. If there is no reason to keep multiple CSPs, remove one and modify the other.
To allow the blocked content you'll either have to make the nonce work for your inline styles, rewrite/replace the inline styles, or use 'unsafe-inline', which will work if you remove the nonce in the CSP in the error message.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论