Embedded Content

An iframe places another browsing context inside a page. It is powerful but can add performance, privacy, and security costs, so use it only when direct integration is not practical.

A responsible iframe

01<iframe
02  src="https://maps.example.com/embed/location"
03  title="Map showing the workshop location"
04  width="800"
05  height="450"
06  loading="lazy"
07  referrerpolicy="strict-origin-when-cross-origin"
08  sandbox="allow-scripts allow-same-origin"
09></iframe>

The title names the embedded experience. Intrinsic dimensions reserve space. sandbox removes capabilities, then allows back only what the embed requires.

Other embedding choices

Use object rarely for documents with fallback content. Prefer native audio, video, and img elements for media because their semantics and controls are clearer.

01<object data="/guide.pdf" type="application/pdf" width="800" height="600">
02  <p><a href="/guide.pdf">Download the guide as a PDF</a>.</p>
03</object>

Keep this

Give embeds a title and fallback, restrict permissions, reserve space, and treat every third-party origin as a separate trust boundary.