Search code examples
next.jsstripe-paymentscontent-security-policyvercelstripes

Refused to load the font '<URL>' because it violates the following Content Security Policy directive: "font-src 'none'"

I have a huge problem with this error and I can't seem to stop it from showing.

*Disclaimer: I am still a junior and I am still getting to know NextJS in detail, so pardon me if made some mistakes along with asking this question.

I am using the latest version of NextJS (at the time of asking the question) and I am deploying it to vercel

I get this error that is spammed 50 or so times enter image description here

The things I tried.

1. I added a meta tag to the <Head /> element in _app.tsx that looks like this

<meta
    http-equiv="Content-Security-Policy"
    content="font-src * 'unsafe-inline';"
/>

(i misspelled the content property several times and it gave me an error, so I know it is working, I am using `font-src * 'unsafe-inline', because it was said, that it allowed all sources) BUT the error persists

source: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/font-src

2. I added headers to next.config.js

...
const securityHeaders = [
  {
    key: 'Content-Security-Policy',
    value: `font-src * 'unsafe-inline';`,
  },
]
module.exports = withImages({
  async headers() {
    return [
      {
        // Apply these headers to all routes in your application.
        source: '/:path*',
        headers: securityHeaders,
      },
    ]
  },
...

The error keeps showing. If i set this header to font-src 'self' or font-src https://js.stripe.com. I get a different error above this one, that states local font refused to load because it violates font-src https://js.stripe.com

source: https://nextjs.org/docs/advanced-features/security-headers

3. I added vercel.json

A colleague of mine suggested that this might be a vercel error, so I added this to the file

{
  "routes": [
    {
      "src": "/(.*)",
      "headers": {
        "content-security-policy-report-only": "font-src * 'unsafe-inline';"
      }
    }
  ]
}

source: https://app.rapidsec.com/docs/deploying-csp

Still, the error persists

Actual question.

Should I keep up trying with these security headers, or is it a dead-end? Is it a vercel error, or a nextjs one as it happens only on the server? Or should I just try and override the class that assigns these fonts to go around this error. P.S. when I open the link in the error, it gives me Error 404, and this is the official stripe dependency stripe: "^8.195.0

Solution

  • A browser extension called Ultrawidify was causing the issue. As it scans the site for videos (why, i don't know. I thought it only worked on youtube) it tries to access stripe.com as it was listed in the "Choose which site to control" list. Turning off the extension for the site did nothing, it still gave that error, but disabling it completely fixed the issue,