React（ASP.NET Core项目）添加CSP元标签遇内联样式报错求助

问题根源 #

create-react-app打包构建时会自动生成内联<style>标签注入页面，你当前设置的CSP规则style-src 'self'禁止所有内联样式执行，因此触发报错。INLINE_RUNTIME_CHUNK参数仅控制React运行时代码块是否内联，和样式内联问题无关，所以调整该参数无效。

解决方案 #

方案1：使用哈希值（推荐，安全性较高）

直接将错误提示中的哈希值添加到style-src规则中，允许对应哈希的内联样式执行：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'sha256-aw/cuq+oNW2VmZeRKB38rTQ+6lr2Wol35x/gNAPQqbk='; script-src 'self'; connect-src 'self'; ">

注意：后续修改项目样式后，哈希值可能会变化，若再次报错，可从新的错误信息中获取更新后的哈希值替换即可。

方案2：使用Nonce（动态安全，适合生产环境）

通过ASP.NET Core后端生成随机Nonce值，绑定到CSP规则和页面元素上，实现动态授权：

1. 后端生成Nonce（以.NET 6+为例，Program.cs）

app.Use(async (context, next) =>
{
    // 生成随机唯一的Nonce值
    var nonce = Guid.NewGuid().ToString("N");
    context.Items["CspNonce"] = nonce;
    // 设置CSP响应头
    context.Response.Headers.Add("Content-Security-Policy", 
        $"default-src 'self'; style-src 'self' 'nonce-{nonce}'; script-src 'self' 'nonce-{nonce}'; connect-src 'self';");
    await next();
});

2. 在React的index.html中引用Nonce
   由于项目由ASP.NET Core托管，可通过Razor语法将Nonce注入到元标签中：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'nonce-@Context.Items["CspNonce"]'; script-src 'self' 'nonce-@Context.Items["CspNonce"]'; connect-src 'self'; ">

这种方式每次请求都会生成唯一Nonce，能有效避免内联样式的安全风险。

方案3：临时启用'unsafe-inline'（不推荐，仅开发环境临时使用）

若需快速验证功能，可临时添加'unsafe-inline'到style-src规则，但会降低CSP的安全防护能力：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self'; connect-src 'self'; ">

内容的提问来源于stack exchange，提问作者Arun Reddy