Content Security Policy Issue in next js example repo

[jimsheen]

Hi there, I have been trying to implement the react fingerprint js npm package into my next js project and come up against CSP issues blocking requests to your servers.

I just cloned your next js example package and can confirm the same CSP issues occur here. Please could you help me understand how I can work around this please?

I have tried to update the CSP in the next.config.js based on these docs but still the requests are being blocked: https://nextjs.org/docs/advanced-features/security-headers https://dev.fingerprint.com/docs/js-agent-csp

Any help resolving this issue would be greatly appreciated. Please let me know if I can provide any further information

// next.config.js

/** @type {import('next').NextConfig} */

const ContentSecurityPolicy = `
    base-uri 'self';
    default-src 'self' 'unsafe-eval' 'unsafe-inline' https://*.fptls.com https://*.fptls2.com https://eu.api.fpjs.io https://fpnpmcdn.net;
    style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
`;

const securityHeaders = [
  {
    key: 'Content-Security-Policy',
    value: ContentSecurityPolicy.replace(/\s{2,}/g, ' ').trim(),
  },
];

const nextConfig = {
  reactStrictMode: true,
    async headers() {
        return [
            {
                source: '/(.*)',
                headers: securityHeaders,
            },
        ]
    }
}

module.exports = nextConfig

[JuroUhlar]

Being discussed in https://github.com/fingerprintjs/fingerprintjs/issues/863

[JuroUhlar]

Solved in the other issue, closing as duplicate.