Portal Documentation

Appearance

Configuring Content Security Policy (CSP) for Qualibooth ​

If your website uses a strict Content Security Policy (CSP), it may inadvertently block the Qualibooth scripts, API pipelines, or the Development Assistant UI from loading correctly. To ensure seamless integration, you must whitelist Qualibooth's domains within your CSP configuration.

Why use the Wildcard Domain? ​

We strongly recommend whitelisting the wildcard domain: https://*.qualibooth.com.

This approach is the most robust because it automatically covers our CDN, API endpoints, page-metrics collectors, and any future subdomains. By using the wildcard, you ensure that your integration continues to work without requiring manual header updates if we scale our infrastructure.

Required Directives ​

To allow Qualibooth to function correctly, append https://*.qualibooth.com to the following three directives. Do not replace your existing values; simply add ours to the list.

  1. script-src: Allows our tracking scripts and the Dev Assistant logic to execute.
  2. connect-src: Permits the browser to send data to our API and real-time scanning pipelines.
  3. frame-src: Enables the Dev Assistant UI and other interactive components to load within your site's context.

Implementation Examples ​

Below are common implementation methods. We have included 'self' in these examples as a security best practice, ensuring your site can still load its own resources.

HTML <meta> Tag ​

Add this within the <head> of your HTML document.

html
<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'; 
               script-src 'self' https://*.qualibooth.com; 
               connect-src 'self' https://*.qualibooth.com; 
               frame-src 'self' https://*.qualibooth.com;">

Nginx (nginx.conf) ​

Add the add_header directive within your server or location block.

nginx
add_header Content-Security-Policy "default-src 'self'; script-src 'self' https://*.qualibooth.com; connect-src 'self' https://*.qualibooth.com; frame-src 'self' https://*.qualibooth.com;";

Apache (.htaccess) ​

Ensure mod_headers is enabled and add the following to your configuration.

apache
Header set Content-Security-Policy "default-src 'self'; script-src 'self' https://*.qualibooth.com; connect-src 'self' https://*.qualibooth.com; frame-src 'self' https://*.qualibooth.com;"

Next.js (next.config.js) ​

For modern Next.js applications, define your CSP in the headers object.

javascript
// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: "default-src 'self'; script-src 'self' https://*.qualibooth.com; connect-src 'self' https://*.qualibooth.com; frame-src 'self' https://*.qualibooth.com;",
          },
        ],
      },
    ]
  },
}

Node.js with Helmet ​

If you are using the Helmet middleware in Express/Node.js:

javascript
const helmet = require('helmet');

app.use(
  helmet.contentSecurityPolicy({
    directives: {
      ...helmet.contentSecurityPolicy.getDefaultDirectives(),
      "script-src": ["'self'", "https://*.qualibooth.com"],
      "connect-src": ["'self'", "https://*.qualibooth.com"],
      "frame-src": ["'self'", "https://*.qualibooth.com"],
    },
  })
);

Microsoft IIS (web.config) ​

Add the custom header within the <system.webServer> section.

xml
<configuration>
  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Content-Security-Policy" 
             value="default-src 'self'; script-src 'self' https://*.qualibooth.com; connect-src 'self' https://*.qualibooth.com; frame-src 'self' https://*.qualibooth.com;" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
</configuration>

Verification ​

After applying these changes, clear your browser cache and reload your site. Open the browser's developer console (F12). If the CSP is configured correctly, you should no longer see "Refused to load..." errors related to qualibooth.com.