CSP error while integrating in Next JS 15

[joshtomr17]

I tried checking out similar issues but it turns out that most are outdated.

I have been facing CSP issues when trying to integrate react-plaid into my next js app.

I currently receive the link token from the backend which makes the integration pretty straight-forward and all I just have to do is open() the react-plaid. However, I kept facing CSP issues even after using their (React plaid docs) recommended CSP configurations

Plaid Payment component below

'use client';

import { usePlaidLink } from 'react-plaid-link';
import { useEffect } from 'react';

export default function PlaidPayment({ link_token }: { link_token: string }) {
  const { open, ready } = usePlaidLink({
    token: link_token,
    onSuccess: async (public_token, metadata) => {
      console.log('plaid success', public_token, metadata);
    },
    onExit: (err, metadata) => {
      console.log('user exited plaid', err, metadata);
    },
  });

  useEffect(() => {
    if (ready) open();
  }, [ready]);

  return null;
}

And this is where I'm passing the token retrieved from the Backend

  if (token) return <PlaidPayment link_token={token} />

CSP HEADER configuration (Note: I also have stripe as one of my payment options and that works fine)

  const cspHeader = `
    default-src https://cdn.plaid.com/;
    script-src 'self' 'unsafe-inline' 'unsafe-eval' blob: https://cdn.plaid.com/* https://*.plaid.com/* https://js.stripe.com https://*.js.stripe.com https://checkout.stripe.com https://www.gstatic.com/recaptcha/ https://www.google.com/recaptcha/ https://cdn.getpinwheel.com https://maps.googleapis.com https://cdn.plaid.com/link/v2/stable/link-initialize.js *;
    connect-src 'self' https://api.stripe.com https://checkout.stripe.com ${dev ? 'https://sandbox.plaid.com' : 'https://production.plaid.com'} https://cdn.plaid.com https://*.plaid.com https://www.google-analytics.com *;
    frame-src https://checkout.stripe.com https://js.stripe.com https://*.js.stripe.com https://hooks.stripe.com https://cdn.plaid.com https://*.plaid.com *;
    img-src 'self' blob: data: https://*.stripe.com https://cdn.plaid.com https://*.plaid.com https://www.google-analytics.com *;
    style-src 'self' 'unsafe-inline' https://cdn.plaid.com *;
    font-src 'self' data:;
    object-src 'none';
    base-uri 'self';
    form-action 'self';
    frame-ancestors 'none';
  `
    .replace(/\s{2,}/g, ' ')
    .trim();

  const res = NextResponse.next();

  res.headers.delete('Content-Security-Policy');
  res.headers.set('Content-Security-Policy', cspHeader);
  // res.headers.set('x-nonce', nonce);

  return res;
}

React Plaid recommended configurations which also fails

default-src https://cdn.plaid.com/;
script-src 'unsafe-inline' https://cdn.plaid.com/link/v2/stable/link-initialize.js;
frame-src https://cdn.plaid.com/;
connect-src https://production.plaid.com/;

THe actual error below

Refused to load the script 'blob:https://cdn.plaid.com/895c1c21-df2a-445a-b3ea-9341d0e141a5' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' https://*.plaid.com https://www.gstatic.com/recaptcha/ https://www.google.com/recaptcha/ https://cdn.getpinwheel.com https://maps.googleapis.com 'sha256-t/hpGKInwgva06W2DRbv+NBMQBGmM0M9CmFM9HrvmoA=' 'sha256-Q2BuusfJf7qPwvz9U1VOF502KW7JtNFXxsDsxfPIu50='". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback

[phoenixy1]

A few questions:

1. Can you confirm that Link is actually failing to launch, rather than this error just appearing in the console?
2. Are you launching Link inside an iFrame? If so, try removing it from the iFrame.
3. Is this error still occurring? We had some issues yesterday due to the AWS outage (while I wouldn't expect this particular issue would be related to the AWS outage, it did have a lot of random impacts).

Finally -- I am not super familiar with Next.js, but I asked ChatGPT about this error, and it suggested that Next.js may need the following additions to the CSP:

default-src 'self';
script-src 'self' 'unsafe-inline' 'unsafe-eval' blob: https://cdn.plaid.com https://*.plaid.com;
script-src-elem 'self' 'unsafe-inline' 'unsafe-eval' blob: https://cdn.plaid.com https://*.plaid.com;
frame-src https://cdn.plaid.com https://*.plaid.com;
connect-src 'self' https://cdn.plaid.com https://*.plaid.com https://sandbox.plaid.com;  // or production
worker-src 'self' blob:;

Can you try that and let me know if that works? If so I can update the docs to reflect these changes for Next.js.

[phoenixy1]

closing due to no response