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.

Failing

import React from "react";
 
function function Example(): React.JSX.ElementExample() {
  return <JSX.IntrinsicElements.iframe: React.DetailedHTMLProps<React.IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>iframe React.IframeHTMLAttributes<HTMLIFrameElement>.src?: string | undefinedsrc="https://example.com" />;
  //     - Missing 'sandbox' attribute on iframe component.
}

import React from "react";
 
function Example() {
  return React.createElement("iframe", { src: "https://example.com" });
  //     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  //     - Missing 'sandbox' attribute on iframe component.
}

Passing

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

import React from "react";
 
function Example() {
  return React.createElement("iframe", {
    src: "https://example.com",
    sandbox: "allow-popups",
  });
}