title: node.js - correct content security policy for socket.io (web sockets) using helmet
body: <p>I am trying to implement content security policies (CSP) in a node server, and am having trouble setting up socket.io. It looks like I am setting up the <code>connectSrc</code> incorrectly in the code below. Could someone suggest the correct way to set up helmet so that web socket connections are allowed by the browser? Thanks in advance!</p>
  
  <p>I am using helmet module for generation of CSP; the following is the code that sets up CSP:</p>
  
  <pre><code>securitySetup = function(app) {
    var connectSources, helmet, scriptSources, styleSources;
    helmet = require("helmet");
    app.use(helmet());
    app.use(helmet.hidePoweredBy());
    app.use(helmet.noSniff());
    app.use(helmet.crossdomain());
    scriptSources = ["'self'", "'unsafe-inline'", "'unsafe-eval'", "ajax.googleapis.com"];
    styleSources = ["'self'", "'unsafe-inline'", "ajax.googleapis.com"];
    connectSources = ["'self'"];
    return app.use(helmet.contentSecurityPolicy({
      defaultSrc: ["'self'"],
      scriptSrc: scriptSources,
      styleSrc: styleSources,
      connectSrc: connectSources,
      reportUri: '/report-violation',
      reportOnly: false,
      setAllHeaders: false,
      safari5: false
    }));
  };
  </code></pre>
  
  <p>This works fine for all HTTP/AJAX traffic, but fails for ws:// protocol. I get this error in chrome debugger when socket.io connection is made:</p>
  
  <pre><code>Refused to connect to 'ws://localhost:3000/socket.io/1/websocket/ubexeZHZiAHwAV53WQ7u' because it violates the following Content Security Policy directive: "connect-src 'self'".
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/dkunP.png" alt="Chrome Console Error"></p>