iframes and embedded content

Model answer. An <iframe> embeds another HTML page inside yours, in its own separate browsing context: maps, videos, payment widgets, or documents.

<iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
        title="Campus tour video"
        width="560" height="315"
        loading="lazy"
        allow="encrypted-media; picture-in-picture; fullscreen"
        referrerpolicy="strict-origin-when-cross-origin"></iframe>

<iframe src="/user-preview.html" sandbox="allow-scripts" title="Preview of your profile"></iframe>

Concerns and the attributes that help:

• Security: embedded content can run scripts, show popups or navigate your page. `sandbox` (empty = maximum restriction) blocks scripts, forms, popups and top-level navigation; add back only what is needed (allow-scripts, allow-forms). Avoid combining allow-scripts with allow-same-origin for untrusted same-origin content, because the frame could then remove its own sandbox.
• Permissions: `allow` grants specific powers (camera, geolocation, fullscreen).
• Clickjacking (the reverse case): stop others from framing your site with the Content-Security-Policy: frame-ancestors header (or X-Frame-Options).
• Performance: each iframe loads a whole page; `loading="lazy"` defers off-screen frames. A click-to-load facade is even lighter for videos.
• Accessibility: a `title` describes the frame for screen-reader users.