Fix CSP Frame-Src Violations for Blocked iframes

In this tutorial, you'll learn about Fix CSP Frame. We cover key concepts, practical examples, and best practices.

YouTube embeds, payment iframes, and third-party widgets display blank boxes instead of content. The frame-src CSP directive controls which origins can be embedded in <iframe>, <frame>, and <object> elements. Blocked iframes fail silently without visible errors.

Wrong

The CSP does not list the external domain used in the iframe.

Content-Security-Policy: frame-src 'self'

<iframe src="https://www.youtube.com/embed/abc123"></iframe>
<iframe src="https://checkout.stripe.com/pay/cs_abc"></iframe>
<iframe src="https://player.vimeo.com/video/123456"></iframe>

Refused to frame 'https://www.youtube.com/' because it violates the following
Content Security Policy directive: "frame-src 'self'".

Refused to frame 'https://checkout.stripe.com/' because it violates the
following Content Security Policy directive: "frame-src 'self'".

Refused to frame 'https://player.vimeo.com/' because it violates the
following Content Security Policy directive: "frame-src 'self'".

Right

Add each iframe source domain to frame-src.

Content-Security-Policy: frame-src 'self' https://www.youtube.com https://checkout.stripe.com https://player.vimeo.com

With helmet:

app.use(helmet.contentSecurityPolicy({
  directives: {
    frameSrc: [
      "'self'",
      'https://www.youtube.com',
      'https://checkout.stripe.com',
      'https://player.vimeo.com',
    ],
  },
}));

<iframe src="https://www.youtube.com/embed/abc123"></iframe>
<iframe src="https://checkout.stripe.com/pay/cs_abc"></iframe>
<iframe src="https://player.vimeo.com/video/123456"></iframe>

All iframes render correctly. Each embedded service domain is explicitly allowed in the CSP, and the browser no longer blocks the framed content. The page displays videos, payment forms, and widgets as expected.

Prevention

• Use frame-src instead of the deprecated child-src directive.
• List every domain used in <iframe>, <frame>, or <object> tags.
• For YouTube embeds, use https://www.youtube.com (not just youtube.com).
• For Stripe payment elements, use https://checkout.stripe.com or https://js.stripe.com.
• Use frame-ancestors 'none' on embedded content to prevent clickjacking of your own site.
• Audit all iframes on the site by searching for <iframe in the source code before deploying the policy.

DodaTech Tools

Doda Browser highlights blocked iframes with a red border overlay in developer mode and shows the exact CSP directive that prevented the frame from loading. The browser also logs the blocked URL for debugging. DodaZIP's page inventory tool automatically detects all iframe sources used across the site and generates the required frame-src entries. Durga Antivirus Pro embeds threat intelligence dashboards via iframes with explicit per-origin allowlisting in frame-src, ensuring only trusted visualization servers can be embedded.

FAQ