fingerprintjs/fingerprintjs-pro-react

Content Security Policy Issue in next js example repo

jimsheen opened this issue · 2 comments

jimsheen commented

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

image

// 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 commented

Solved in the other issue, closing as duplicate.