Does connect-src hide API keys in JavaScript?

No. The key is still in the file. Use publishable keys with dashboard restrictions or a server proxy.

Should brochure sites set connect-src?

Yes if you have CSP at all: 'self' plus named collectors. Missing it is not a roast F by itself.

Does RoastMyOpsec score connect-src?

No. It looks for secret-shaped strings in public JS. It does not execute fetch.

Safety

CSP connect-src vs Public JavaScript API Keys

November 3, 2022

CSP connect-src vs public JavaScript API keys is a destination allowlist versus a credential in the browser. connect-src in Content-Security-Policy limits fetch, XHR, WebSocket, and EventSource URLs the page may open. A publishable Stripe-style key in app.js is still in the download whether connect-src is tight. Server secrets belong on the server. connect-src * is how a XSS gadget talks to the whole internet; it is not how you 'protect' a key. RoastMyOpsec looks for secret-shaped strings in public JavaScript. It does not score missing connect-src, does not execute the bundle, and does not call your APIs with stolen keys.

The practical difference

script-src decides which scripts run. connect-src decides which origins those scripts may talk to. A first-party-only connect-src still ships every string in the JS. Rotate leaked keys; then proxy sensitive calls through your origin.

WebSockets need connect-src (and a server Origin check). CORS is a third gate for fetch reads. See WebSockets vs CORS and public JS keys vs server secrets.

How to choose connect-src

Brochure with first-party analytics: connect-src 'self' plus that collector origin. Tag managers: you will add vendors — still do not add *. Publishable keys: restrict by dashboard allowlists (HTTP referrer, bundle ID), not by hoping CSP hides them. default-src does not replace an explicit connect-src if you set other fetch directives.

Control	What it limits	What it does not	Takeaway
CSP connect-src	fetch / XHR / WS destinations	Strings already in the JS	Allowlist origins, not *
Publishable key in JS	Whoever downloaded the bundle	A CSP header	Treat as public; scope it
Server proxy	Who may call the real API	The browser key itself	Best for secrets
CORS ACAO	Which origins may read HTTP	connect-src	Different gate

What the roast can prove

Secret-shaped tokens in public JS can surface. Missing connect-src is not scored. Confirm the CSP on HTML yourself. Pair with JSONP vs CORS if a callback URL still embeds a key.

Common mistakes

The first mistake is connect-src * because one analytics host kept moving.

The second mistake is putting a server secret in JS and adding connect-src 'self' as the fix.

The third mistake is connect-src https: which allows any HTTPS origin.

Free audit the URL you own

RoastMyOpsec is a defensive public-surface roast: headers, cookies, sensitive paths, and more — no exploit payloads. Start with the free audit, then open the vault if the blurred findings look expensive.

Free audit now

FAQ

Does connect-src hide API keys in JavaScript?: No. The key is still in the file. Use publishable keys with dashboard restrictions or a server proxy.
Should brochure sites set connect-src?: Yes if you have CSP at all: 'self' plus named collectors. Missing it is not a roast F by itself.
Does RoastMyOpsec score connect-src?: No. It looks for secret-shaped strings in public JS. It does not execute fetch.

Sources

Related guides

Vulnerabilities
Public JavaScript API Keys vs Server Secrets
Safety
CSP vs X-Frame-Options for Clickjacking Protection
Vulnerabilities
WebSockets vs CORS for Browser APIs