useIframeSandbox (JavaScript)

Summary

Rule available since: v2.4.12
Diagnostic Category: lint/nursery/useIframeSandbox
This rule doesn’t have a fix.
The default severity of this rule is warning.
Sources:
- Inspired from react-dom/no-missing-iframe-sandbox
- Same as @eslint-react/dom-no-missing-iframe-sandbox

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useIframeSandbox": "error"
6
      }
7
    }
8
  }
9
}

Description

Enforce the ‘sandbox’ attribute for ‘iframe’ elements.

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

See the Mozilla docs for details.

Examples

Invalid

1
function MyComponent() {
2
  return <iframe src="https://example.com" />;
3
}

code-block.jsx:2:10 lint/nursery/useIframeSandbox ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Iframe doesn't have the sandbox attribute.
  
    1 │ function MyComponent() {
  > 2 │   return <iframe src="https://example.com" />;
      │          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    3 │ }
    4 │ 
  
  ℹ The sandbox attribute enables an extra set of restrictions for the content in the iframe, protecting against malicious scripts and other security threats.
  
  ℹ Provide a sandbox attribute when using iframe elements.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
function MyComponent() {
2
  return <iframe src="https://example.com" sandbox="allow-popups" />;
3
}