Angular 使用限制性内容安全策略（CSP）

我不能使基本Angular2（最终）应用程序与以下限制性CSP一起工作

default-src 'none';
script-src 'self';
style-src 'self';
font-src 'self';
img-src 'self' data:;
connect-src 'self'

中有一个不安全评估错误，中有两个不安全评估错误。你能提供一个解决方案吗

使用Angular CLI复制的步骤 我创造了一个新的世界。您也可以按照以下说明操作

ng new csp-test

在Webpack 6.0.8中使用最后一个Angular CLI，并按照以下说明创建新的应用程序

ng new csp-test

在

index.html

中插入定义以下限制性内容安全策略的元标记

<meta 
  http-equiv="Content-Security-Policy" 
  content="default-src 'none';script-src 'self';style-src 'self';font-src 'self';img-src 'self' data:;connect-src 'self'">

通路http://localhost:4200/，由于脚本被CSP阻止，因此无法加载页面

错误

lang.js 与源代码

335: return new (Function.bind.apply(Function, [void 0].concat(fnArgNames.concat(fnBody))))().apply(void 0, fnArgValues);

343: if (rejection) {
344:     console.error('Unhandled Promise rejection:', rejection instanceof Error ? rejection.message : rejection, '; Zone:', e.zone.name, '; Task:', e.task && e.task.source, '; Value:', rejection, rejection instanceof Error ? rejection.stack : undefined);
345: }
346: console.error(e);

zone.js

---

使用脱机模板编译器可以解决此问题

---

问题已通过使用上一个Angular CLI版本（从1.0.0-beta.17开始）解决。以下命令为工作应用程序提供服务，因为它包含一个时间段编译

ng serve --prod

---

为@angular/cli>=8.2编辑的答案

从中，可以使用

angular.json

中的

index

属性来控制应用程序HTML索引的生成：

build: {
  ...
  "configurations": {
    "production": {
      "index": {
        "input": "src/index.production.html",
         "output": "index.html"
       },
      ...
    }
  }
}

原始答案

我已经找到了一种在我的生产环境中使用限制性CSP的方法，同时仍然能够使用JTI compliler进行开发

• 向

  src

  文件夹添加第二个文件：

  index.production.html

• 将

  index.html

  的内容复制到该文件中，并添加限制性CSP头

• 然后，将以下内容添加到

  angular.json

  中：

---

这确保了当您运行生产构建时，它将使用限制性CSP的

index.production.html

，当您在本地运行它时，您可以使用JTI编译器。

这个问题发生在部署在WildFly服务器中的Angular 9上。这个bug出现在WildFly服务器配置中，在

standalone.xml

中设置的响应头中，而我认为它不在index.html中

standalone.xml

：

>>>这里>>>

注意：重新启动WildFly服务器：

---

jboss cli

位于WildFly Server的

bin

文件夹中：

第一个链接还使用了zone.js，这会触发相同的错误。在GitHub问题中，最后一条评论说，它不适用于所有应用程序，只适用于简单的应用程序。脱机模板编译器是一个全新的应用程序。若它不起作用，用最小的回购项目报告一个bug。你们是不是碰巧在模板中使用了生成的值？例如像

或

之类的东西？Angular不允许在运行ng serve时使用不安全的值作为XSW的保护：这是一个简单的服务器，用于在本地测试或调试Angular应用程序。它还没有被审查安全问题。不要把它用于生产！这是一个很好的解决方案，但不再有效

fileReplacements

属性不考虑非捆绑文件，如

index.html

。更新后的解决方案与上面评论中的更新后的解决方案相结合，对我来说很有效。我能够将CSP元添加到我的prod构建中，但是securityheaders.com仍然说我缺少它们，而且我的许多（不是全部）woff2文件现在都被拒绝了？

ng serve --prod

build: {
  ...
  "configurations": {
    "production": {
      "index": {
        "input": "src/index.production.html",
         "output": "index.html"
       },
      ...
    }
  }
}

build: {
  ...
  "configurations": {
    "production": {
      "fileReplacements": [
        {
          "replace": "src/index.html",
          "with": "src/index.production.html"
        }
      ],
      ...
    }
  }
}

./jboss-cli.sh --connect command=:reload