Web-Security

Bunny Fonts is one of the easier font providers to support in Content Security Policy, mostly because the setup is simple and the domains are predictable. If you just want the working policy, here it is: Content-Security-Policy: default-src 'self'; style-src 'self' https://fonts.bunny.net; font-src 'self' https://fonts.bunny.net; img-src 'self' data:; script-src 'self'; connect-src 'self'; object-src 'none'; base-uri 'self'; frame-ancestors 'none'; That covers the common case where your page loads CSS from Bunny Fonts and then loads font files from the same host. ...

I’ve run into this exact problem a few times: a team tightens Content Security Policy, ships it to production, and suddenly half the icons vanish. Not SVG logos. Not a giant component library. Tiny CSS.gg icons. They look harmless because CSS.gg is “just CSS”. That’s exactly why they get people into trouble. CSS-based icon sets often depend on inline styles, pseudo-elements, CSS variables, or external stylesheets loaded from a CDN. All of those can collide with a strict style-src. ...

If you’re building a Foundation site, CSP usually gets messy in two places fast: JavaScript plugins and inline styles. Foundation itself isn’t uniquely hard to secure, but the usual stack around it—jQuery, what-input, CDN assets, analytics, consent banners—turns a clean policy into a pile of exceptions if you’re not careful. This guide is the version I wish I had when tightening CSP on a real Foundation app: minimal theory, lots of working policies. ...

Replit embeds are usually simple right up until CSP gets involved. You drop in an iframe, everything looks fine locally, then production blocks it with a vague browser error. Or worse, your CSP is broad enough that it works, but now you’ve punched a bigger hole in your policy than you meant to. This guide is the version I wish I had handy the last few times I dealt with third-party embeds. ...

If you embed tldraw in a page, your CSP usually breaks in one of three places: the iframe itself gets blocked tldraw can load, but its network calls fail collaborative features fail because WebSocket or worker policies are too tight This guide is the practical version: what to allow, what to avoid, and copy-paste policies you can start with. I’m assuming you already know basic CSP syntax. If you need a refresher on directives, https://csp-guide.com is a solid reference. ...

Tidal embeds look simple right up until your Content-Security-Policy blocks them. That’s the usual story with third-party media: the product team pastes an iframe, it works locally, then production CSP shuts it down and everyone blames security. The real fix is to decide what kind of CSP you want to run: strict and minimal, or practical and easier to maintain. For Tidal embeds, that tradeoff matters because you’re almost always dealing with an iframe, not a script widget you fully control. That changes which directives matter most. ...

A lot of CSP advice sounds clean on paper and falls apart the second you add the usual site accoutrement: analytics, tag managers, cookie consent, forms, embeds, and one “temporary” inline script that survives for two years. That’s why CSP work gets messy on real sites. I’m going to use a real-world style policy based on the header observed on headertest.com and walk through what a developer-facing site like csp-examples would look like before and after tightening it up. ...

I’ve had to fix this exact problem more than once: design wants an InVision prototype embedded on a marketing page or internal docs site, everything works locally, then production CSP blocks it hard. The usual bad fix is “just allow everything from https: in frame-src and script-src.” That gets the demo unblocked and quietly wrecks the value of CSP. A better fix is boring and precise: figure out exactly what the embed needs, add the minimum policy changes, and verify you didn’t loosen unrelated directives. ...

Figma embeds are one of those things that look trivial until your CSP blocks them and you end up staring at a blank iframe. If you’re embedding a Figma file, prototype, or board on your site, the CSP piece is usually small but annoyingly specific. The main directive you need is frame-src. Sometimes you also need to think about child-src, frame-ancestors, and the fact that Figma itself loads its own resources inside the iframe, not in your page context. ...

CSS-in-JS is great right up until you try to lock down style-src. That’s where the friction starts. Many CSS-in-JS libraries inject <style> tags at runtime, and CSP treats those as inline styles. If your policy is strict, those styles get blocked unless you loosen style-src or add a nonce. I’ve seen teams spend weeks tightening script-src only to quietly leave style-src 'unsafe-inline' in place because Emotion, styled-components, JSS, or a legacy UI kit needed it. That usually happens because CSS-in-JS was adopted for developer experience, while CSP got added later under security pressure. ...