React Heroku Integration

JavaScript
1

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:https://map-add-pins.herokuapp.com/ca369312-252f-4be1-85be-9bc4b47805a7’ 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: https://map-add-pins.herokuapp.com

2

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

3

The docs have a list of directives

4

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' https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.js;
style-src 'report-sample' 'self' https://api.mapbox.com;
object-src 'none';
base-uri 'self';
connect-src 'self' https://api.mapbox.com;
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://*.tiles.mapbox.com https://api.mapbox.com https://events.mapbox.com ;")
  next();
});
5

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).

6

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

7

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

8

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