HTMLHard

How do you embed third-party content in an <iframe> safely?

By FrontendPro Editorial Team Updated 8/14/2026

#html#security#iframe

Answer

html

<iframe
  src="https://example.com/widget"
  sandbox="allow-scripts"
  referrerpolicy="no-referrer"
  loading="lazy"
  title="Payment widget"></iframe>

An empty sandbox blocks everything; grant capabilities one at a time. Never combine allow-scripts allow-same-origin for untrusted content - the frame can then remove its own sandbox.
Talk to it via postMessage and always check event.origin.
Protect your own page from being framed with Content-Security-Policy: frame-ancestors 'self'.
title is required for screen readers.

HTML

HTMLHard

How do you embed third-party content in an <iframe> safely?

By FrontendPro Editorial Team Updated 8/14/2026

#html#security#iframe

Answer

html

<iframe
  src="https://example.com/widget"
  sandbox="allow-scripts"
  referrerpolicy="no-referrer"
  loading="lazy"
  title="Payment widget"></iframe>

An empty sandbox blocks everything; grant capabilities one at a time. Never combine allow-scripts allow-same-origin for untrusted content - the frame can then remove its own sandbox.
Talk to it via postMessage and always check event.origin.
Protect your own page from being framed with Content-Security-Policy: frame-ancestors 'self'.
title is required for screen readers.