Embeds

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

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

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

If you want to drop a Deezer player into a page without punching unnecessary holes in your Content Security Policy, you’ve got a couple of decent options and one bad habit to avoid. The bad habit is the usual one: something breaks, you sprinkle domains across default-src, maybe throw in https: for good measure, and call it done. That works right up until your CSP stops being a security control and becomes decorative wallpaper. ...

If you want to embed Eraser in a site with a sane Content Security Policy, you have a few choices. None of them are perfect. The right one depends on whether you care more about tight isolation, easy maintenance, or preserving a very strict policy posture. I’ve had to make this tradeoff on production apps, and the pattern is always the same: the embed itself is easy, the CSP around it is where the mess starts. ...

Embedding Apple Music looks simple right up until your CSP blocks it and leaves you staring at a blank iframe. I’ve hit this a few times on locked-down sites: the page loads fine, your own scripts work, and then the Apple Music player silently fails because frame-src or child-src doesn’t allow Apple’s embed origin. If you’re running a reasonably strict policy, you need to account for the iframe itself and, depending on your setup, any assets or network requests your page makes around it. ...

Twitch embeds look simple right up until CSP gets involved. Then you get a blank box, a console full of errors, and a lot of bad advice telling you to just add *.twitch.tv everywhere and move on. That usually “works,” but it’s sloppy and often still incomplete. If you’re embedding a Twitch stream or chat on a site with a real Content Security Policy, there are a handful of mistakes I see over and over. Most of them come from misunderstanding which side controls what: your page’s CSP controls what your page is allowed to load, while Twitch’s own embed rules control whether Twitch will agree to render inside your page at all. ...

Loom embeds look simple: paste an iframe, ship it, move on. Then CSP blocks it, the video area goes blank, and somebody “fixes” it by slapping https: into frame-src or loosening half the policy. I’ve seen this happen more than once. Loom is exactly the kind of third-party embed that exposes weak CSP habits: developers guess at directives, over-allow sources, or forget that an iframe usually pulls in more than one origin. ...

Ghost embeds are easy to drop into a page and easy to forget from a CSP perspective. That’s where people get burned: the embed works in development, then production CSP blocks it, or worse, someone loosens the policy with script-src * and calls it done. Don’t do that. If you’re embedding Ghost content, membership widgets, or Portal-related UI on your site, you need to explicitly allow the right sources and keep the policy tight everywhere else. The good news is Ghost’s embed surface is pretty manageable if you approach it methodically. ...

TikTok embeds look simple: paste a blockquote, load their script, done. Then your CSP blocks it and suddenly you’re staring at a blank box, console noise, and a product manager asking why the campaign page is broken. I’ve seen this pattern a lot. Teams start from a pretty strict policy, add TikTok, and either overcorrect by allowing half the internet or undercorrect and leave the embed half-broken. The sweet spot is narrower than people think. ...