React Heroku Integration

I am trying to deploy a mern full stack app with mapbox on heroku where you can add pins with react-map-gl and it does not seem to display the map after login or registration and I get csp errors. I think if I solve those mapbox would show.

The Content-Security-Policy directive name ‘‘unsafe-inline’’ contains one or more invalid characters. Only ASCII alphanumeric characters or dashes ‘-’ are allowed in directive names.

index.js:89 Refused to create a worker from 'blob:’ because it violates the following Content Security Policy directive: “script-src ‘self’”. Note that ‘worker-src’ was not explicitly set, so ‘script-src’ is used as a fallback.

I tried to add this meta tag in my index.html to offset the csp but that did not solve the issue. When I login or register the map should load like in localhost.

<meta http-equiv="Content-Security-Policy" content="'unsafe-inline' blob:;">

my heroku link to see issue:

I am still struggling to come up with a solution for a csp policy that can load my map.

The docs have a list of directives

Okay I looked at the docs and tried some methods that did not work. I tried to create custom meta tag in my index.html but I still get the same error with blob.

<meta http-equiv="Content-Security-Policy" content="default-src 'self';
script-src 'report-sample' 'self';
style-src 'report-sample' 'self';
object-src 'none';
base-uri 'self';
connect-src 'self';
font-src 'self';
frame-src 'self';
img-src 'self';
manifest-src 'self';
media-src 'self';
worker-src blob:;">

I also tried to do it through node with my index.js

app.use(function(req, res, next) {
  res.setHeader("content-security-policy-report-only", "worker-src blob: ; child-src blob: ; img-src data: blob: ; connect-src https://* ;")

You can try using the csp worker

I doubt I can troubleshoot this without a reproducible example and I’m not registering a mapbox account (I’m not giving them my credit card just to test this).

That solution also does not work I will try to find a way to solve this.

Instead I deployed the frontend of the application to netlify and the backend to heroku and that solved the issue with the map.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.