Ban dangerouslySetInnerHTML via custom lint rule (#61968)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: heiskr

eslint.config.ts

@@ -103,6 +103,10 @@ export default [
       // Custom rules
       'custom-rules/use-custom-logger': 'error',
 
+      // Disallow dangerouslySetInnerHTML; render trusted HTML via RenderedHTML /
+      // renderHTMLString or a hast tree instead (github/docs-engineering#6619).
+      'custom-rules/no-dangerously-set-inner-html': 'error',
+
       // Prevent direct res.redirect() usage — use res.safeRedirect() instead
       // to avoid open redirect vulnerabilities via protocol-relative URLs.
       'no-restricted-syntax': [

src/eslint-rules/index.js

@@ -2,5 +2,6 @@
 module.exports = {
   rules: {
     "use-custom-logger": require("./use-custom-logger/use-custom-logger"),
+    "no-dangerously-set-inner-html": require("./no-dangerously-set-inner-html/no-dangerously-set-inner-html"),
   },
 };

src/eslint-rules/no-dangerously-set-inner-html/no-dangerously-set-inner-html.js

@@ -0,0 +1,62 @@
+module.exports = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Disallow dangerouslySetInnerHTML; render trusted HTML with RenderedHTML/renderHTMLString or a hast tree instead",
+      category: "Possible Errors",
+      recommended: false,
+    },
+    schema: [], // no options
+    messages: {
+      noDanger:
+        "Do not use dangerouslySetInnerHTML. Render trusted HTML with the RenderedHTML component (or renderHTMLString), or pass a hast tree to MarkdownContent. See github/docs-engineering#6619.",
+    },
+  },
+  create(context) {
+    return {
+      // Flag the JSX attribute form: <div dangerouslySetInnerHTML={...} />
+      JSXAttribute(node) {
+        if (node.name && node.name.name === "dangerouslySetInnerHTML") {
+          context.report({ node, messageId: "noDanger" });
+        }
+      },
+      // Flag the object-property form used when spreading props, e.g.
+      // { dangerouslySetInnerHTML: { __html: html } }. Only object *expressions*
+      // (constructing props) are unsafe; skip object *patterns* (destructuring
+      // like `const { dangerouslySetInnerHTML, ...rest } = props`), which strip
+      // the prop and are safe.
+      Property(node) {
+        if (!node.parent || node.parent.type !== "ObjectExpression") return;
+        const key = node.key;
+        if (
+          key &&
+          ((key.type === "Identifier" &&
+            key.name === "dangerouslySetInnerHTML") ||
+            (key.type === "Literal" && key.value === "dangerouslySetInnerHTML"))
+        ) {
+          context.report({ node, messageId: "noDanger" });
+        }
+      },
+      // Flag the assignment form, including the computed string-key bypass:
+      //   props.dangerouslySetInnerHTML = { __html: html }
+      //   props['dangerouslySetInnerHTML'] = { __html: html }
+      AssignmentExpression(node) {
+        const left = node.left;
+        if (!left || left.type !== "MemberExpression") return;
+        const prop = left.property;
+        if (!prop) return;
+        const isDanger =
+          (!left.computed &&
+            prop.type === "Identifier" &&
+            prop.name === "dangerouslySetInnerHTML") ||
+          (left.computed &&
+            prop.type === "Literal" &&
+            prop.value === "dangerouslySetInnerHTML");
+        if (isDanger) {
+          context.report({ node, messageId: "noDanger" });
+        }
+      },
+    };
+  },
+};

src/eslint-rules/no-dangerously-set-inner-html/tests/no-dangerously-set-inner-html.ts

@@ -0,0 +1,76 @@
+import { describe, it } from 'vitest'
+import { RuleTester, Rule } from 'eslint'
+import ruleModule from '../no-dangerously-set-inner-html'
+
+const rule = ruleModule as Rule.RuleModule
+
+const ruleTester = new RuleTester({
+  languageOptions: {
+    ecmaVersion: 2022,
+    sourceType: 'module',
+    parserOptions: {
+      ecmaFeatures: { jsx: true },
+    },
+  },
+})
+
+describe('no-dangerously-set-inner-html', () => {
+  it('allows code that does not use dangerouslySetInnerHTML', () => {
+    ruleTester.run('no-dangerously-set-inner-html', rule, {
+      valid: [
+        { code: `const el = <RenderedHTML as="div" html={html} />` },
+        { code: `const el = <MarkdownContent hast={hast} />` },
+        { code: `const props = { className: 'x', children: nodes }` },
+        // Destructuring that strips the prop is safe and must not be flagged.
+        { code: `const { dangerouslySetInnerHTML, ...safeProps } = props` },
+      ],
+      invalid: [],
+    })
+  })
+
+  it('flags the JSX attribute form', () => {
+    ruleTester.run('no-dangerously-set-inner-html', rule, {
+      valid: [],
+      invalid: [
+        {
+          code: `const el = <div dangerouslySetInnerHTML={{ __html: html }} />`,
+          errors: [{ messageId: 'noDanger' }],
+        },
+      ],
+    })
+  })
+
+  it('flags the object-property form used when spreading props', () => {
+    ruleTester.run('no-dangerously-set-inner-html', rule, {
+      valid: [],
+      invalid: [
+        {
+          code: `const childProps = { dangerouslySetInnerHTML: { __html: children } }`,
+          errors: [{ messageId: 'noDanger' }],
+        },
+        // String-literal key form must also be flagged.
+        {
+          code: `const childProps = { 'dangerouslySetInnerHTML': { __html: children } }`,
+          errors: [{ messageId: 'noDanger' }],
+        },
+      ],
+    })
+  })
+
+  it('flags the assignment form', () => {
+    ruleTester.run('no-dangerously-set-inner-html', rule, {
+      valid: [],
+      invalid: [
+        {
+          code: `props.dangerouslySetInnerHTML = { __html: html }`,
+          errors: [{ messageId: 'noDanger' }],
+        },
+        // Computed string-key assignment is a trivial bypass and must be flagged.
+        {
+          code: `props['dangerouslySetInnerHTML'] = { __html: html }`,
+          errors: [{ messageId: 'noDanger' }],
+        },
+      ],
+    })
+  })
+})

src/pages/_document.tsx

@@ -17,6 +17,10 @@ export default class MyDocument extends Document {
         data-dark-theme={defaultCSSTheme.darkTheme}
       >
         <Head>
+          {/* Inline color-mode script must run before paint to avoid a flash; it
+              injects executable JS (not content HTML), so RenderedHTML/hast do
+              not apply here. */}
+          {/* eslint-disable-next-line custom-rules/no-dangerously-set-inner-html */}
           <script dangerouslySetInnerHTML={{ __html: colorModeScript }} />
         </Head>
         <body>