Hey there, let's tackle this frustrating CSP blocked issue you're facing in Android WebView—even though you didn't set any custom CSP rules yourself. Here's what's likely going on and how to fix it:

Why This Happens #

Even if you didn't manually configure a Content Security Policy, NextJS automatically adds default CSP headers in production (especially when using features like SSR, Image Optimization, or inline hydration scripts). Android WebView has stricter default security settings compared to regular browsers, so these auto-generated rules might be blocking requests to your assets—especially with your custom assetPrefix path.

Step-by-Step Solutions #

1. Explicitly Configure a CSP in NextJS #

Override NextJS's default CSP to explicitly allow your custom asset path. Add a headers section to your next.config.js to define rules that play nice with WebView:

module.exports = {
  useFileSystemPublicRoutes: false,
  assetPrefix: '/store/__js',
  webpack: (config) => {
    config.output.publicPath = `/store/__js${config.output.publicPath}`
    return config
  },
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: `default-src 'self'; 
              script-src 'self' 'unsafe-inline' 'unsafe-eval' /store/__js/; 
              style-src 'self' 'unsafe-inline'; 
              img-src 'self' data:; 
              font-src 'self'; 
              connect-src 'self'`,
          },
        ],
      },
    ]
  },
}

Key Notes for This Config:

• script-src includes /store/__js/ to allow your bundled NextJS assets to load
• 'unsafe-inline' and 'unsafe-eval' are often required for NextJS's hydration scripts and WebView compatibility (you can tighten these later once you identify exactly what's needed)
• Adjust connect-src if your app calls external APIs—add the API domains here to unblock those requests

2. Verify WebView Settings in Android Code #

Android WebView has its own security flags that might be enforcing extra restrictions. Double-check your WebView setup:

• Ensure JavaScript is enabled: webSettings.setJavaScriptEnabled(true)
• Enable DOM storage (critical for React/NextJS functionality): webSettings.setDomStorageEnabled(true)
• If you're using a custom WebViewClient, make sure it's not intercepting requests or adding additional CSP rules
• For older Android versions, you might need to set webSettings.setAllowContentAccess(true) and webSettings.setAllowFileAccess(true)

3. Debug the Exact CSP Violation #

Use Chrome DevTools to remotely debug the WebView and pinpoint exactly which resource is being blocked:

1. Connect your Android device to your computer via USB
2. Open Chrome on your computer and go to chrome://inspect
3. Select your WebView instance from the list
4. Check the Console tab for detailed CSP error messages—this will tell you exactly which rule is blocking which resource, so you can tweak your CSP with precision

Final Checks #

After making changes:

• Test in production mode (NextJS's default CSP only applies in production)
• Verify the CSP header is being sent correctly by checking the response headers in your browser's dev tools

内容的提问来源于stack exchange，提问作者Ajay Poshak