browser-sync is blocked by chrome csp

Question

I have a gulp task that runs browsersync.

var options = {
        proxy :          'localhost:9000/html' ,
        port :           3000 ,
        files :          [
            config.root + config.srcPaths.htmlBundle ,
            config.htmlRoot + 'main.css' ,
            '!' + config.htmlRoot + '**/*.scss'
        ] ,
        injectChanges :  false ,
        logFileChanges : true ,
        logPrefix :      'broserSync ->' ,
        notify :         true ,
        reloadDelay :    1000
    };
browserSync( options );

browsersync detects changes and tries to inject them but chrome blocks it with this error:

Refused to connect to 'ws://localhost:3000/browser-sync/socket.io/?EIO=3&transport=websocket&sid=gOQQPSAc3RBJD2onAAAA' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

Uncaught SecurityError: Failed to construct 'WebSocket': Refused to connect to 'ws://localhost:3000/browser-sync/socket.io/?EIO=3&transport=websocket&sid=gOQQPSAc3RBJD2onAAAA' because it violates the document's Content Security Policy.

How can i overcome this issue? Can i turn off the security policy?

Answer 1

Or you can add rules to your content security policy in the main html file (ex. index.html) to accept web socket connections from browser-sync. You can do it by adding ws://localhost:* to your default-src, for example like that:

<meta http-equiv="Content-Security-Policy"
      content="
        default-src 'self' ws://localhost:*">

You can also specify the exact browser-sync port like that:

<meta http-equiv="Content-Security-Policy"
      content="
        default-src 'self' ws://localhost:3000">

Just remember to remove this from policy before publishing to production servers!!