Angular 5/6与ASP.Net Core集成CSP内容安全策略的问题求助

我来帮你解决这个CSP和Angular集成的问题——即使启用了AOT生产构建，Angular仍可能生成一些框架级的内联样式，导致CSP报错。下面是分优先级的解决方案：

一、最优方案：使用Hash或Nonce（不牺牲安全性） #

1. 直接使用错误提示中的Hash #

你的错误信息里已经给出了允许该内联样式的SHA256哈希值：sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=。这个哈希对应Angular启动时生成的空内联样式（或极小的初始化样式），你可以直接把它添加到CSP配置中：

修改你的NWebSec CSP代码：

app.UseCsp(options => { 
    options.DefaultSources(s => s.Self()); 
    options.ScriptSources(s => s.Self()); 
    options.StyleSources(s => s.Self()
        .CustomSources("stackpath.bootstrapcdn.com")
        .HashSHA256("47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=")); 
});

这种方式不需要放宽CSP的安全限制，只允许这个特定的内联样式通过。

2. 使用Nonce（更灵活的长期方案） #

如果后续Angular版本更新或构建配置变化导致哈希失效，Nonce是更可靠的选择。它的核心是为每个请求生成唯一的随机值，同时在CSP和页面内容中同步这个值：

步骤1：在ASP.NET Core中生成并传递Nonce

添加一个中间件生成随机Nonce：

app.Use(async (context, next) =>
{
    // 生成唯一的Nonce值
    var nonce = Guid.NewGuid().ToString("N");
    context.Items["CspNonce"] = nonce;
    await next();
});

步骤2：更新CSP配置以允许该Nonce

app.UseCsp(options => { 
    options.DefaultSources(s => s.Self()); 
    options.ScriptSources(s => s.Self().Nonce(context => context.Items["CspNonce"].ToString())); 
    options.StyleSources(s => s.Self()
        .CustomSources("stackpath.bootstrapcdn.com")
        .Nonce(context => context.Items["CspNonce"].ToString())); 
});

步骤3：将Nonce注入Angular的入口页面

把你的静态index.html改成ASP.NET Core的视图文件（比如Index.cshtml），在页面中引用Nonce：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Default Angular App</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="styles.34c57ab7888ec1573f9c.css">
    <!-- 给可能的内联样式添加Nonce -->
    <style nonce="@Context.Items["CspNonce"]"></style>
</head>
<body>
    <app-root></app-root>
    <!-- 给脚本标签添加Nonce -->
    <script type="text/javascript" nonce="@Context.Items["CspNonce"]" src="runtime.6afe30102d8fe7337431.js"></script>
    <script type="text/javascript" nonce="@Context.Items["CspNonce"]" src="polyfills.2903ad11212d7d797800.js"></script>
    <script type="text/javascript" nonce="@Context.Items["CspNonce"]" src="main.ae5fbeccd9ff1305a55c.js"></script>
</body>
</html>

这样所有带有该Nonce的内联内容都会被CSP允许，同时Nonce每次请求都随机生成，避免了复用带来的安全风险。

二、辅助检查：确认Angular构建配置 #

确保你的Angular项目没有主动生成不必要的内联样式：

• 检查angular.json（Angular 6）或.angular-cli.json（Angular 5）中的styles配置，确保都是指向外部CSS文件，没有内联样式字符串。
• 组件优先使用styleUrl引入外部样式文件，而非styles数组定义内联样式；如果必须用内联样式，需要把对应的哈希添加到CSP中。

三、次优方案：临时启用unsafe-inline（仅万不得已时使用） #

如果上述方案都无法生效，你可以临时在style-src中添加unsafe-inline，但这会降低CSP的安全防护能力，所以是最后选项：

app.UseCsp(options => { 
    options.DefaultSources(s => s.Self()); 
    options.ScriptSources(s => s.Self()); 
    options.StyleSources(s => s.Self()
        .CustomSources("stackpath.bootstrapcdn.com")
        .UnsafeInline()); 
});

内容的提问来源于stack exchange，提问作者Liam Fleming