Lesson 186: tour.pug doesn't want to load mapbox script. Content-Security-Policy error.

[hazartilirot]

block append head
  script(src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js')
  link(href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet')

The result of a run is:

Refused to load the script 'https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

Is the author alive? Does he answer to any questions?

[hazartilirot]

Wow, through trial and error finally I got rid of the error.

You need to open app.js changing app.use(helmet({ contentSecurityPolicy: false }));

I've tried to add:

app.use(function(req, res, next) { 
  res.setHeader( 'Content-Security-Policy', "script-src 'self' api.mapbox.com"); 
  return next(); 
});

also had a go at adding the line "script-src 'self' api.mapbox.com" to a meta

nothing worked out.

[MizanurRahman65]

can u share in which file you had changed it??

[Suzan-Dev]

@hazartilirot Thanks bro! You saved my time. @MizanurRahman65 In app.js file, just change app.use(helmet()) to app.use(helmet({ contentSecurityPolicy: false })).

[nvispute]

All you need to do is add these following lines your app.js after initiallzing the 3rd Party packages and other middlewares but before we handle the routes

Here is the code

app.use((req, res, next) => {
  res.setHeader(
    'Content-Security-Policy',
    "script-src  'self' connect.facebook.net maps.googleapis.com cdnjs.cloudflare.com cdn.quilljs.com *.aws",
    "script-src-elem 'self' connect.facebook.net maps.googleapis.com cdnjs.cloudflare.com cdn.quilljs.com *.aws",
    "style-src 'self' cdnjs.cloudflare.com; localhost:8000;",
    "img-src 'self'"
  );
  next();
});

NOTE in the above the code i have some extra links script-src tag those are some additional js packages i was using in my app thus they can be ignored and removed.. i am listing the same code without the additional links

    "script-src  'self' connect.facebook.net maps.googleapis.com cdnjs.cloudflare.com *.aws",
    "script-src-elem 'self' connect.facebook.net maps.googleapis.com cdnjs.cloudflare.com  *.aws",

In the above code the script-src is pointing to facebook.net, Google Maps, Cloudflare.com, and .aws

[tamirazrab]

If anyone coming from google and tried several things, @hazartilirot app.use(helmet({ contentSecurityPolicy: false })) does work but it wasn't working for me at first, upon much time waste I figured it was those meta tags which I had been copying pasting from stack verflow which disables CSP, if you have any of those do remove them and then try it again.

[SaiBhanuRevanth]

GETTING ERROR FOR USING MAPBOX,STRIPE

[Mahmoud-AbouDeghedy]

add the crossorigin attribute and set it to anonymous

  <script src='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js' crossorigin="anonymous"></script>
  <link href='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css' rel='stylesheet' crossorigin="anonymous"/>

[dexymore]

you are the best bro ❤️

[klismancumraku]

If anyone is still having issues with this here's a solution that works for me

//app.js const { contentSecurityPolicy } = require('helmet');

//after app.use(helmet());

app.use(
  contentSecurityPolicy({
    directives: {
      defaultSrc: ["'self'"],
      scriptSrc: ["'self'", 'https://api.mapbox.com', 'blob:', "'self'"],
      connectSrc: [
        "'self'",
        'https://api.mapbox.com',
        'https://events.mapbox.com',
      ],
    },
  }),
);

//tour.pug

block append head
    script(src='https://api.mapbox.com/mapbox-gl-js/v2.8.1/mapbox-gl.js')
    link(href='https://api.mapbox.com/mapbox-gl-js/v2.8.1/mapbox-gl.css' rel='stylesheet')

[AgiriTaofeek]

app.use( helmet({ contentSecurityPolicy: false, crossOriginEmbedderPolicy: false, }) )

[nikachelo]

If anyone coming from google and tried several things, @hazartilirot app.use(helmet({ contentSecurityPolicy: false })) does work but it wasn't working for me at first, upon much time waste I figured it was those meta tags which I had been copying pasting from stack verflow which disables CSP, if you have any of those do remove them and then try it again.

you are literally hero my man