no-unsafe-iframe-sandbox

Rule category

Security.

What it does

Enforces sandbox attribute for iframe elements is not set to unsafe combinations.

Why is this bad?

If sandbox attribute is not set, the iframe content can have abilities that are not intended to be allowed.

Examples

This rule reports cases where attribute contains allow-scripts and allow-same-origin at the same time as this combination allows the embedded document to remove the sandbox attribute and bypass the restrictions.

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"
      React.IframeHTMLAttributes<HTMLIFrameElement>.sandbox?: string | undefinedsandbox="allow-scripts allow-same-origin"
    />
  );
}

import React from "react";
 
function function Example(): React.ReactElement<{
    src: string;
    sandbox: string;
}, string | React.JSXElementConstructor<any>>
Example() {
  return React.function React.createElement<{
    src: string;
    sandbox: string;
}>(type: string | React.FunctionComponent<{
    src: string;
    sandbox: string;
}> | React.ComponentClass<{
    src: string;
    sandbox: string;
}, any>, props?: (React.Attributes & {
    src: string;
    sandbox: string;
}) | ... 1 more ... | undefined, ...children: React.ReactNode[]): React.ReactElement<{
    src: string;
    sandbox: string;
}> (+6 overloads)
createElement("iframe", {
    src: stringsrc: "https://example.com",
    // @warn: Unsafe sandbox attribute
    sandbox: stringsandbox: "allow-scripts allow-same-origin",
  });
}

Passing

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" React.IframeHTMLAttributes<HTMLIFrameElement>.sandbox?: string | undefinedsandbox="allow-popups" />;
}

import React from "react";
 
function function Example(): React.ReactElement<{
    src: string;
    sandbox: string;
}, string | React.JSXElementConstructor<any>>
Example() {
  return React.function React.createElement<{
    src: string;
    sandbox: string;
}>(type: string | React.FunctionComponent<{
    src: string;
    sandbox: string;
}> | React.ComponentClass<{
    src: string;
    sandbox: string;
}, any>, props?: (React.Attributes & {
    src: string;
    sandbox: string;
}) | ... 1 more ... | undefined, ...children: React.ReactNode[]): React.ReactElement<{
    src: string;
    sandbox: string;
}> (+6 overloads)
createElement("iframe", {
    src: stringsrc: "https://example.com",
    sandbox: stringsandbox: "allow-popups",
  });
}