logo标签列表

Angular 5和ASP.Net Core与（CSP）内容安全策略

angularasp.net-corecontent-security-policy
4

我正在花时间研究CSP，以使我的Angular 5应用程序尽可能安全，但是我很难让它正常工作。

我已经使用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（'nonce-...'）。
我相信Angular正在创建导致这些错误的代码，并且解决方案是在构建应用程序时使用“--aot”命令，但对我没有起作用。
我已经尝试过Angular 5和Angular 6（甚至尝试使用新的Angular项目）。同样的问题。
我的问题是： 目前是否有推荐的方法可以使用CSP使Angular 5/6正常工作，而不会牺牲安全性？如果没有，下一个最好的选择是什么？
附加细节： 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>

3个回答
3
在Angular中处理CSS不符合现代安全标准，因为样式仍然内联在所有组件中（这里有一个票）。到目前为止，我们必须接受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";

这篇文章详细介绍了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());
        });

或者，
在标签中添加此行。
<meta http-equiv="Content-Security-Policy" content=""style-src:'unsafe-inline'; script-src 'unsafe-inline'">
嗨，Ritwick，感谢您的回复。我知道这是浏览器安全功能。 我没有使用Razer Engine。我正在使用Angular 5应用程序，如CLI生成的那样。 我只是将构建好的Angular代码导入到我的wwwroot文件夹中。 带有“unsafe-inline”的CSP仍然可能允许与完全没有CSP一样的所有XXS利用，因此不是解决方案。我不想禁用CSP功能，而是明确地尝试启用它。 - Liam Fleming
好的，这意味着你正在从wwwroot提供index.html？如果是的话，你确定index.html中没有内联CSS吗？ - Ritwick Dey
嗨Ritwick， 是的，这是一个使用Angular 5/6构建的应用程序。你熟悉 Angular 5/6和“ng build”命令吗？错误来自于 /main.ae5fbeccd9ff1305a55c.js 文件，该文件是由 ng build 命令生成的。 - Liam Fleming
我刚刚检查了Angular的GitHub仓库。这是一个未解决的问题。你需要启用 unsafe-inline。https://github.com/angular/angular-cli/issues/6872 - Ritwick Dey
谢谢，我已经阅读了那篇文章，最后一条评论说：“使用6.0版本，只需删除反射polyfill即可实现unsafe-eval。假设使用AOT。” 我已经这样做了，但是没有成功。我将不情愿地暂时禁用CSP，并使用unsafe-inline。 - Liam Fleming
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();”之前插入，希望这可以帮到你。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接