Content-Security-Policy

A lot of CSP breakage looks random until you hit icons. Text loads. JavaScript loads. Layout mostly works. Then half the UI shows empty squares, missing chevrons, or buttons with no visual affordance at all. I’ve seen teams burn hours blaming CSS pipelines when the real problem was much simpler: the icon delivery method didn’t match the site’s Content Security Policy. This case study is about that exact problem with Evergreen icons on a production-style setup. ...

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

Highlight.js is usually easy to lock down with Content Security Policy. The core library does not need eval, it does not need inline event handlers, and it works fine under a strict policy if you load it like a normal script. The place where people get sloppy is theming. They drop in inline <style> blocks, use broad CDN allowlists, or keep style-src 'unsafe-inline' around because syntax highlighting “needs it”. It doesn’t. ...

Water.css is the kind of CSS framework I like for security work: tiny, boring, and mostly predictable. That matters for CSP because every extra build step, inline style hack, or third-party asset is another thing you need to allow. If you’re using Water.css, your CSP can usually stay tight. Most setups only need to allow your own origin for styles, or a single CDN if you’re loading it remotely. What Water.css changes in CSP Water.css is just a stylesheet. In the normal case, CSP impact is limited to: ...

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

Shipping CSP around video players always sounds easy until the stream is black, the poster never loads, and the console starts yelling about blocked media, workers, and manifests. Mux is a good example. The integration itself is usually straightforward. The CSP work around it is where teams burn time, especially when they start with a tight policy and add Mux live streaming later. I’ve seen this pattern a few times: a team has a clean app with default-src 'self', maybe a nonce-based script-src, and things look great. Then product adds live video. Someone pastes in a Mux player, it works locally, and production immediately blocks half of it. ...

Cotiless had the kind of frontend stack I see all the time: marketing scripts, analytics, consent tooling, a couple of “just paste this snippet” integrations, and a team that wanted security without breaking the site. That’s exactly where CSP gets messy. The goal wasn’t to build the most academic Content Security Policy. The goal was to ship a policy that reduced XSS risk, survived real production traffic, and didn’t turn every release into a blame game between security and frontend. ...

MathJax is one of those libraries that looks harmless until you lock down your CSP and everything explodes. You ship a clean policy, reload the page, and suddenly your equations stay as raw TeX, inline styles get blocked, fonts don’t load, and the console turns into a crime scene. I’ve seen teams blame MathJax, blame CSP, then quietly add 'unsafe-inline' everywhere just to make the pain stop. That works, but it’s a bad trade. ...

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

If you’ve ever tried to lock down a frontend with Content Security Policy and then dropped in Fabric UI, you already know the pattern: the CSP gets stricter, the UI gets weird, and somebody says “just add unsafe-inline” like that doesn’t defeat half the point. Fabric UI sits in an awkward spot for CSP. Some parts play nicely enough. Other parts push you toward looser policies, especially around styles. If your goal is a hardened CSP without turning your app into a pile of exceptions, you need to know where Fabric UI helps and where it fights you. ...