angular - 具有 (CSP) 内容安全策略的 Angular 5 和 ASP.Net Core
问题描述
为了让我的 Angular 5 应用程序尽可能安全,我花了一些时间在 CSP 上,但努力让它工作。
我已启用CSP
using 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
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 中处理 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 策略。
推荐阅读
- python-3.x - Python - 无法将发布请求发送到登录表单
- common-lisp - Read file by line and wait for keyboard input to read next line
- ninja - 确定哪些目标在忍者中一次全部失败
- php - ifconfig 并在将 Magento 从 2.1.2 更新到 2.2.7 后无法工作
- build - 在 Sublime Text 构建系统中使用自定义变量
- konvajs - KonvaJS - 响应阶段和完整的 toDataURL
- c# - 如何列出
.AddRange 实际上添加了提供的范围? - html - 如何在angularjs中显示json的空值或空值的错误消息
- jquery - 如何让 JQuery tagsinput 使用特定的输入
- python - 如何将表上的 PySNMP 的 nextCmd 转换为多个对象