0

I have been trying to get rid of a number of CSP errors when I make a form submission but the number keep increasing. I thought I had handled the fav.icon error by directing express to the public folder in the front-end however it is still flagging with the default-src errors. On reading about default-src errors I also found into about a csp.json however when I added this the same errors have been showing. Where can I access the default-src or set this in React? i know fav.icon is the React logo so I am not so concerned about that but it looks really messy in my console and I am not sure if this causes problems elsewhere in my app.

CSP.JSON

{
  "dev": {
    "default-src": ["'self'"],
    "style-src": [
      "'self'",
      "https://*.google.com"
    ]
  },
  "prod": {
    "default-src": "'self'",  // can be either a string or an array.
    "style-src": [
      "'self'"
    ],
    "connect-src": [
      "'self'",
      "https://localhost:5002/"
    ]
  }
}

backend showing express where my fav.icon file is

app.use(express.static('../WebApp/sustainable-scuba-web-app/public/'));
app.get("/favicon.ico", (req, res) => {
    res.sendFile(path.resolve(__dirname, "/favicon.ico"));
});

enter image description here

James Gee
  • 129
  • 1
  • 3
  • 24

1 Answers1

0
  1. First of all you have to figure out how the policy is delivered to web page.
    CSP can be delivered in 2 ways:
  • with HTTP header, tutorial how to check is here. Pay attantion to Status Code field, because for 403/404/50X error pahes the CSP header can be published by finalhandler middleware.
  • with the <meta http-equiv='content-security-policy' content='...'> meta tag. You can check it just by reviewing HTML code.
  1. CSP.JSON is related to react-csp package, it publishes CSP via meta tag. Therefore if you already have CSP delivered with HTTP header (see para 1 above), you will add a second CSP, which can't mitigate the first one.

After found how CSP is delivered and what directives it have, you will have a clue where it's published.

If CSP is delivered with HTTP header (from the server side) - it can be either Helmet middleware (90%), express-csp-header package, simple-csp package or Content-security-policy package. Or even native res.set(field [, value]) / res.header(field [, value]) calls.

If CSP is delivered with meta tag, more probability it's specific React packages/plugins like react-csp.

Most of similar cases are related to Helmet middleware, which since version 4 publishes its own default CSP out of a blue.

granty
  • 7,234
  • 1
  • 14
  • 21