HTML Safe Links, Embeds, and Content Security Policy
Limit what linked and embedded content can do with rel, sandbox, and a content security policy.
On this page
The concept
Links and embeds bring other people's code and pages into yours. A link that opens a new tab with target="_blank" should include rel="noopener noreferrer" so the new page cannot control the opener through window.opener and does not receive your page's address as the referrer. An iframe loads another page inside yours. The sandbox attribute removes its powers by default, and you add back only what it needs. A Content-Security-Policy, sent as a header or a meta tag, tells the browser where scripts, images, and other resources may come from, which limits the damage of an injected script. Password fields use type=password with the right autocomplete value so that password managers can work.
Code example
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' https:">
<a href="https://example.com" target="_blank" rel="noopener noreferrer">External site</a>
<iframe src="https://example.com/widget" title="Widget"
sandbox="allow-scripts" referrerpolicy="no-referrer"></iframe>
<input type="password" name="password" autocomplete="current-password">Follow the code
Open the walkthrough to inspect the example one step at a time.
Show guided walkthrough
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' https:"><a href="https://example.com" target="_blank" rel="noopener noreferrer">External site</a><iframe src="https://example.com/widget" title="Widget" sandbox="allow-scripts" referrerpolicy="no-referrer"></iframe><input type="password" name="password" autocomplete="current-password">Follow the example
Start to inspect the source, values, and output. These prepared steps explain the published sample; grouped loop steps describe multiple iterations.
View the complete dry-run table
| Step / line | What happens | State after step | Output so far |
|---|---|---|---|
| By default only resources from the same origin may load; images may also come from HTTPS sources. Inline and third-party scripts are blocked. | — | — | |
| noopener cuts the link between the new tab and this page, and noreferrer hides the referring address. | — | — | |
| An embedded page runs in its own frame. The title names it for screen readers. | — | — | |
| sandbox blocks forms, popups, and same-origin access except what is allowed. Here only scripts may run. | — | — | |
| A password field hides the typed characters and lets password managers fill it. | — | — |
Behind the scenes
How HTML processes this code
The browser parses HTML into a document tree and renders its elements. HTML does not execute as a sequence of program statements.