title: getting error message while try to load mapbox
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>mapboxgl.accessToken = 'xxxxxxxx';
  
  var map = new mapboxgl.Map({
    container: 'map', // container ID
    style: 'mapbox://styles/mapbox/streets-v11', // style URL
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>doctype html
  html
    head
      block head
        meta(charset='UTF-8') 
        meta(name='viewport' content='width=device-width, initial-scale=1.0')
        link(rel='stylesheet' href='/css/style.css')
        link(rel='shortcut icon', type='/image/png' href='/ img/favicon.png')
        link(rel='stylesheet', href='https://fonts. googleapis.com/css?family=Lato:300,300i,700')
        title Natours | #{title} 
  
  
    body
        //- HEADER 
        include _header
  
        //- CONTENT
        block content
          h1 this is a placeholder heading
  
        //- FOOTER
        include _footer
        
        script(src='/javascript/mapbox.js')</code></pre>
  </div>
  </div>
  </p>
  <p><strong>Refused to load the script 'https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js' because it violates the following Content Security Policy directive: &quot;script-src 'self'&quot;. Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.</strong></p>