首页 > 解决方案 > 具有 (CSP) 内容安全策略的 Angular 5 和 ASP.Net Core

问题描述

为了让我的 Angular 5 应用程序尽可能安全,我花了一些时间在 CSP 上,但努力让它工作。

我已启用CSPusing NWebSec,如下所示:

 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

我已经使用以下方法构建了角度应用程序:

ng build --aot --prod

ASP.NetCore 应用程序使用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>

标签: angularasp.net-corecontent-security-policy

解决方案


在 Angular 中处理 CSS 不符合现代安全标准,因为样式在所有组件中保持内联(这里有一张票)。到目前为止,我们必须忍受style-src 'unsafe-inline'CSP 标头中令人不快的指令。

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

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

这篇文章详细介绍了 Angular 中的 CSP 策略。


推荐阅读