使用 Angular4 设置内容安全策略时出错答案

【问题标题】：Getting error while setting the content-security-policy using Angular4使用 Angular4 设置内容安全策略时出错
【发布时间】：2018-03-12 11:22:36
【问题描述】：

使用 Angular4 设置 content-security-policy 时出现以下错误。

错误：

拒绝连接 'ws://localhost:4200/sockjs-node/812/lxo2oeas/websocket' 因为它违反以下内容安全策略指令：“default-src 'self' 'unsafe-eval'"。请注意，'connect-src' 没有明确设置，所以 'default-src' 被用作后备。

未捕获的 TypeError：event.data.indexOf 不是 receiveMessage (out.js:4) 处的函数

这是我的代码：

<!doctype html>
<html lang="en">
<head>
  <meta http-equiv="Content-Security-Policy" 
    content="default-src 'self' 'unsafe-eval';
      style-src 'self' 'unsafe-inline';
      script-src 'self' http://localhost:4200 'unsafe-inline' 'unsafe-eval';">
  <meta charset="utf-8">
  <title>Myapp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

在这里我需要设置content-security-policy，但出现这些错误。

【问题讨论】：

标签： angular content-security-policy

【解决方案1】：

您需要明确指出允许ws: 源表达式。

所以要么改变你的 meta 元素有这个：

<meta http-equiv="Content-Security-Policy" 
  content="default-src 'self' 'unsafe-eval';
  style-src 'self' 'unsafe-inline';
  script-src 'self' http://localhost:4200 'unsafe-inline' 'unsafe-eval';
  connect-src ws:">

...也就是说，添加带有ws: 源表达式的connect-src 指令。

或者这样做：

<meta http-equiv="Content-Security-Policy" 
  content="default-src 'self' 'unsafe-eval' ws:;
  style-src 'self' 'unsafe-inline';
  script-src 'self' http://localhost:4200 'unsafe-inline' 'unsafe-eval';">

...也就是说，将ws: 源表达式添加到您现有的default-src 指令中。

【讨论】：

【解决方案2】：

我在 WildFly 服务器（以前是 JBoss）中部署的 Angular 9.1.12 遇到了同样的问题。起初我认为问题出在带有 <meta> 标签 (<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline';'">) 的 index.html 中，但实际上错误出在 WildFly 服务器中，特别是在 response-header 中设置在standalone.xml。

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 的 bin 文件夹中的 jboss-cli 重新启动 WildFly 服务器：

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

【讨论】：