Content Security Policy

Script tag

Add these sources to the directives your policy already has (keep 'self' and anything else you use):

script-src 'self' https://commentkit.dev;
connect-src 'self' https://commentkit.dev wss://ws.commentkit.dev https://commentkit-in-653714462960.s3.ap-south-1.amazonaws.com;
img-src 'self' https://commentkit.dev https://commentkit-in-653714462960.s3.ap-south-1.amazonaws.com blob:;

If the widget does not appear and the console says it could not load, a missing script-src or connect-src entry is the usual cause.

The loader comes from https://commentkit.dev/cdn/v1/loader.js and imports the widget from the same folder. It needs no 'unsafe-eval' and no 'unsafe-inline' scripts.

npm package

With @commentkit/comment-kit the code is part of your own bundle, so script-src needs nothing new. The widget still talks to CommentKit:

connect-src 'self' https://commentkit.dev wss://ws.commentkit.dev https://commentkit-in-653714462960.s3.ap-south-1.amazonaws.com;
img-src 'self' https://commentkit.dev https://commentkit-in-653714462960.s3.ap-south-1.amazonaws.com blob:;

What each line is for

• https://commentkit.dev: the API (/api/v1), the loader and, in img-src, screenshot thumbnails, which are served through short-lived links on this address.
• wss://ws.commentkit.dev: live updates (who is on the page, new feedback) for signed-in people. It is a WebSocket, so list it in connect-src; older browsers do not match wss: from an https: source.
• https://commentkit-in-653714462960.s3.ap-south-1.amazonaws.com: screenshots and attachments. The widget uploads them straight to storage (connect-src) and shows them from there after a redirect (img-src). Storage is in AWS ap-south-1 (Mumbai).
• blob:: the screenshot preview and markup while someone writes a comment, before it is uploaded.
• Profile pictures from Google sign-in load from https://lh3.googleusercontent.com. Without it, initials are shown instead.

Styles: the widget uses constructable stylesheets inside its Shadow DOM, so a strict style-src works in current browsers. Browsers without constructable stylesheets fall back to a <style> element in the Shadow DOM, which a strict style-src blocks. The screenshot is drawn from a disposable copy of the page; if your policy stops that, the comment is sent without a screenshot rather than failing.

Popups and frames

Sign-in opens a small window on https://commentkit.dev (or continues in the same tab inside in-app browsers). No frame-src entry is needed: CommentKit never puts your reviewers’ sign-in in an iframe, and your frame-ancestors setting is unaffected.

If your site sends Cross-Origin-Opener-Policy: same-origin, the sign-in window cannot message your page. The widget notices and asks the server whether sign-in finished instead, so it still works; it can take a few seconds longer.

Trusted Types

The widget never writes HTML strings: it renders text through DOM APIs and never calls eval, so it works with require-trusted-types-for 'script'. The screenshot engine (html2canvas, loaded only while someone comments) writes into its own copy of the page; with Trusted Types enforced that is blocked, and feedback is sent without the automatic screenshot. Reviewers can still attach images.

The screenshot engine’s two fixed HTML writes go through one narrow policy named commentkit-capture, so screenshots keep working under Trusted Types. If your policy lists the allowed policies with trusted-types, add commentkit-capture to that list.

Subresource Integrity

/cdn/v1/loader.js is a channel: it always serves the latest 1.x release, so its bytes change and it cannot carry an integrity hash. To pin a release, use a versioned CDN URL with the integrity attribute from its release notes, or install the npm package at an exact version and commit your lockfile.

An integrity attribute only checks the file it is on. The loader imports the widget from the folder it was loaded from, so the hash on the loader tag does not cover the widget files themselves.