Rules
react/no-missing-iframe-sandbox

react/no-missing-iframe-sandbox

Rule category

Security.

What it does

Enforces explicit sandbox attribute for iframe elements.

Why is this bad?

The sandbox attribute enables an extra set of restrictions for the content in the iframe. Using sandbox attribute is considered a good security practice.

Examples

This rule checks all React iframe elements and verifies that there is sandbox attribute and that it's value is valid.

❌ Incorrect

import React from "react";
 
const Component = () => {
  return <iframe src="https://example.com" />;
};
import React from "react";
 
const Component = () => {
  return React.createElement("iframe", { src: "https://example.com" });
};

✅ Correct

import React from "react";
 
const Component = () => {
  return <iframe src="https://example.com" sandbox="allow-popups" />;
};
import React from "react";
 
const Component = () => {
  return React.createElement("iframe", {
    src: "https://example.com",
    sandbox: "allow-popups",
  });
};

When not to use

If you don't want to enforce sandbox attribute on iframe elements.

Further Reading

-MDN: Element/iframe#attr-sandbox (opens in a new tab)