CODEWITHSUNDEEP
angularcontent-security-policy
satya
satya

Reputation: 3560

Getting error while setting the content-security-policy using Angular4

I am getting the following error while setting the content-security-policy using Angular4.

Error:

Refused to connect to 'ws://localhost:4200/sockjs-node/812/lxo2oeas/websocket' because it violates the following Content Security Policy directive: "default-src 'self' 'unsafe-eval'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

Uncaught TypeError: event.data.indexOf is not a function at receiveMessage (out.js:4)

Here is my code:

<!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>

Here I need to set the content-security-policy but getting those error.

Upvotes: 4

Views: 8689

Answers (2)

CrgioPeca88
CrgioPeca88

Reputation: 1041

I had the same issue with Angular 9.1.12 deployed in a WildFly Server (previously JBoss). At first I believed that problem was into index.html with <meta> tag (<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline';'">) but really the error was in the WildFly server specifically in the response-header setted in the 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>

Then restart the WildFly server with the jboss-cli located into bin folder of wildfly:

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

Upvotes: 0

sideshowbarker
sideshowbarker

Reputation: 88286

You need to explicitly indicate that ws: source expressions are allowed.

So either change your meta element to have this:

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

…that is, add a connect-src directive with a ws: source expression.

Or else do this:

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

…that is, add the ws: source expression to your existing default-src directive.

Upvotes: 2

Related Questions