Angular：避免内联 javascript

Question

我负责使用 Angular 12.0.5 构建应用程序。我们的开发指南规定我们不允许使用 inline javascript 并且我们必须使用 Content Security Policy 来防止 inline javascript。因此，我将其添加到我的 Index.html:

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

只要我使用从 npm start 开始的节点开发服务器，它就可以很好地工作。

但是当我使用 ng build 构建此网站并将其部署到生产性 Web 服务器时，我在我的开发人员控制台中看到此错误并且我的应用程序停止工作：

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' …

删除 CSP 后，此错误消失。

知道如何在不移除 CSP 的情况下完成这项工作吗？

Answer 1

构建 Web 应用程序时 Angular 捆绑并最小化 JavaScript 并引入内联 JavaScript 以保存 space。

幸运的是，可以在 "projects"/"architect"/"configurations" 中的 angular.json 中配置 Web 应用程序的构建方式。您可以通过将 production-配置更改为此来避免内联 JavaScript：

"production": {
  "buildOptimizer": true,
  "optimization": false,
  "vendorChunk": true,
  "extractLicenses": true,
  "sourceMap": true,
  "namedChunks": true,
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.prod.ts"
    }
  ],
  "outputHashing": "all"
},

实际上 "optimization": false 关闭了内联 Javascript 的生成。

Read this to learn more about how Angular does bundling

Angular：避免内联 javascript

Angular: avoid inline javascript

javascript

angular

security

content-security-policy