0

enter image description hereSo i am Very new to pug but it claims to be just like HTML so im using it and when do the following:

block head: in the base.pug and use it in another page like so: block append head: (and use the following scripts and links): block append head script(src='https://api.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.js') link(href='https://api.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.css' rel='stylesheet')

I get the error that it violates the Content Security Policy

Ghostie.
  • 1
  • 1
  • Could you add the Content Security Policy error you have got? And which web server do you use - the Node.js? – granty Oct 31 '21 at 06:11
  • I have added the link just now thank you for reminding me i believe that it has something to do with installing xss – Ghostie. Nov 03 '21 at 09:13

2 Answers2

0

Pug is just an HTML preprocessor that generates HTML markup at the output. So:

head
  script(src='https://api.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.js')
  link(href='https://api.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.css' rel='stylesheet')

on the server side, it will create markup:

<head>
   <script src='https://api.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.js' type='text/javascript'></script>
   <link href='https://api.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.css' rel='stylesheet'>
</head>

and send it to browser.

Content Security Policy (CSP) is a security layer works in browser and contrils from where is allowed to load scripts/styles/fonts/images/iframes/media/etc for the page.
CSP can be delivered to the page as HTTP response header or as meta tag.

So Pug is not directly related to CSP, but scripts and styles inserted by Pug should be allowed in CSP.
You can check which CSP your server sent to browser, see the tutorial, мost likely, the server sends it as an HTTP header.

Therefore, you need to check the server middleware for who is sending the CSP. In case of Node.js, it should be Helmet - it sends CSP header by default since v4. You have to configure it to allow loading scripts from https://api.mapbox.com / https://cdnjs.cloudflare.com and loading styles from https://api.mapbox.com (add this soursces to the appripriate CSP directives).
Alternatively you can disable CSP for now:

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

and configure it later, if necessary, because all the sources used will be known only after the development is completed.

Note: in the case of using other types of servers and software, it is necessary to look at the relevant documentation where and how CSP can be published in them.

granty
  • 7,234
  • 1
  • 14
  • 21
  • will adding the contentSecurityPolicy to false pass the scripts or will it just ignore it so that the errors dissapear? – Ghostie. Nov 15 '21 at 04:32
  • setting the `contentSecurityPolicy` to `false` will lead CSP will not published. Scripts will not blocked and error dissapears. But you loose protection against XSS, which CSP provides. – granty Nov 15 '21 at 06:20
0

I was finally able to get it with helmet.contentSecurityPolicy and setting the links inside.

As shown here

app.use(
helmet.contentSecurityPolicy({
    directives: {
        defaultSrc: [],
        connectSrc: [],
        scriptSrc: [],
        styleSrc: [],
        workerSrc: [],
        objectSrc: [],
        imgSrc: [],
        fontSrc: [],
    },
})
);
Joundill
  • 6,828
  • 12
  • 36
  • 50
Ghostie.
  • 1
  • 1