no-unsafe-iframe-sandbox
Enforces that the 'sandbox' attribute for 'iframe' elements is not set to unsafe combinations.
Full Name in eslint-plugin-react-dom
react-dom/no-unsafe-iframe-sandboxFull Name in @eslint-react/eslint-plugin
@eslint-react/dom-no-unsafe-iframe-sandboxPresets
strict
strict-typescript
strict-type-checked
Rule Details
This rule reports cases where the 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.
Examples
Sandboxing third-party content in an iframe
function MyComponent() {
return (
// Problem: allow-scripts together with allow-same-origin lets the embedded
// document escape the sandbox by removing the attribute via JavaScript
<iframe
src="https://eslint-react.xyz"
sandbox="allow-scripts allow-same-origin"
/>
);
}function MyComponent() {
// Recommended: Use a safer sandbox value that does not combine both flags
return <iframe src="https://eslint-react.xyz" sandbox="allow-popups" />;
}Restrictive sandboxing for untrusted content
When embedding untrusted third-party content, use a restrictive sandbox attribute that limits the embedded document's capabilities without allowing script execution combined with same-origin access.
// Recommended: Use restrictive sandbox values for untrusted content
function MyComponent() {
return (
<iframe
src="https://example.com"
sandbox="allow-popups allow-popups-to-escape-sandbox"
/>
);
}Versions
Resources
Further Reading
See Also
react-dom/no-missing-iframe-sandbox
Enforces an explicitsandboxattribute foriframeelements.react-dom/no-unsafe-target-blank
Disallowstarget="_blank"withoutrel="noreferrer noopener".