Posts

Evergreen by Segment is one of those tools that quietly expands your CSP over time if you’re not paying attention. You start with a neat script-src, then analytics, edge APIs, previews, and embedded UI bits show up and your policy turns into a junk drawer. This guide is the version I wish I had when wiring CSP around Evergreen on a production site. I’m assuming you want copy-paste examples first, with enough explanation to avoid breaking your app. ...

If you embed Whimsical and your CSP is even slightly too strict, it will break in ways that are annoying to debug. Usually you get a blank iframe, a console error, and a vague sense that CSP is punishing you for trying to ship something useful. Here’s the good news: Whimsical embeds are usually straightforward because they’re iframe-based. That means you often only need to allow the Whimsical frame itself, instead of opening up script-src or connect-src all over your app. ...

Clarity gives you a solid design system. CSP gives you a solid boundary. The annoying part is getting both to cooperate without punching holes in your policy. If you’re using VMware Clarity and trying to keep a sane Content Security Policy, the trade-offs are pretty familiar: developer ergonomics vs actual security, static hosting vs runtime nonces, and “just make it work” vs “I’d like to block XSS this year.” This guide compares the main ways teams approach CSP with Clarity-heavy apps, where the pain usually shows up, and what I’d recommend in practice. ...

Bandcamp embeds look simple right up until your CSP starts blocking them. You paste the iframe, refresh, and get a blank box or a console full of violations. I’ve seen this pattern a lot: teams lock down CSP correctly, then third-party embeds get boladted on later and nobody updates the policy with any care. The result is usually one of two bad outcomes: the embed breaks, or somebody “fixes” it by allowing way too much. Bandcamp is pretty tame compared to ad tech or social widgets, but there are still a few easy mistakes that keep showing up. Here’s what tends to go wrong, and how I’d fix it without turning your CSP into allow basically everything. ...

Fluent UI is great until you turn on a real Content Security Policy and your app suddenly looks half-broken. I’ve hit this a few times with React apps using Fluent UI. Buttons still render, but spacing is off, icons disappear, focus styles get weird, and the console starts yelling about blocked styles. The root cause is usually the same: Fluent UI has historically relied on runtime style injection, and strict CSP setups don’t like that unless you wire things correctly. ...

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. ...