Content-Security-Policy

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

Font Awesome is one of those libraries that looks harmless until CSP gets involved. Then suddenly half your icons disappear, the browser starts shouting about blocked fonts or styles, and somebody suggests adding https: everywhere until the warnings stop. That usually “works,” but it also guts your policy. If you’re using Font Awesome with a Content Security Policy, the failures usually come from a few predictable mistakes: allowing the CSS but not the font files allowing the kit script but not the injected styles self-hosting some assets and loading others from a CDN relying on default-src and assuming it covers everything you need fixing breakage with unsafe-inline when the real problem is somewhere else Here’s what goes wrong and how I’d fix it. ...

Teams love design systems because they make UI feel consistent. Security teams usually get handed the bill later. That’s exactly where CSP gets painful in a Gestalt-style frontend: lots of reusable components, analytics hooks, consent tooling, embedded assets, and a build pipeline that mixes app code with third-party scripts. If you’re working on a Pinterest-like stack using Gestalt components, you can’t treat Content Security Policy as a checkbox. You need a policy that survives real product code. ...

Plotly.js is great until you put a real Content Security Policy in front of it. I’ve seen this go the same way a bunch of times: charts work fine in local dev, someone adds a decent CSP in staging, and suddenly the graph is blank, console errors pile up, and the quick “fix” is to throw 'unsafe-inline' and 'unsafe-eval' into the policy. That usually gets the chart rendering again, but it also guts the point of having CSP. ...

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

Leaflet looks simple until you lock down your site with Content Security Policy. Then the map goes blank, markers disappear, plugin styles break, and you end up staring at DevTools wondering why a harmless map library suddenly needs half the internet. I’ve hit this enough times that I treat Leaflet as a CSP integration task, not just a UI widget. The good news: most failures come from a handful of repeat mistakes. ...

Instagram embeds are one of those things that look simple until CSP gets involved. You paste the embed code, reload the page, and suddenly the post is blank, the console is yelling about blocked frames or scripts, and someone suggests adding https: to half your policy. That usually “works,” but it also wrecks the point of having CSP in the first place. If you want Instagram embeds and a CSP that still means something, you need to decide which tradeoff you’re willing to accept. ...

Recharts is usually one of the easier charting libraries to live with under Content Security Policy. That’s the good news. The bad news: teams still break dashboards with CSP all the time, usually because they copy a broad policy from somewhere else, tighten it blindly, or blame Recharts for behavior caused by their own app shell, analytics, or CSS-in-JS stack. If you’re running Recharts in a React app, most CSP issues come from the environment around the charts, not the chart library itself. Recharts renders SVG. That’s a lot friendlier than libraries that depend on eval, dynamic code generation, or canvas hacks. Still, there are a few predictable ways to mess it up. ...

Remix Icon is easy to drop into a project, which is exactly why people ship it with a sloppy CSP. I’ve seen this a lot: someone adds the Remix Icon CDN snippet, the icons don’t render, they get a wall of CSP errors, and the “fix” becomes style-src 'unsafe-inline' plus a couple of random hostnames copied from the console. That works, but it’s the kind of fix that quietly makes the policy worse every time the app changes. ...

Bulma is one of the easier CSS frameworks to secure with Content Security Policy. That’s mostly because Bulma itself is just CSS. No bundled JavaScript, no weird runtime code generation, no framework magic that sneaks in inline scripts behind your back. That said, real Bulma sites rarely stay “just CSS” for long. You add a navbar burger toggle, a modal, analytics, a consent banner, maybe a form widget, and suddenly your clean CSP turns into a pile of exceptions. ...