iframe element is missing a sandbox attribute
13 return (
14 <div className="video-container">
15 <div className="video">
16 <iframe17 className="video-player"18 src={embedUrl}19 frameBorder="0"20 allow="autoplay; encrypted-media"21 allowFullScreen22 title="video"23 />24 </div>
25 </div>
26 );
Description
The sandbox attribute enables an extra set of restrictions for the content in the iframe.
When the sandbox attribute is present, it will:
- treat the content as being from a unique origin
- block form submission
- block script execution
- disable APIs
- prevent links from targeting other browsing contexts
- prevent content from using plugins (through
<embed>
,<object>
,<applet>
etc) - prevent the content to navigate its top-level browsing context
- block automatically triggered features (such as automatically playing a video or automatically focusing a form control)
The value of the sandbox attribute can either be just sandbox (allow-all), after which restrictions are applied explicitly, or deny-all, listing a space-separated list of pre-defined values that will remove the restrictions explicitly.
Bad Practice
<iframe></iframe>
<iframe/>
<iframe sandbox="__unknown__"></iframe>
<iframe sandbox="allow-popups allow-popups-to-escape-sandbox allow-pointer-lock allow-same-origin allow-top-navigation"></iframe>
Recommended
<div sandbox="__unknown__" />;
<iframe sandbox="" />;