# Configuring Content Security Policy (CSP) for Calcumate

If your site uses [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) to mitigate threats such as cross-site scripting (XSS) and clickjacking, you'll need to allow the Calcumate domains below so the calculator widget can load and operate correctly.

CSP is enforced per-directive, so it's not enough to list our domains in a single place — each domain needs to be added to the directive that matches the type of resource it serves. The table below shows exactly where each domain belongs.

### Required allowlist

| Directive     | Domains to allow                                                                                                                                                                                                                  | Purpose                                                |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
| `script-src`  | `https://*.calcumate.co`                                                                                                                                                                                                          | Loads the calculator widget bundle                     |
| `connect-src` | <p><code>https\://\*.calcumate.co</code><br><code><https://optimize.calcumate.co></code><br><code><https://r354ovsoac.execute-api.ap-southeast-2.amazonaws.com></code></p>                                                        | API calls for calculator data and packing optimization |
| `img-src`     | <p><code>https\://\*.calcumate.co</code><br><code><https://calcumate-calculator-new-production.s3-ap-southeast-2.amazonaws.com></code><br><code><https://calcumatev2-attachments-prod.s3-ap-southeast-2.amazonaws.com></code></p> | Item images, icons, and customer-uploaded attachments  |
| `style-src`   | `https://*.calcumate.co`                                                                                                                                                                                                          | Widget styles                                          |
| `frame-src`   | `https://*.calcumate.co`                                                                                                                                                                                                          | Embedded calculator frame (if applicable)              |

If your CSP relies on `default-src` as a catch-all, adding the domains there will also work — but we recommend per-directive rules for tighter security.

### Example CSP header

Here's an example header that allows Calcumate alongside common third-party services:

```
Content-Security-Policy:
default-src 'self';
script-src  'self' https://*.calcumate.co;
connect-src 'self' https://*.calcumate.co https://optimize.calcumate.co https://r354ovsoac.execute-api.ap-southeast-2.amazonaws.com;
img-src     'self' data: https://*.calcumate.co https://calcumate-calculator-new-production.s3-ap-southeast-2.amazonaws.com https://calcumatev2-attachments-prod.s3-ap-southeast-2.amazonaws.com;
style-src   'self' 'unsafe-inline' https://*.calcumate.co;
frame-src   'self' https://*.calcumate.co;
```

### How to identify a CSP issue

If the calculator stops loading after a CSP change, open your browser's developer console. CSP violations look like this:

> Refused to connect to 'https\://…' because it violates the following Content Security Policy directive: "connect-src …"

The directive named in the error message tells you exactly where the missing domain needs to be added.

> **Note:** Errors that say `ERR_BLOCKED_BY_CLIENT` are *not* CSP-related, they come from browser extensions (ad-blockers, privacy tools) on the visitor's device and aren't something your CSP or our widget can resolve.

### Need help?

If you've added these rules and the calculator still isn't loading, send us a screenshot of the console errors and the relevant CSP header from your site, and we'll help diagnose.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.calcumate.co/frequently-asked-questions/configuring-content-security-policy-csp-for-calcumate.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.