Helmet Content Security Policy blocking Bootstrap

I was writing Bootstrap codes but At first, bootstrap didn't load, so I put this script:

app.use(helmet());
app.use(
helmet.contentSecurityPolicy({
    directives: {
        defaultSrc: ["'self'"],
        scriptSrc: ["'self'", "https://cdn.jsdelivr.net"],
        objectSrc: ["'none'"],
        styleSrc: ["'self'", "https://cdn.jsdelivr.net"],
        fontSrc: ["https://fonts.gstatic.com"],
        upgradeInsecureRequests: [],
    },
})
);

Then this error occurred:

"Refused to load the font 'data:font/truetype;charset=utf-8;base64,AAEAAAAQAQAABAAARkZUTX2Nv5YAAjnoAAAAHEdERUYENABTAAHJmAAAACRHUE9T4BjvnAACObAAAAA2R1NVQgmn+v0AAcm8AABv9E9TLzIKcyJjAAABiAAAAGBjbWFwv7oVNQAACfQAAAYWY3Z0IAARAUQAABAMAAAABGdhc3D//wADAAHJkAAAAAhnbHlmCJ88vQAAGBgAAYfUaGVhZAkc3WMAAAEMAAAANmhoZWEEAQIFAAABRAAAACRobXR4diRu0wAAAegAAAgMbG9jYdlVdhQAABAQAAAIBm1heHAEXADhAAABaAAAACBuYW1ludepWgABn+wAAAKdcG9zdBJ+3qAAAaKMAAAnBAABAAAAAQPX5ykXUl8PPPUAHwIAAAAAANP0zEUAAAAA0/TMSAAA//4CAAIEAAAACAACAAAAAAAAAAEAAAIAAAAAAAIAAAAAAAIAAAEAAAAAAAAAAAA...4AIAAgABIAIQIoAAgADwANACAAIgAbABsAJgL2AAgAFQAOACEAIAAVABwAIQIlAAcADwANAA4AIgAhABwA2gAHABIAEgAYABIAGwARAQIABwAWABEAFAASACEAIAAqAAcADgAfABsAFgAbABQBkwAFAA4AIQAQABUDqwAEABwAHwAYAtEABAAWABMAFgBdAAMAEgAPAtAAAgAQAAEABAOsABQAHAAiACEAIgAPABIADQAgABIADgAfABAAFQASABEADQATABwAHwADAAgAIgA0AnMADAAcABwAGgANABwAIgAhAA0AGgAOAB0DsgAIABwAHAAaAA0AHAAiACEDsQAHABwAHAAaAA0AFgAbAAIABAAGAAcAAAAOABYAAgAYACQACwAmACcAGAABAAAACgAeADQAAWxhdG4ACAAEAAAAAP//AAEAAAABc2l6ZQAIAAQAAACgAAAAAAAAAAAAAAAAAAAAAQAAAADVpCcIAAAAANP0zEUAAAAA0/TMSA=='"

How can I fix this issue?

Solution

You have to use contentSecurityPolicy. For example if you have used these CDN links for loading bootstrap:

doctype html
html
  head
    title D&C
    link(href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css", rel="stylesheet", integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1", crossorigin="anonymous")
    style
        include ./styles.css

  body
    include nav

    block content

    block footer
      footer
        //- p © #{new Date().getFullYear()}
    script(src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4", crossorigin="anonymous")
    script(src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3", crossorigin="anonymous")

Solution 1: set contentSecurityPolicy to false

// This disables the `contentSecurityPolicy` middleware but keeps the rest.
app.use(
  helmet({
    contentSecurityPolicy: false,
  })
);

Solution 2: Configure contentSecurityPolicy

// app.use(helmet());
app.use(
  helmet.contentSecurityPolicy({
    directives: {
      defaultSrc: ["'self'"],
      scriptSrc: ["'self'", "cdn.jsdelivr.net"],
      styleSrc: ["'self'", "cdn.jsdelivr.net"],
    },
  })
);