Embed a third-party calculator without giving it any more power than it needs.
What to build
A safe, accessible iframe.
Requirements
- An
iframewithsrc="https://example.org/calculator". - A
titlecontainingcalculator. width="400"andheight="300".loading="lazy".- A
sandboxattribute that allows scripts and nothing else.
Constraints
Do not include allow-same-origin, allow-forms or allow-top-navigation.
Example
sandbox="allow-scripts" lets the frame run its code, but it still cannot redirect your page.
Why it works
The frame gets exactly the one ability it needs. If the other site is ever compromised, it can do far less damage to your visitors.
Hints
Hint 1
sandbox accepts a list of abilities, separated by spaces.
Hint 2
Frames lower down the page can wait until needed.
Hint 3
Every frame needs a title, and the title should describe its content.
Solution
Show one correct solution (try it yourself first)
<iframe src="https://example.org/calculator" title="Loan calculator" width="400" height="300" loading="lazy" sandbox="allow-scripts"></iframe>