If you’ve ever dropped a Miro embed into a page and thought “it’s just an iframe, this should be easy,” CSP will usually humble you pretty fast. Miro embeds are one of those cases where a policy that looks clean and locked down can still fail in annoying ways. The iframe might not render, the board shell loads but stays blank, assets get blocked, or collaboration features quietly break because a websocket or worker got denied. ...
Embedding YouTube looks simple right up until CSP starts blocking half of it. You add an <iframe>, refresh the page, and suddenly the browser console is yelling about frame-src, img-src, or some random googlevideo.com request you didn’t explicitly ask for. That’s normal. YouTube embeds pull in more than just youtube.com, and playlists add a couple more moving parts. Here’s the practical reference I wish I had the first few times I locked this down. ...
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. ...