app logo

Content Security Policy (CSP) Configuration

Detailed guide for configuring Content Security Policy to properly work with the NowNowNow widget.

What is Content Security Policy?

Understanding how CSP works and why it matters for widget integration

Content Security Policy (CSP) is a security feature that helps protect websites from various types of attacks, particularly Cross-Site Scripting (XSS). It works by controlling which resources (scripts, styles, images, etc.) can be loaded by the browser.

CSP is implemented via HTTP headers or meta tags that specify which sources are allowed for different types of content. When integrating third-party widgets like NowNowNow, CSP configurations need to be properly set to allow the widget scripts to load and API requests to function.

Common CSP Issues with Widgets

Identifying and resolving typical problems when using widgets with CSP

What's Not Working:

  • API requests to www.nownownow.io are blocked by CSP
  • Both script-src and connect-src CSP directives are blocking content
  • Widget not appearing on the page at all
  • Widget appears but feedback and subscription features fail

Root Causes:

  • Strict CSP settings that don't allow requests to nownownow.io domains
  • Missing connect-src directives in your CSP configuration
  • Widget script source not allowed in script-src directive

Required Configuration

The minimum CSP settings needed for the widget to function correctly

Your Content Security Policy must include the following directives for the NowNowNow widget to function correctly:

default-src 'self';
script-src 'self' 'unsafe-inline' https://widget.nownownow.io https://www.nownownow.io;
connect-src 'self' https://www.nownownow.io https://nownownow.io;
style-src 'self' 'unsafe-inline' https://widget.nownownow.io;
img-src 'self' data: https: blob:;

Important Notes:

  • The script-src directive must include widget.nownownow.io to load the widget script
  • The connect-src directive must include the API domain for widget interactions
  • 'unsafe-inline' is required for the widget to apply styling properly

Widget Integration Guidelines

Specific CSP requirements for integrating the NowNowNow widget into your site

When integrating the NowNowNow widget into your website, you'll need to configure your Content Security Policy to allow communication with our domains:

Option 1: HTTP Headers (Recommended)

Content-Security-Policy: script-src 'self' https://widget.nownownow.io https://www.nownownow.io; 
connect-src 'self' https://www.nownownow.io https://nownownow.io; 
style-src 'self' 'unsafe-inline' https://widget.nownownow.io; 
img-src 'self' data: https: blob:;

For Next.js applications, add this to your next.config.js file's headers() function.

Option 2: Meta Tag

<meta
  httpEquiv="Content-Security-Policy"
  content="script-src 'self' https://widget.nownownow.io https://www.nownownow.io; 
           connect-src 'self' https://www.nownownow.io https://nownownow.io; 
           style-src 'self' 'unsafe-inline' https://widget.nownownow.io; 
           img-src 'self' data: https: blob:;"
/>

Add this meta tag to your page's head section. In Next.js App Router, add it to your app/layout.tsx file.

Important Notes:

  • The connect-src directive must include all NowNowNow domains
  • Inline styles are required for the widget to display correctly
  • Make sure script-src includes both widget.nownownow.io and www.nownownow.io

Security Considerations

Balancing security and functionality in your CSP settings

While it's important to make your CSP compatible with NowNowNow, maintaining security is equally critical:

  • Avoid wildcards when possible: Instead of *.nownownow.io, use specific subdomains.
  • Limit 'unsafe-inline' usage: While often needed for widgets, try to scope it to specific pages if possible.
  • Use nonces or hashes: For advanced setups, consider using nonces or hashes instead of 'unsafe-inline'.
  • Regular audits: Periodically review your CSP to ensure it doesn't contain unnecessary permissions.

Pro Tip: Consider using the CSP 'report-uri' directive to collect reports about violations, which can help identify legitimate needs versus actual attacks.

Troubleshooting

Tools and techniques to identify and fix CSP-related problems

When troubleshooting CSP issues with the NowNowNow widget:

  1. Check browser console: CSP violations will be logged with detailed information about blocked resources.
  2. Inspect network requests: Look for failed or blocked requests to nownownow.io domains in the Network tab.
  3. Verify CSP headers: In Network tab, click on your page's request and check the Response Headers for the actual CSP being applied.
  4. Test with CSP relaxed: Temporarily disable CSP to confirm if it's the cause of the issue.
  5. Use the CSP Evaluator tool: Google's CSP Evaluator can check your policy for mistakes.

Remember: After making CSP changes, you may need to deploy your updated configuration and clear your browser cache to see the effects.