Ask users logo
Ask users
BETA
Start

Security and CSP

Configure Content Security Policy (CSP) headers to allow AskUsers widgets on your site

Overview

Content Security Policy (CSP) is an added layer of security that helps detect and mitigate certain types of attacks, including Cross Site Scripting (XSS) and data injection attacks. If your site uses CSP headers, you'll need to configure them to allow AskUsers widgets to load and function correctly.

Note: CSP errors will appear in your browser's console as blocked resources. If you see CSP violations related to askusers.org, follow the configuration steps below.

CSP configuration

To allow AskUsers widgets, you need to add the following domains to your CSP directives:

Required domains

script-src

Add https://askusers.org and https://cdn.jsdelivr.net

Why: Loads the widget JavaScript files (widget-common.js, survey-widget.js, form-widget.js) from askusers.org and the CAPTCHA library from cdn.jsdelivr.net for spam protection.

style-src

Add https://askusers.org

Why: Loads the widget CSS stylesheets (survey-widget.css, form-widget.css) that control the appearance of forms and surveys on your site.

connect-src

Add https://askusers.org, https://api.askusers.org, and https://cdn.jsdelivr.net

Why: Allows API requests to fetch widget configurations from askusers.org, submit form/survey responses to api.askusers.org, and verify CAPTCHA tokens with cdn.jsdelivr.net.

Next.js

If you're using Next.js middleware to set CSP headers, update your middleware file:

// middleware.ts or middleware.js
import { NextResponse } from 'next/server';

export function middleware(request) {
  const response = NextResponse.next();

  response.headers.set(
    "Content-Security-Policy",
    [
      "default-src 'self'",
      "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://askusers.org https://cdn.jsdelivr.net",
      "style-src 'self' 'unsafe-inline' https://askusers.org",
      "img-src 'self' data: https:",
      "font-src 'self' data:",
      "connect-src 'self' https://askusers.org https://api.askusers.org https://cdn.jsdelivr.net",
      "frame-ancestors 'none'",
    ].join("; ")
  );

  return response;
}

Note: Next.js requires 'unsafe-eval' for development mode. You can remove it in production if desired.

Express

Using the helmet middleware in Express:

const helmet = require('helmet');

app.use(
  helmet.contentSecurityPolicy({
    directives: {
      defaultSrc: ["'self'"],
      scriptSrc: [
        "'self'",
        "'unsafe-inline'",
        "https://askusers.org",
        "https://cdn.jsdelivr.net"
      ],
      styleSrc: [
        "'self'",
        "'unsafe-inline'",
        "https://askusers.org"
      ],
      imgSrc: ["'self'", "data:", "https:"],
      fontSrc: ["'self'", "data:"],
      connectSrc: [
        "'self'",
        "https://askusers.org",
        "https://api.askusers.org",
        "https://cdn.jsdelivr.net"
      ],
      frameAncestors: ["'none'"]
    }
  })
);

Nginx

Add CSP headers in your Nginx configuration:

server {
    # ... other configuration

    add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' https://askusers.org https://cdn.jsdelivr.net; style-src 'self' 'unsafe-inline' https://askusers.org; img-src 'self' data: https:; font-src 'self' data:; connect-src 'self' https://askusers.org https://api.askusers.org https://cdn.jsdelivr.net; frame-ancestors 'none';" always;
}

Apache

Add CSP headers in your .htaccess or Apache configuration:

<IfModule mod_headers.c>
    Header always set Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' https://askusers.org https://cdn.jsdelivr.net; style-src 'self' 'unsafe-inline' https://askusers.org; img-src 'self' data: https:; font-src 'self' data:; connect-src 'self' https://askusers.org https://api.askusers.org https://cdn.jsdelivr.net; frame-ancestors 'none';"
</IfModule>

Troubleshooting

Check browser console for CSP violations

Open your browser's developer tools (F12) and check the Console tab for CSP violation errors. These errors will tell you exactly which directive is blocking the resource.

Refused to load the script 'https://askusers.org/widget/widget-common.js' because it violates the following Content Security Policy directive: "script-src 'self'"

Verify configuration

After updating your CSP headers, verify they're being sent correctly:

  1. Open browser developer tools (F12)
  2. Go to the Network tab
  3. Reload your page
  4. Click on the first request (your page)
  5. Check the Response Headers for Content-Security-Policy

Common issues

  • Widget not loading: Make sure you've added all required domains to both script-src and connect-src
  • Styles not applying: Add https://askusers.org to style-src
  • API calls failing: Verify https://api.askusers.org is in connect-src
  • Changes not taking effect: Clear your browser cache and hard reload (Ctrl+Shift+R or Cmd+Shift+R)

Need help?

If you're still experiencing issues after following this guide, please contact our support team at support@askusers.org with:

  • The CSP violation errors from your browser console
  • Your current CSP configuration
  • Your platform/framework (Next.js, Express, etc.)