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.

The three practical options

For Reddit embeds, most teams end up with one of these:

  1. Allow Reddit in an iframe
  2. Allow Reddit’s embed script
  3. Avoid direct embeds and render your own server-side or app-side preview

I strongly prefer the third option when I can get away with it. But if design or editorial insists on the real embedded experience, you’ll probably choose between iframe and script.

Option 1: Reddit iframe embeds

This is usually the cleanest CSP story if Reddit content is loaded in a frame and your page doesn’t need to execute Reddit JavaScript in your own origin context.

Typical policy addition:

Content-Security-Policy:
  default-src 'self';
  script-src 'self' 'nonce-r4nd0m';
  style-src 'self';
  img-src 'self' data: https:;
  font-src 'self';
  connect-src 'self';
  frame-src 'self' https://www.redditmedia.com https://www.reddit.com;
  object-src 'none';
  base-uri 'self';
  form-action 'self';
  frame-ancestors 'none';

If your current policy already has a strict baseline, you may only need to extend frame-src.

Pros

  • Smaller blast radius than allowing third-party scripts in your page.
  • Easy to reason about: Reddit is allowed only as framed content.
  • Works nicely with strong script-src setups using nonces and strict-dynamic.
  • Lower chance of breaking your own JS trust model.

Cons

  • You’re still trusting a third-party UI surface inside your page.
  • Responsive behavior can be annoying depending on the embed format.
  • You may need more than one Reddit domain if Reddit changes embed infrastructure.
  • Features can fail silently if the embed internally relies on domains you didn’t anticipate.

This is the least bad option if the embed provider supports it properly.

Option 2: Reddit embed script

Some embed flows ask you to include a script from Reddit, then place markup that the script transforms.

That changes the policy a lot. Now you’re not just allowing Reddit to display content; you’re allowing third-party JavaScript to run in your page.

A looser example:

Content-Security-Policy:
  default-src 'self';
  script-src 'self' 'nonce-r4nd0m' https://www.redditstatic.com https://www.reddit.com;
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https:;
  connect-src 'self' https://www.reddit.com https://www.redditstatic.com;
  frame-src 'self' https://www.redditmedia.com https://www.reddit.com;
  object-src 'none';
  base-uri 'self';
  form-action 'self';
  frame-ancestors 'none';

The exact domains vary by Reddit’s current embed implementation, which is part of the problem.

Pros

  • Usually gives the “official” embed behavior.
  • Better visual fidelity than a bare iframe in some cases.
  • May support richer interactions.

Cons

  • Much bigger trust decision. Third-party JS executes in your page.
  • Often drags in extra requirements for style-src, img-src, connect-src, and maybe more.
  • Harder to keep locked down over time as vendor dependencies shift.
  • Can conflict with strict CSP patterns, especially if the embed script injects additional scripts or inline styles.

If your current CSP is modern and strict, this option is where things get ugly fast.

Option 3: Don’t embed Reddit directly

This is my favorite unless the business requirement is “must look exactly like Reddit.”

Instead of loading Reddit’s UI, fetch post data on the server or through a controlled backend and render a local card component. Then your CSP stays mostly yours.

Example rendered markup:

<article class="reddit-card">
  <h3><a href="/out/reddit-post-123">Interesting thread title</a></h3>
  <p>Posted by u/example in r/webdev</p>
  <p>127 comments · 2.3k upvotes</p>
</article>

Then your CSP may not need any Reddit allowances at all, except maybe outbound navigation handling if you proxy or rewrite links.

Pros

  • Best security posture.
  • Best CSP simplicity.
  • Predictable rendering and performance.
  • No surprise third-party script behavior.
  • Easier privacy story.

Cons

  • Not a true embed.
  • You own formatting and update logic.
  • May require backend work and caching.
  • Can miss interactive features users expect from native embeds.

For docs sites, blogs, and developer portals, this is often good enough.

Comparing the options

Here’s the blunt version:

Approach Security CSP complexity Maintenance UX fidelity
Iframe embed Good Low-Medium Medium Medium
Script embed Weakest High High High
Server-side/local preview Best Low Medium Low-Medium

If I’m choosing:

  • Docs site: local preview
  • Marketing page: iframe
  • Social-heavy newsroom: maybe script embed, but only after review

How this fits into a real CSP

The header from headertest.com is a good example of a relatively disciplined policy:

