react/iframe-missing-sandbox

Require a valid sandbox attribute on iframe elements

Without sandbox, the page inside an iframe can run scripts, submit forms, open popups, and navigate your page away. sandbox="" turns all of that off, and each allow-* word turns one thing back on.

The rule reports:

  • an iframe that has no sandbox attribute
  • a word in sandbox that isn't a known permission, such as a typo
  • allow-scripts together with allow-same-origin. With both, a page from your own origin can remove the sandbox attribute from its own iframe.

It checks <iframe> and React.createElement("iframe", ...). It skips a value that isn't a string literal, such as sandbox={permissions}.

Configure#

Off by default. To turn it on:

bunfig.toml
[lint.rules]
"react/iframe-missing-sandbox" = "error" # or "warn"

Examples#

example.jsx3 problems
const map = <iframe src="https://maps.example.com" />;

const video = <iframe src="https://video.example.com" sandbox="allow-everything" />;

const widget = <iframe src="/widget" sandbox="allow-scripts allow-same-origin" />;
example.jsx1 problem
import React from "react";

const map = React.createElement("iframe", { src: "https://maps.example.com" });
example.jsxNo problems
const map = <iframe src="https://maps.example.com" sandbox="" />;

const video = <iframe src="https://video.example.com" sandbox="allow-scripts allow-popups" />;

const widget = <iframe src="/widget" sandbox={permissions} />;