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

Question

我无法使基础Angular2（最终）应用程序与以下限制性CSP一起使用。

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

lang.js中有一个 unsafe-eval 错误，zone.js中有两个错误。你能提供解决方案吗？

使用Angular CLI重现的步骤

我创建了一个GitHub repository。您也可以按照以下说明操作。

将最后一个Angular CLI与webpack 6.0.8一起使用，并使用下面的说明创建新的应用程序。

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'">

然后提供申请。

ng serve

访问http://localhost:4200/，由于脚本被CSP阻止，页面无法加载。

错误

lang.js

lang.js:335 Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".

包含源代码。

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

zone.js

zone.js:344 Unhandled Promise rejection: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".
 ; Zone: <root> ; Task: Promise.then ; Value: EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".

zone.js:346 Error: Uncaught (in promise): EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".(…)

包含源代码。

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);

Answer 1

使用离线模板编译器应解决此问题。

http://www.syntaxsuccess.com/viewarticle/offline-compilation-in-angular-2.0 https://github.com/angular/angular/issues/1744

Answer 2

使用上一个Angular CLI版本（从1.0.0-beta.17开始）解决了该问题。以下命令用于工作应用程序，因为它包含头时编译。

ng serve --prod

Answer 3

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

• 将第二个文件：index.production.html添加到src文件夹中。
• 将index.html的内容复制到该文件，并添加限制性CSP标头。

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

• 然后，将以下内容添加到您的angular.json中：

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

这可以确保在运行生产版本时，它将与受限CSP一起使用index.production.html，而在本地运行时，则可以使用JTI编译器。

Answer 4

我在 WildFly 服务器 中部署 Angular 9 时遇到了这个问题。该错误位于 WildFly Server 配置中，位于 standalone.xml 中设置的 response-header 中，而不存在于 index.html< /em> 正如我所想。

standalone.xml：

<filters>
    <response-header name="server-header" header-name="Server" header-value="JBoss-EAP/7"/>
    <response-header name="x-powered-by-header" header-name="X-Powered-By" header-value="Undertow/1"/>
    >>> Here >>> <response-header name="Content-Security-Policy" header-name="Content-Security-Policy" header-value="default-src 'self'; style-src 'self' 'unsafe-inline'"/>
    <response-header name="x-frame-options" header-name="X-Frame-Options" header-value="SAMEORIGIN"/>
    <response-header name="x-xss-protection" header-name="X-XSS-Protection" header-value="1; mode=block"/>
    <response-header name="x-content-type-options" header-name="X-Content-Type-Options" header-value="nosniff"/>
    <response-header name="strict-transport-security" header-name="Strict-Transport-Security" header-value="max-age=31536000; includeSubDomains;"/>
    <response-header name="my-custom-header" header-name="my-custom-header" header-value="my-custom-value"/>
</filters>

注意：重启WildFly Server：

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

jboss-cli 位于 WildFly Server 的 bin 文件夹中：