title: Javascript create WebSocket connection refused - content security
body: <p>Trying to open a WebSocket connection from a Browser to a server running on localhost:9000 here is my JS code:</p>
  
  <pre><code>$( document ).ready(function() {
  
      var url = "ws://localhost:9000/myapp";
      var connection = new WebSocket(url);
  
      connection.onopen = function() {
          console.log('WebSocket Open');
      };
      connection.onerror = function(error) {
          console.log('WebSocket Error ', error);
      };
      connection.onmessage = function(event) {
          console.log('WebSocket Msg ', event);
      }
  
  });
  </code></pre>
  
  <p>But the browser is refusing to accept the connection due to Content-security policy:</p>
  
  <blockquote>
    <p>Content Security Policy: The page's settings blocked the loading of a
    resource at ws://localhost:9000/myapp ("default-src
    <a href="http://localhost:9000" rel="noreferrer">http://localhost:9000</a>").</p>
  </blockquote>
  
  <p>I thought that openning a websocket connection to "self" in this case "localhost" would be acceptable but both Chrome and FF are denying the connection. I thought of placing </p>
  
  <pre><code>&lt;meta http-equiv="Content-Security-Policy" content="default-src http: ws: connect-src ws:"&gt;
  </code></pre>
  
  <p>but it didn't fix the problem.</p>
  
  <p>These are the headers being returned by the Server:</p>
  
  <blockquote>
  <pre><code>HTTP/1.1 200 OK
  Referrer-Policy: origin-when-cross-origin, strict-origin-when-cross-origin
  X-Frame-Options: DENY
  X-XSS-Protection: 1; mode=block
  X-Content-Type-Options: nosniff
  Content-Security-Policy: default-src 'self'
  X-Permitted-Cross-Domain-Policies: master-only
  Date: Sat, 24 Jun 2017 03:39:10 GMT
  Content-Type: text/html; charset=utf-8
  Content-Length: 2130
  </code></pre>
  </blockquote>
  
  <p>What could be causing the connection refusal ?</p>