如何将内联CSS适配到CSP？解决资源限制与控制台报错

项目包含JavaScript脚本、WebP图片及内联HTML样式，需求是通过CSP配置仅允许加载自身域名（localhost或生产环境HTTPS）的脚本、样式与图片，但浏览器控制台出现CSP报错。当前Webpack中使用HtmlCSPWebpackPlugin的配置如下：

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. 图片资源规则不符合需求：img-src: "*"允许所有域名的图片，违背仅加载自身域名资源的要求
2. 双重验证方式冲突：同时启用hashEnabled和nonceEnabled，会导致CSP规则冗余甚至冲突，两种验证方式只需选其一
3. 冗余的不安全规则：启用hash验证后，合法的内联脚本/样式会被自动添加哈希值，无需'unsafe-inline'；'unsafe-eval'若项目未使用则属于不必要的安全风险

修改后的配置 #

const HtmlCSPWebpackPlugin = require("csp-html-webpack-plugin");
new HtmlCSPWebpackPlugin(
    {
        "default-src": "'self'",
        "base-uri": "'self'",
        "connect-src": "*", // 若接口仅来自自身域名，可改为"'self'"
        "font-src": "*", // 若字体仅来自自身域名，可改为"'self'"
        "frame-src": "'none'",
        "img-src": "'self'", // 仅允许自身域名的图片，WebP格式自动兼容
        "manifest-src": "'self'",
        "media-src": "'none'",
        "object-src": "'none'",
        "script-src": ["'self'"], // 移除不安全规则，依赖hash验证内联脚本
        "style-src": ["'self'"], // 移除不安全规则，依赖hash验证内联样式
    },
    {
        enabled: true,
        hashingMethod: "sha256",
        hashEnabled: {
            "script-src": true,
            "style-src": true,
        },
        nonceEnabled: {
            "script-src": false, // 关闭nonce，仅保留hash验证
            "style-src": false,
        },
    }
),

额外注意事项 #

• 若项目确实需要使用eval或动态代码生成逻辑，再将'unsafe-eval'添加回script-src，但建议尽量避免此类写法
• 'self'会自动匹配当前页面的协议、域名和端口，生产环境HTTPS域名无需额外配置
• 若浏览器仍报错，查看控制台的具体违规信息，确认是否有遗漏的自身域名资源（如子域名资源需单独添加，或使用'self' *.your-domain.com）

内容的提问来源于stack exchange，提问作者THIAGO DE BONIS