具有 (CSP) 内容安全策略的 Angular 5 和 ASP.Net Core答案

【问题标题】：Angular 5 & ASP.Net Core with (CSP) Content Security Policy具有 (CSP) 内容安全策略的 Angular 5 和 ASP.Net Core
【发布时间】：2023-03-26 06:29:01
【问题描述】：

为了让我的 Angular 5 应用程序尽可能安全，我在 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"));
        }); // Use Content Security Policy

我已经使用以下方法构建了 Angular 应用程序：

ng build --aot --prod

ASP.Net Core 应用程序使用 app.UseStaticFiles() 中间件托管（构建的）Angular 应用程序。

我已阅读了几篇文章并试图找到有关如何使其正常工作的直接答案，但我无法通过此错误，该错误源自 /main.ae5fbeccd9ff1305a55c.js：

拒绝应用内联样式，因为它违反了以下内容安全策略指令：“style-src 'self' stackpath.bootstrapcdn.com”。启用内联执行需要“unsafe-inline”关键字、哈希（“sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=”）或随机数（“nonce-...”）。

我相信 Angular 正在创建导致这些错误的代码，解决方案是在构建应用程序时使用“--aot”命令，但这对我不起作用。

我已经用 Angular 5 和 Angular 6 尝试过这个（甚至尝试过使用新的 Angular 项目）。同样的问题。

我的问题是：目前是否有推荐的方法让 Angular 5/6 与 CSP 一起工作，而不牺牲安全性？如果不是，那么下一个最好的事情是什么？

干杯

其他细节： Index.html（默认构建 Angular 6 应用程序）

<!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">
</head>

<body>
  <app-root></app-root>

  <script type="text/javascript" src="runtime.6afe30102d8fe7337431.js"></script>
  <script type="text/javascript" src="polyfills.2903ad11212d7d797800.js"></script>
  <script type="text/javascript" src="main.ae5fbeccd9ff1305a55c.js"></script>
</body>

</html>

【问题讨论】：

标签： angular asp.net-core content-security-policy

【解决方案1】：

在 Angular 中处理 CSS 不符合现代安全标准，因为样式在所有组件中保持内联（here is a ticket 表示）。到目前为止，我们不得不忍受 CSP 标头中令人不快的 style-src 'unsafe-inline' 指令。

对于使用 Google 字体的简单应用，CSP 标头可能如下所示

Content-Security-Policy: "default-src 'self'; style-src 'self' fonts.googleapis.com 'unsafe-inline'; font-src 'self' fonts.gstatic.com";

This post 详细介绍了 Angular 中的 CSP 策略。

【讨论】：

【解决方案2】：

这是浏览器安全性，与 Angular 无关。您在 index.cshtml 中使用了内联样式（假设您使用的是 ASP.NET Core 的 Razor 引擎）。

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

或者，

在<head>标签中添加这一行。

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

【讨论】：

嗨 Ritwick，感谢您的回复。我知道这是一项浏览器安全功能。我没有使用雷蛇引擎。我正在使用由 CLI 生成的 angular 5 应用程序。我只是将构建的 Angular 代码导入我的 wwwroot 文件夹。具有“不安全内联”的 CSP 仍然可能允许所有与完全没有 CSP 相同的 XXS 攻击，因此不是解决方案。我不想禁用 CSP 功能，我明确尝试启用它。
好的，这意味着，您正在为index.html 提供来自wwwroot 的服务？如果是，你确定index.html 中没有内联css？
嗨 Ritwick，是的，它是一个 Angular 5/6 构建的应用程序。您熟悉 Angular 5/6 和“ng build”cli 命令吗？错误来自 /main.ae5fbeccd9ff1305a55c.js: 由 ng build 命令生成的文件。
我刚刚检查了 github repo of angular。这是一个开放的问题。您必须启用unsafe-inline。 github.com/angular/angular-cli/issues/6872
谢谢，我读到了，最后一条评论说：“在 6.0 中，删除反射 polyfill 是 unsafe-eval 所需的全部内容。假设使用 AOT。”我已经做到了，但没有快乐。我暂时不情愿地使用 unsafe-inline 禁用 CSP。

【解决方案3】：

我参加这个聚会有点晚了...但我也有相同的设置并且遇到了那些 CSP 错误。我最终在启动类的 Configure 方法中注入了一个响应头。

作为示例，此代码允许来自 cloudflare 和 maxcdn 的脚本和 css。

        app.Use(async (ctx, next) =>
        {
            ctx.Response.Headers.Add("Content-Security-Policy",
            "default-src 'self'; script-src 'self' https://cdnjs.cloudflare.com; " +
            "style-src 'self' https://maxcdn.bootstrapcdn.com" );
            await next();
        });

在“app.UseStaticFiles();”之前插入希望对你有帮助。

【讨论】：