Question

我花了一些时间与CSP一起使我的Angular 5应用程序尽可能安全，但努力让它发挥作用。

我已使用CSP启用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.Net核心应用程序使用app.UseStaticFiles()中间件托管（已构建）Angular应用程序。

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

拒绝应用内联样式，因为它违反了以下内容安全策略指令：＆＃34; style-src＆＃39; self＆＃39; stackpath.bootstrapcdn.com＆＃34 ;. “不安全 - 内联”和“不安全”。关键字，哈希（＆＃39; sha256-47DEQpj8HBSa + / TImW + 5JCeuQeRkm5NMpJWZG3hSuFU =＆＃39;）或nonce（＆＃39; nonce -...＆＃39;）是启用内联执行所必需的。

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

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

我的问题是：目前是否有建议的方法让Angular 5/6与CSP协同工作，而不牺牲安全性？如果没有，那么下一个最好的东西是什么？

干杯

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

＆＃13;

<!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>

＆＃13;

Answer 1

我在聚会上有点晚了...但是我也有相同的设置，并且遇到了那些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（）;”之前插入希望对您有所帮助。

Answer 2

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策略。

Angular 5＆amp;具有（CSP）内容安全策略的ASP.Net核心

2 个答案: