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

utugiqy6 于 2023-02-26 发布在 .NET

关注(0)|答案(1)|浏览(162)

我有一个.net核心网络应用程序，正在使用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;
            };
        });

我已经添加了一个nonce，但是我在react SPA中使用MUI，我不知道如何从标头中获取nonce，以及需要将此nonce放在何处，这样就不会出现与csp相关的内联样式错误等，我认为需要将其添加到公共索引页面的 meta数据中，如下所示：

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

但是我不知道如何正确地设置这个？

.net

来源：https://stackoverflow.com/questions/71178220/adding-csp-to-net-react-application

1条答案

按热度按时间

unhi4e5o1#

我相信你的关键问题是创建一个nonce，它被添加到响应头中的csp中，但也可以在你的view / 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();
});

现在在您的视图中，您可以使用添加到上下文字典中的值来访问nonce。

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

您可以将csp添加到 meta标记中，但在执行此操作时，csp会受到一些限制：report-uri（虽然这是不赞成的，所以这不应该是一个问题），frame-ancestions，sandbox和report-only都不起作用（只是一些例子），所以将csp添加到响应头是最好的选择。

赞(0）回复(0）举报 2023-02-26

我来回答

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

1条答案

相关问题

热门标签

最新问答