Content Security Policy React Express Application deployed nn Heroku

Question

So I have been working on a social media application using React and Express deployed on Heroku. The app works perfectly in localhost but since deployment, something or the other keeps happening. My app structure looks like this:

After deploying the webpage looks like this: FireFox:

In Brave, it looks this way:

Heroku logs in CLI:

csp.json:

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

So thats the issue. Firefox says it's CSP, Brave says it can't find it, CLI says that it can't locate the build. I have tried everything I can think of- even including csp although Im not doing any resource loading from outside, but still it won't work. Please help as m very confused now- this is my final portfolio project that I have been working on for two months and now I cant get it to deploy correctly.

FrontEnd package.json:

BackEnd package.json:

server.js:

app.use(express.static(path.join(__dirname, 'FrontEnd/build')));

app.get('*', function (req, res) {
  res.sendFile(path.join(__dirname, 'FrontEnd/build', 'index.html'));
});

app.all('*', (req, res, next) => {
  next(new AppError(`The requested URL ${req.originalUrl} could not be found`, 404));
});

const port = process.env.PORT || 8000;
const server = app.listen(port, () => {
  console.log(`App running on port ${port}`);
});

process.on('SIGTERM', () => {
  console.log('SIGTERM RECEIVED!! Shutting down gracefully!');
  server.close(() => {
    console.log('💥Process Terminated!!');
  });
});

I also tried replacing FrontEnd/build with /BackEnd/FrontEnd//build as you can see n CLI logs but that didnt work either. I really dont know what to do at this point :(

Please help. Any suggestions are appreciated! Thank you for your time.

Answer 1

If it is content security issue, I solved it like this in one of my express applications:

import helmet from "helmet";

app.use(
  helmet.contentSecurityPolicy({
    directives: {
      //  "default-src" used as fallback for any undeclared directives
      "default-src": ["'self'"],
      // i am using stripe api. if you have any script add it here
      "script-src": ["'self'", "'unsafe-inline'", "js.stripe.com"],
      // external css link here
      "style-src": ["'self'", "'unsafe-inline'", "fonts.googleapis.com"],
      "frame-src": ["'self'", "js.stripe.com"],
      "font-src": [
        "'self'",
        "fonts.googleapis.com",
        "fonts.gstatic.com",
        "res.cloudinary.com/",
      ],
      "img-src": ["'self'", "data:", "https://res.cloudinary.com"],
    },
    reportOnly: true,
  })
);