Content Security Policy errors with (Latest) Chrome browser cause Cannot Get error

VanquishedWombat commented 7 months ago

Chrome Version 121.0.6167.161 (Official Build) (64-bit) on Windows 2016 DataCenter throws Content Security Policy (CSP) error.

Hope you don't mind me raising this - spent a few hours googling for a solution but not found. Feels like an issue with Chrome getting more focussed on security. Looked thru https://browsersync.io/ but no solution was obvious.

And BTW, Windows 2016 DataCenter is what you get from Amazon Workspaces whis is a cloud desktop solution. It is equiv to Windows 10 for practical purposes. Anyway the issue here is CSP rather than low-level code issues so I don't think this is a contributing factor.

The full error in the Chrome console is

Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-Bed9qzUU2IVkAAxp73fh88GAnMchALEvifOr4XcPQ/4='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.
Failed to load resource: the server responded with a status of 404 (Not Found)

The source code in the browser is

<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body><script id="__bs_script__">//<![CDATA[
  (function() {
    try {
      var script = document.createElement('script');
      if ('async') {
        script.async = true;
      }
      script.src = '/browser-sync/browser-sync-client.js?v=3.0.2'.replace("HOST", location.hostname);
      if (document.body) {
        document.body.appendChild(script);
      } else if (document.head) {
        document.head.appendChild(script);
      }
    } catch (e) {
      console.error("Browsersync: could not append script tag", e);
    }
  })()
//]]></script>

<pre>Cannot GET /</pre>
</body>
</html>

The browser shows the Cannot GET / message.

The web page used for testing is totally minimal - no includes or other script files

<!DOCTYPE html>
<html lang="en">
  <head> 

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My Website</title>

  </head>
  <body>
    <main>
        <h1>Hello from TS</h1>  
    </main>

  </body>
</html>

It appears that Chrome does not like inline scripts. Is it possible to set CSP headers via browser-sync config ?

Steps to reproduce/test case

No possible in this case - you need Chrome / the issue surfaces in the browser.

Please specify which version of Browsersync, node and npm you're running

Browsersync [ 3.0.2 ]
Node [ 18.16.0 ]
Npm [ 9.1.2 ]

Affected platforms

[ ] linux
[ X ] windows
[ ] OS X
[ ] freebsd
[ ] solaris
[ ] other (please specify which)

Browsersync use-case

[ ] API
[ ] Gulp
[ ] Grunt
[ X ] CLI

If CLI, please paste the entire command below

This is the scripts section of the package.json file.

"scripts": {
    "browsersync": "npx browser-sync start --server 'public' --files 'public'"
  },

VanquishedWombat commented 7 months ago

Added sample minimal html file.

auxcoder commented 5 months ago

I'm having the same error.

Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-d/yERybm6Vg1oK5uXfPNUtFdLqpjo+RlG7iGStOnXLg='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

After rolling back to my previous version (2.27.4) the error persisted to my surprise (I wasn't having it in the past), and in my terminal I saw this other error:

Error: Cannot find module 'browser-sync-client/dist/index.min.js'

After checking node_modules/browser-sync-client I found that the installed version of browser-sync-client is 2.29.3 because browser-sync defined its dependency as: "browser-sync-client": "^2.27.4".

In browser-sync-client v2.29.3 the /dist folder don't contain the minimised version.

aussieklutz commented 3 months ago

A CSP can be defined in a header, not just in the page body.

Open the developer tools, network tab. Get the response headers when the page is loaded, and share them here.

raspberrysmile commented 2 months ago

I got the same error when I tried "browser-sync start --server 'dist' --files 'dist'". I edited it to browser-sync start --server --cwd 'dist' --files 'dist'" and it worked for me.

BrowserSync / browser-sync