TL;DR

CSP is a browser-enforced allowlist for what a page may load and connect to. If a chat widget silently fails to appear on your site, a missing CSP entry is the usual cause.

Key Points

✓

CSP is delivered as the Content-Security-Policy response header and enforced by the browser, not the server [1][2].

✓

Its main purpose is mitigating cross-site scripting: even if an attacker injects a script tag, the browser refuses to run it unless the source is allowlisted [1].

✓

Embedding a chat widget usually needs script-src for the loader, connect-src for its API and [[websocket]] endpoints, and often style-src and img-src.

✓

Content-Security-Policy-Report-Only lets you test a policy and collect violations without breaking the page — always the safe first step [2].

✓

A widget built on [[shadow-dom]] still needs style-src permission, because shadow styles are injected by the same script.

✓

Violations appear in the browser console as blocked-resource errors, which is the fastest way to diagnose an [[embed-code]] that seems to do nothing.

What a CSP actually controls

A policy is a list of directives, each naming a resource type and the origins allowed to supply it ^[1]. script-src governs JavaScript, style-src governs CSS, img-src governs images, frame-src governs any Iframe, and connect-src governs where the page may send network requests — fetch, XHR, WebSocket, and Server-Sent Events (SSE) streams all fall under it. The browser evaluates every load against the policy and blocks anything not covered. Two special values matter in practice: 'self', meaning the page's own origin, and 'unsafe-inline', which permits inline scripts and styles. Security-conscious sites avoid 'unsafe-inline' entirely, using a nonce or hash instead — which is precisely why a widget that injects inline code can break on a hardened site while working fine everywhere else.

Making a chat widget work under CSP

The practical checklist is short. Add the widget's script host to script-src so the Embed Code loader can run. Add its API host to connect-src so the widget can open its message stream and post replies. If the widget renders inside an Iframe, add that host to frame-src. If it injects CSS, add the host to style-src. The right way to find the exact list is to deploy the policy in Report-Only mode first, load a page with the widget, and read the violation reports ^[2] — that produces the real set of origins rather than a guess. A well-built JavaScript Widget publishes these requirements in its docs and keeps its domain list stable, so the policy does not need editing every time the vendor ships an update.

Why it comes up so often with live chat

Chat is one of the few third-party scripts that both executes on the page and holds an open connection to another origin, so it touches more directives than a typical analytics tag. Teams that tighten their CSP after installing a widget often see chat quietly stop working — the page looks normal, no error is visible to visitors, and conversations simply stop arriving. Because Live Chat failures are invisible in this way, the loss shows up later as a drop in Contact Rate rather than as an outage. Checking the browser console for blocked resources should be the first step whenever a widget disappears, and keeping the widget's origins documented alongside the policy prevents the same incident from recurring after the next security review.

Sources & References

Content Security Policy Level 3 - W3C ↗

Content-Security-Policy header - MDN Web Docs ↗

Last updated: August 12, 2026

Related Terms

Embed Code

An embed code is a short snippet of HTML or JavaScript a website owner pastes into their pages so a third-party tool loads and runs on their site. For Eloqra it is a two-line script snippet that sets a project configuration and loads the chat script, which then injects the live-chat widget.

JavaScript Widget

A JavaScript widget is a self-contained chunk of front-end code, loaded from a single script tag, that injects an interactive UI into any third-party web page. In Eloqra it is the live-chat widget that boots from one snippet and renders the chat launcher and conversation panel directly on a customer's site.

Iframe

An iframe (inline frame) is an HTML element that embeds a separate, self-contained HTML document inside the current page, giving the embedded content its own DOM, stylesheets, and JavaScript scope. It is one of the classic ways to drop third-party UI like a chat widget onto a host website without its code clashing with the page.

Shadow DOM

Shadow DOM is a browser API that attaches a hidden, self-contained DOM subtree to an element, with its own scoped styles that neither leak out to the host page nor get overwritten by it. [1] Eloqra renders its entire chat widget inside a shadow root so the host site's CSS can never break the widget, and the widget's CSS can never alter the host site.

WebSocket

WebSocket is a protocol (standardized as RFC 6455) that opens a single, persistent, full-duplex connection between a browser and a server, letting either side push data at any time without re-issuing HTTP requests. It is the transport many real-time apps reach for when they need low-latency, bidirectional messaging.

GDPR Compliance

GDPR compliance means handling the personal data of people in the EU and EEA in line with the General Data Protection Regulation: processing it lawfully, transparently, and securely, and honoring the rights data subjects have over their own data. For a live-chat tool this covers everything from the visitor's name and email to their IP address, location, and chat transcripts.

Put live chat on your site in 30 seconds

Eloqra gives you a lightweight live chat widget that routes every visitor message to your Telegram — free while in early access.

Get Started Free

Content Security Policy (CSP)