Content-Security-Policy 不允许样式加载和阻止功能（Angular 13）

Question

我有这个 Angular 应用程序 (Angular 13)，我用它来使用 firebase 验证电子邮件。它在本地主机（也在 Google Cloud Platform 中）运行良好，但是当我为其添加元指令时，它停止显示任何样式并停止邮件验证。它还显示此错误。

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

使用 Angular/material 13 添加样式。这是 csp 元标记。

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self'; connect-src 'self';">

项目的依赖项是

"dependencies": {
    "@angular/animations": "~13.1.0",
    "@angular/cdk": "^13.1.3",
    "@angular/common": "~13.1.0",
    "@angular/compiler": "~13.1.0",
    "@angular/core": "~13.1.0",
    "@angular/flex-layout": "^13.0.0-beta.36",
    "@angular/forms": "~13.1.0",
    "@angular/material": "^13.1.3",
    "@angular/platform-browser": "~13.1.0",
    "@angular/platform-browser-dynamic": "~13.1.0",
    "@angular/router": "~13.1.0",
    "axios": "^0.19.2",
    "core-js": "^2.6.11",
    "express": "^4.17.1",
    "file-saver": "^2.0.2",
    "firebase": "^7.15.5",
    "google-auth-library": "^6.0.2",
    "hammerjs": "^2.0.8",
    "ngx-logger": "^4.1.9",
    "nodemon": "^2.0.4",
    "rxjs": "~7.4.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  }

我尝试只使用 .仅出现在assets文件夹中下载的字体。我应该怎么办？我已经被困在这里几周了。

Answer 1

使用Nonce或Hash（推荐用于内联样式）。阅读并实施它。

谢谢！