Iframe

SoundCloud embeds look simple: paste an <iframe>, ship it, done. Then CSP gets involved and the player disappears, the console fills with violations, and somebody “fixes” it by slapping https: into half the policy. That’s the usual failure mode. If you’re embedding SoundCloud on a site with a real Content Security Policy, the trick is to allow exactly what the embed needs and nothing else. Most breakages come from guessing the wrong directive, overusing default-src, or trying to force a third-party widget into a policy designed only for first-party code. ...

I’ve seen this exact failure more than once: a docs page ships with a pretty strict Content Security Policy, someone drops in a StackBlitz embed for an interactive demo, and suddenly the page shows a blank box or a browser console full of CSP errors. The frustrating part is that nothing feels obviously broken. The iframe markup looks fine. The StackBlitz project URL loads directly in a new tab. But embedded inside your site? Dead. ...

Reddit embeds look simple until your CSP starts blocking them. I’ve hit this a few times: product wants a Reddit post embedded on a marketing page, security wants a tight policy, and suddenly you’re trying to figure out whether you need frame-src, script-src, connect-src, or all three. The answer depends on how you embed Reddit, and that choice has real security and maintenance tradeoffs. If you’re building for a developer audience, the biggest mistake is treating “support Reddit embeds” as one CSP change. It’s not. There are a few patterns, and each one expands your policy in different ways. ...

If you’ve ever dropped a Vimeo embed onto a page and then wired up the Vimeo Player API, you’ve probably hit the classic wall: the iframe renders, but the API fails in weird ways, or the iframe is blocked entirely by CSP. This happens a lot because Vimeo embeds are one of those features that cross several CSP directives at once. You’re not just allowing a script. You’re allowing a framed document, cross-origin messaging, and sometimes extra assets depending on how you load the player. ...

YouTube embeds look simple until CSP gets involved. The usual failure mode goes like this: you paste an <iframe> embed, add autoplay=1, ship a strict policy, and suddenly the video is blank or blocked in the console. Then someone “fixes” it by throwing https: into frame-src or loosening half the policy. That works, but it’s lazy and expensive from a security standpoint. Here’s the version I’d actually ship for a developer-facing site. ...

Spotify embeds are simple until your CSP blocks them. You paste the iframe, reload the page, and get a blank box or a browser console full of Refused to frame errors. I’ve hit this enough times that I keep a tiny checklist for it. This guide is that checklist, with policies you can copy-paste. If you only need the shortest possible answer: Spotify embeds need frame-src https://open.spotify.com If your page itself is allowed to be embedded nowhere, keep frame-ancestors 'none' You usually do not need to loosen script-src for a plain Spotify iframe embed If your CSP is based on default-src 'self', you must explicitly allow Spotify in frame-src The basic Spotify embed HTML A typical Spotify embed looks like this: ...

Facebook video embeds are one of those things that look trivial until CSP starts blocking them. You paste Facebook’s embed code, reload, and suddenly your console is full of Refused to frame or Refused to load the script errors. The fix is usually small, but the exact directives matter. If you loosen the wrong thing, you end up with a policy that “works” and quietly stops protecting anything useful. Here’s the practical reference I wish more teams had handy. ...

YouTube embeds look simple right up until your Content Security Policy starts blocking half the player. I’ve seen this trip up a lot of teams: the page works fine locally, then production sends a strict CSP header and suddenly the iframe is blank, thumbnails don’t load, or the player API silently fails. The fix usually isn’t “disable CSP.” It’s understanding which directives YouTube actually hits, and keeping the allowlist as tight as possible. ...