content-security-policy:
default-src 'self' https://www.googletagmanager.com https://*.cookiebot.com https://*.google-analytics.com;
script-src 'self' 'nonce-MmQyYzI5NzMtZDNhZi00NGVlLWIwNWQtMjhhZDE4OWJjZTFk' 'strict-dynamic' https://www.googletagmanager.com https://*.cookiebot.com https://*.google-analytics.com;
style-src 'self' 'unsafe-inline' https://www.googletagmanager.com https://*.cookiebot.com https://consent.cookiebot.com;
img-src 'self' data: https:;
font-src 'self';
connect-src 'self' https://api.headertest.com https://tallycdn.com https://or.headertest.com wss://or.headertest.com https://*.google-analytics.com https://*.googletagmanager.com https://*.cookiebot.com;
frame-src 'self' https://consentcdn.cookiebot.com;
frame-ancestors 'none';
base-uri 'self';
form-action 'self';
object-src 'none'

This policy already does a few things right:

  • keeps object-src 'none'
  • sets base-uri 'self'
  • locks down form-action
  • uses frame-ancestors 'none'
  • uses a nonce and strict-dynamic for scripts

If you want to support a Reddit iframe in a policy like this, the smallest change is probably:

frame-src 'self' https://consentcdn.cookiebot.com https://www.reddit.com https://www.redditmedia.com;

That’s a pretty reasonable incremental change.

If you instead add Reddit’s script embed, you may have to touch several directives:

script-src 'self' 'nonce-...' 'strict-dynamic' https://www.googletagmanager.com https://*.cookiebot.com https://*.google-analytics.com https://www.reddit.com https://www.redditstatic.com;
connect-src 'self' https://api.headertest.com https://tallycdn.com https://or.headertest.com wss://or.headertest.com https://*.google-analytics.com https://*.googletagmanager.com https://*.cookiebot.com https://www.reddit.com https://www.redditstatic.com;
frame-src 'self' https://consentcdn.cookiebot.com https://www.reddit.com https://www.redditmedia.com;
img-src 'self' data: https:;

Maybe style-src too, depending on how the embed behaves.

That’s the real cost: one product request can turn a clean CSP into a vendor allowance list.

Watch out for strict-dynamic

If your site uses nonce-based scripts plus strict-dynamic, be careful when people casually suggest “just add Reddit to script-src.”

With strict-dynamic, host allowlists are treated differently by supporting browsers because trust flows from nonce- or hash-authorized scripts. If your bootstrap script loads the Reddit script dynamically, the nonce-bearing script becomes the trust anchor. If it doesn’t, the host entry might not help in the way your team expects.

This is exactly why I like keeping Reddit in frame-src when possible. It avoids turning a simple embed request into a policy semantics debate.

If you need a refresher on directive behavior, https://csp-guide.com is a good reference, and for canonical behavior I’d still check the official CSP docs from browser vendors and the spec.

Recommendation by use case

Choose iframe when:

  • you need the real Reddit embed
  • you want the smallest CSP change
  • you already run a strict script-src

Choose script embed when:

  • the official UX really matters
  • you’ve reviewed and accepted third-party JS risk
  • you’re ready to maintain a broader policy

Choose local rendering when:

  • you care most about security, privacy, and performance
  • your site is docs, editorial, or developer-focused
  • “Reddit-style preview” is enough

A practical rollout pattern

I’d do it like this:

  1. Start with Content-Security-Policy-Report-Only
  2. Try iframe first
  3. Inspect browser violation reports
  4. Add only the minimum Reddit origins actually required
  5. Move to enforcing mode
  6. Re-check after Reddit changes embed behavior

Example report-only header:

Content-Security-Policy-Report-Only:
  default-src 'self';
  script-src 'self' 'nonce-r4nd0m' 'strict-dynamic';
  style-src 'self';
  img-src 'self' data: https:;
  connect-src 'self';
  frame-src 'self' https://www.reddit.com https://www.redditmedia.com;
  object-src 'none';
  base-uri 'self';
  form-action 'self';
  frame-ancestors 'none';

That gives you a safe way to learn what the embed actually wants before you weaken your enforced policy.

My opinionated take: if you can get product to accept a rendered preview card, do that. If they need the authentic Reddit experience, prefer an iframe. I’d only allow Reddit’s script on pages where the business value clearly beats the security and maintenance cost. That trade is real, and CSP makes you pay for it up front instead of pretending third-party code is free.