Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
8 tasks
VanquishedWombat opened this issue Feb 12, 2024 · 4 comments
Open
8 tasks

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

VanquishedWombat opened this issue Feb 12, 2024 · 4 comments

Comments

@VanquishedWombat
Copy link

VanquishedWombat commented Feb 12, 2024 •
edited
Loading

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 VanquishedWombat changed the title Content Security Policy errors with Chrome browser cause Cannot Get error Content Security Policy errors with (Latest) Chrome browser cause Cannot Get error Feb 12, 2024
@VanquishedWombat
Copy link
Author

Added sample minimal html file.

@auxcoder
Copy link

auxcoder commented Apr 17, 2024 •
edited
Loading

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
Copy link

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
Copy link

raspberrysmile commented Jul 30, 2024 •
edited
Loading

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@aussieklutz @raspberrysmile @auxcoder @VanquishedWombat