将 CSP 添加到 .Net React 应用程序

Question

我有一个 .net core Web 应用程序，它使用 UseSpa 来服务器 React 应用程序。

我添加了一个 csp，其中包括以下内容：

applicationBuilder.UseCsp(csp =>
        {
            // If nothing is mentioned for a resource class, allow from this domain #70
            csp.ByDefaultAllow
                .From("https://localhost:5001/")
                .FromSelf();

            // Allow JavaScript from:
            csp.AllowScripts
                // need to remove this line ( need to maybe set nonce with ASP? ) #70
                // .AllowUnsafeInline()
                // .AllowUnsafeEval()
                .FromSelf()
                .From("https://localhost:5001/")
                .AddNonce(); 

            // CSS allowed from:
            csp.AllowStyles
                // need to remove this line ( need to maybe set nonce with ASP? ) #70
                // .AllowUnsafeInline()
                .FromSelf()
                .From("https://localhost:5001/")
                .AddNonce();

            csp.AllowImages
                .FromSelf();
            
            // HTML5 audio and video elemented sources can be from:
            csp.AllowAudioAndVideo
                .FromNowhere();

            // Contained iframes can be sourced from:
            csp.AllowFrames
                .FromSelf();

            // Allow fonts to be downloaded from:
            csp.AllowFonts
                .FromSelf();

            // Allow other sites to put this in an iframe?
            csp.AllowFraming
                .FromSelf();

            csp.OnSendingHeader = context =>
            {
                context.ShouldNotSend = context.HttpContext.Request.Path.StartsWithSegments("/api");
                return Task.CompletedTask;
            };
        });

我添加了一个随机数，但是我在react SPA中使用MUI，我不知道如何从标头中获取随机数，也不知道我需要将这个随机数放在哪里，这样我就不会收到与内联样式等相关的csp相关错误，我想我需要将它添加到公共索引页面的元数据中，如下所示：

    <meta property="csp-nonce" content="" />

但我不知道如何正确设置？

Answer 1

我相信您的关键问题是创建一个随机数，该随机数被添加到响应标头中的 csp 中，但也可以在您的视图/html 文件中使用。我将提供一种适用于 .net 6 的解决方案。

在您的program.cs文件中，您需要创建nonce，将其存储在Context.Items字典中，然后将csp添加到响应标头。

var app = builder.Build();

app.Use(async (context, next) =>
{
    //Create Nonce and store it in the context dictionary
    var randomNumber = new byte[32];
    string nonce = "";

    using (var rng = RandomNumberGenerator.Create())
    {
        rng.GetBytes(randomNumber);
        nonce = Convert.ToBase64String(randomNumber);
    }
    context.Items["nonce"] = nonce;

    //Add the csp to the response header
    context.Response.Headers.Add(
        "Content-Security-Policy-Report-Only", 
        "default-src 'self'; script-src 'self' 'nonce-" + nonce + "';"  //replace this string with your actual csp
    );

    await next();
});

现在在您看来，您可以使用添加到上下文字典中的值来访问随机数。

<script nonce="@Context.Items["nonce"].ToString()">
    some script here
</script>

您可以将 csp 添加到元标记，但执行此操作时 csp 存在限制：report-uri（尽管已弃用，因此这不应该成为问题）、frame-ancestors、沙箱和报告-only 不起作用（仅举几个例子），因此将 csp 添加到响应标头是最好的选择。

Answer 2

Nonces 用于服务器端渲染的应用程序，您似乎没有使用它，因此您希望使用 script hash 来将内联脚本添加到您的 CSP。

如果您启用了

Content-Security-Policy-Report-Only

，您的控制台将显示如下错误消息：

[仅报告]拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“default-src 'self'”。启用内联执行需要“unsafe-inline”关键字、哈希值（“sha256-usNf4BJKM5+2IzarHkwVATPg24pwuR1jFPBAqWXmj+c=”）或随机数（“nonce-...”）。另请注意，“script-src”未明确设置，因此“default-src”用作后备。

您想要获取指定的哈希值 (

'sha256-usNf4BJKM5+2IzarHkwVATPg24pwuR1jFPBAqWXmj+c='

) 并将其添加到您的 CSP，如下所示：

context.Response.Headers.Add("Content-Security-Policy", "default-src 'self'; script-src 'self' 'sha256-usNf4BJKM5+2IzarHkwVATPg24pwuR1jFPBAqWXmj+c='; style-src 'self'; font-src 'self'; img-src 'self'; frame-src 'self'");