We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.

This lesson's interactive features are locked, please to keep using them

Sandboxing iframe Elements

An iframe embeds another webpage inside the current page. Third-party widgets, ads, maps, and videos often use iframes, but an unrestricted iframe can give the embedded page waaaay more browser capabilities than it actually needs.

The HTML sandbox attribute removes capabilities from one embedded document:

<iframe src="/shipping-widget.html" sandbox="allow-scripts"></iframe>

If the sandbox is empty, all restrictions are applied by default. Alternatively, you can grant back specific capabilities with space-separated keywords, for example:

  • allow-scripts lets the framed page run JavaScript.
  • allow-same-origin preserves the framed page's real origin, which may restore access to its cookies and local storage. If the frame and parent are same-origin, it also lets their scripts access each other's documents.
  • allow-forms lets the framed page submit forms.
  • allow-popups lets the framed page open new windows.

You can see the full list of sandbox tokens on MDN.

As always, follow the principle of least privilege: only grant the permissions that the embedded page actually needs!

Don't combine allow-scripts and allow-same-origin for same-origin untrusted content. Together, those permissions can let the embedded document remove its own sandbox attribute, making the sandbox useless!

Assignment

The Acorn Express frame on Bearly Secure's checkout page can access more than its estimator needs. Allow scripts while blocking same-origin access.

With Bearly Secure still running, run and submit the CLI tests from the project root.