title: CSP with nonce under node.js application - Refused to apply inline style/script
body: <p>I'm trying to secure my website (built with node.js/express/npm) with correct CSP. I'm using npm helmet package and trying to configure CSP using nonce. I have tried to pass nonce in any possible way but I can't figure why Chrome is refusing to execute inline styles or scripts. A code example below:</p>
  <pre><code>// my app.js
  // I generate a new random nonce value for every response.
      const nonce = crypto.randomBytes(16).toString(&quot;base64&quot;);
  
  //configure CSP under helmet
      app.use(
      helmet.contentSecurityPolicy({
          useDefaults: false,
          directives: {
              defaultSrc: [&quot;'self'&quot;],
              connectSrc: [&quot;'self'&quot;, ...connectSrcUrls],
              scriptSrc: [&quot;'self'&quot;, &quot;unsafe-inline&quot;, `nonce-${nonce}`, ...scriptSrcUrls],
              styleSrc: [&quot;'self'&quot;, ...styleSrcUrls],
              workerSrc: [&quot;'self'&quot;, &quot;blob:&quot;],
              objectSrc: [],
              imgSrc: [
                  &quot;'self'&quot;,
                  &quot;blob:&quot;,
                  &quot;data:&quot;,
                  &quot;https://res.cloudinary.com/dqcadja0y/&quot;,
                  &quot;https://images.unsplash.com/&quot;
              ],
              fontSrc: [&quot;'self'&quot;, ...fontSrcUrls],
          },
      })
  );
  
  //I pass nonce
  app.get('/', (req, res) =&gt; {
      res.render('home', { style: 'app', nonce: nonce });
  });
  
  //example of use in script e.g. mapbox
  &lt;script nonce=&quot;${nonce}&quot; src='https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js'&gt;&lt;/script&gt;
  </code></pre>
  <p>error return from the console:</p>
  <blockquote>
  <p>Refused to apply inline style because it violates the following
  Content Security Policy directive: &quot;style-src 'self'
  <a href="https://fonts.googleapis.com/" rel="nofollow noreferrer">https://fonts.googleapis.com/</a> <a href="https://api.mapbox.com/" rel="nofollow noreferrer">https://api.mapbox.com/</a>
  <a href="https://api.tiles.mapbox.com/" rel="nofollow noreferrer">https://api.tiles.mapbox.com/</a> <a href="https://fonts.googleapis.com/" rel="nofollow noreferrer">https://fonts.googleapis.com/</a>
  <a href="https://fonts.gstatic.com" rel="nofollow noreferrer">https://fonts.gstatic.com</a> <a href="https://use.fontawesome.com/" rel="nofollow noreferrer">https://use.fontawesome.com/</a>
  https://cdn.jsdelivr.net&quot;. Either the 'unsafe-inline' keyword or a
  nonce ('nonce-...') is required to enable inline execution. Note that
  hashes do not apply to event handlers, style attributes and
  javascript: navigations unless the 'unsafe-hashes' keyword is present.</p>
  </blockquote>
  <p>I tried to look into documentation of express, helmet but I cant figure this out. What am I doing wrong?</p>