Search code examples
reactjsexpressherokumaterial-uicontent-security-policy

Content Security Policy in ReactJS app on Heroku

Now i ran into such a time consuming error. My CSP policy includes errors and i've tried to remove them but all in vain. Its a reactjs running on Heroku under an expressjs application. So my folder structure is;

ExpressApp
       |-client_folder
           |-Reactjs-App

I use a react-csp npm-package to set the CSP policy and actually confirmed that its writing the policy on heroku post-build. React-csp tells us to create a csp.json file and mine looks as follows.

{
    "prod": {
            "default-src": "'self'", 
            "script-src" : ["'self'"],
            "font-src":["'self'", "*" ],
            "style-src": [ "'self'", "https://*.googleapis.com", "'unsafe-line'" ],
            "connect-src": ["'self'",  "*"],
            "img-src" : ["'self'",  "*"]
        }
}

After i upload the app with git push heroku master, and visit the site, i see it loaded without any styles. And when i check the console, i see this snapshot. enter image description here I'm using Material-UI in my project plus all its fonts but it can't seem to include everything i need in the CSP policy. I really need help because i've been stuck on this problem for a while now

Solution

  • it's unsafe-inline not unsafe-line