Add tagfilter option

Author: wooorm

index.d.ts

@@ -18,4 +18,26 @@ export interface Options {
    * be hast again and will be handled.
    */
   passThrough?: Array<string> | null | undefined
+
+  /**
+   * Whether to disallow irregular tags in `raw` nodes according to GFM
+   * tagfilter
+   * (default: `false`).
+   *
+   * This affects the following tags,
+   * grouped by their kind:
+   *
+   * * `RAWTEXT`: `iframe`, `noembed`, `noframes`, `style`, `xmp`
+   * * `RCDATA`: `textarea`, `title`
+   * * `SCRIPT_DATA`: `script`
+   * * `PLAINTEXT`: `plaintext`
+   *
+   * When you know that you do not want authors to write these tags,
+   * you can enable this option to prevent their use from running amok.
+   *
+   * See:
+   * [*Disallowed Raw HTML* in
+   * `cmark-gfm`](https://github.github.com/gfm/#disallowed-raw-html-extension-).
+   */
+  tagfilter?: boolean | null | undefined
 }

lib/index.js

@@ -39,6 +39,9 @@ import {visit} from 'unist-util-visit'
 import {webNamespaces} from 'web-namespaces'
 import {zwitch} from 'zwitch'
 
+const gfmTagfilterExpression =
+  /<(\/?)(iframe|noembed|noframes|plaintext|script|style|textarea|title|xmp)(?=[\t\n\f\r />])/gi
+
 // Node types associated with MDX.
 // <https://github.com/mdx-js/mdx/blob/8a56312/packages/mdx/lib/node-types.js>
 const knownMdxNames = new Set([
@@ -325,7 +328,13 @@ function handleRaw(node, state) {
 
   // Now pass `node.value`.
   setPoint(state, pointStart(node))
-  state.parser.tokenizer.write(node.value, false)
+
+  state.parser.tokenizer.write(
+    state.options.tagfilter
+      ? node.value.replace(gfmTagfilterExpression, '&lt;$1$2')
+      : node.value,
+    false
+  )
   // @ts-expect-error: private.
   state.parser.tokenizer._runParsingLoop()
 
@@ -596,10 +605,11 @@ function endTag(node, state) {
     tagName === state.parser.tokenizer.lastStartTagName &&
     // `<textarea>` and `<title>`
     (state.parser.tokenizer.state === TokenizerMode.RCDATA ||
-      // `<iframe>`, `<noembed>`, `<style>`, `<xmp>`
+      // `<iframe>`, `<noembed>`, `<noframes>`, `<style>`, `<xmp>`
       state.parser.tokenizer.state === TokenizerMode.RAWTEXT ||
       // `<script>`
       state.parser.tokenizer.state === TokenizerMode.SCRIPT_DATA)
+    // Note: `<plaintext>` not needed, as it’s the last element.
   ) {
     state.parser.tokenizer.state = TokenizerMode.DATA
   }

package.json

@@ -115,6 +115,9 @@
         }
       }
     ],
-    "prettier": true
+    "prettier": true,
+    "rules": {
+      "unicorn/prefer-string-replace-all": "off"
+    }
   }
 }

readme.md

@@ -131,6 +131,24 @@ Configuration.
 
   If the passed through nodes have children, those children are expected to
   be hast again and will be handled.
+* `tagfilter?` (`boolean | null | undefined`)
+
+  Whether to disallow irregular tags in `raw` nodes according to GFM
+  tagfilter
+  (default: `false`).
+
+  This affects the following tags,
+  grouped by their kind:
+  * `RAWTEXT`: `iframe`, `noembed`, `noframes`, `style`, `xmp`
+  * `RCDATA`: `textarea`, `title`
+  * `SCRIPT_DATA`: `script`
+  * `PLAINTEXT`: `plaintext`
+  When you know that you do not want authors to write these tags,
+  you can enable this option to prevent their use from running amok.
+
+  See:
+  [*Disallowed Raw HTML* in
+  `cmark-gfm`](https://github.github.com/gfm/#disallowed-raw-html-extension-).
 
 ### `raw(tree, options)`
 

test.js

@@ -687,6 +687,81 @@ test('raw', async function (t) {
       }
     )
   })
+
+  await t.test('tagfilter', async function (t) {
+    await t.test('should filter tags', async function () {
+      const result = raw(
+        {
+          type: 'root',
+          children: [
+            h('p', [{type: 'raw', value: '<strong> <title> <style> <em>'}]),
+            {type: 'text', value: '\n'},
+            {
+              type: 'raw',
+              value:
+                '<blockquote>\n  <xmp> is disallowed.  <XMP> is also disallowed.\n</blockquote>'
+            }
+          ]
+        },
+        {tagfilter: true}
+      )
+
+      assert.deepEqual(result, {
+        type: 'root',
+        children: [
+          {
+            type: 'element',
+            tagName: 'p',
+            properties: {},
+            children: [
+              {
+                type: 'element',
+                tagName: 'strong',
+                properties: {},
+                children: [
+                  {type: 'text', value: ' <title> <style> '},
+                  {
+                    type: 'element',
+                    tagName: 'em',
+                    properties: {},
+                    children: []
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            type: 'element',
+            tagName: 'strong',
+            properties: {},
+            children: [
+              {
+                type: 'element',
+                tagName: 'em',
+                properties: {},
+                children: [
+                  {type: 'text', value: '\n'},
+                  {
+                    type: 'element',
+                    tagName: 'blockquote',
+                    properties: {},
+                    children: [
+                      {
+                        type: 'text',
+                        value:
+                          '\n  <xmp> is disallowed.  <XMP> is also disallowed.\n'
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ],
+        data: {quirksMode: false}
+      })
+    })
+  })
 })
 
 test('integration', async function (t) {