1

I have exectued 'npm run build', and in my endpoint on server.js I am serving this build.

After reading How does Content Security Policy work?

I have edited the builds manifest.json to:

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "content_security_policy": "default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; img-src * data: 'unsafe-inline'; connect-src * 'unsafe-inline'; frame-src *;"
}

I want to allow everything.

When I push the app to heroku and visit it, developers console shows

" Refused to load the font 'data:font/woff;base64,d09GRgABAAAAAGVUABEAAAAAxuQAAQABAAAAAAAAAAAAAAAAAAAAA…eLo4GBkcWhIzkkAqQkEggceHw5HFkM2VRZJFlYebR2MP5v3cDSu5GJwWUDW9xG1hQXAFAmKZU=' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback. "

Why is it not changing default-src from self to *?

gskang
  • 27
  • 1
  • 9

1 Answers1

1

Adding unsafe-inline or unsafe-eval defeat the purpose of Content security policy (CSP) you will need to add the hash or nonce value to your CSP directives instead.

John
  • 49
  • 6