Frontend

Vanilla Extract is one of the easier styling tools to live with under a strict Content Security Policy. That’s the good news. The reason is simple: Vanilla Extract compiles styles to real CSS files at build time. No runtime style injection, no CSS-in-JS engine pushing <style> tags into the DOM on page load, no constant fight with style-src nonces. If you care about CSP, that’s already a huge win. Still, “works better with CSP” is not the same thing as “done.” Teams often ship a decent script-src and then quietly leave style-src 'unsafe-inline' hanging around forever because some analytics tool, consent manager, or framework edge case made it convenient. ...

Chart.js v4 is one of the easier charting libraries to run under a strict Content Security Policy. That’s the good news. The less fun part: “easier” does not mean “automatic.” The moment you mix Chart.js with inline bootstrapping code, third-party plugins, CDN delivery, tag managers, or framework hydration tricks, your policy gets messy fast. I’ve had to clean this up more than once, and the pattern is always the same: the chart library itself is usually fine, but the surrounding app code quietly punches holes in CSP. ...

Sass + CSS Modules usually feels boring in the best possible way. You write .module.scss, import it into a component, get locally scoped class names, and move on with your life. Then CSP shows up and breaks your build in ways that are annoyingly indirect. The tricky part is that Sass CSS Modules themselves are not the problem. The problem is how your toolchain delivers the compiled CSS to the browser. Some setups emit static .css files. Others inject <style> tags at runtime. CSP treats those very differently. ...

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

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

I’ve seen this pattern a lot: a team adds MapLibre GL JS to an otherwise locked-down site, ships to staging, and the map quietly explodes under Content Security Policy. No tiles. No markers. Maybe the page itself works, but the console fills up with CSP errors about workers, styles, images, and network requests. Then somebody reaches for 'unsafe-inline' or loosens connect-src to https: and calls it a day. That’s how good CSPs die. ...

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

NeoMagic.css is the kind of CSS framework people pick because they want speed, tiny bundles, and fewer moving parts. Good call. But once you start shipping a real app with analytics, fonts, icons, and maybe a little JavaScript sugar, your CSP usually turns into a weird mix of good intentions and emergency exceptions. I’ve seen this a lot: the app starts with a nice strict policy, then somebody adds a tag manager, then a consent banner, then inline styles sneak in, and now style-src 'unsafe-inline' is hanging around forever like a bad temporary fix. ...