fix(#38): edge case with script parsing

natemoo-re · Nov 26, 2022 · c7a1ef6 · c7a1ef6
1 parent a681814
commit c7a1ef6
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 1 deletion.
diff --git a/.changeset/unlucky-gifts-mate.md b/.changeset/unlucky-gifts-mate.md
@@ -0,0 +1,5 @@
+---
+"ultrahtml": patch
+---
+
+Fix edge case with `<script>` parsing
diff --git a/src/index.ts b/src/index.ts
@@ -161,6 +161,9 @@ export function parse(input: string | ReturnType<typeof html>): any {
       continue;
     } else if (bStart === "<!--") {
       i = DOM_PARSER_RE.lastIndex - token[0].length;
+      if (RAW_TAGS.has(parent.name)) {
+        continue;
+      }
       tag = {
         type: COMMENT_NODE,
         value: bText,
@@ -200,6 +203,9 @@ export function parse(input: string | ReturnType<typeof html>): any {
       tag.parent.children.push(tag);
     } else if (token[1] !== "/") {
       commitTextNode();
+      if (RAW_TAGS.has(parent.name)) {
+        continue;
+      }
       tag = {
         type: ELEMENT_NODE,
         name: token[2] + "",

diff --git a/test/script.test.ts b/test/script.test.ts
@@ -1,4 +1,4 @@
-import { parse, render } from "../src";
+import { parse, render, walk, ELEMENT_NODE } from "../src";
 import { describe, expect, it, test } from "vitest";
 
 describe("script", () => {
@@ -12,6 +12,26 @@ describe("script", () => {
     const output = await render(parse(input));
     expect(output).toEqual(input);
   });
+  it("works with <script> in string", async () => {
+    const input = `<head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="/favicon-48x48.cbbd161b.png"/><link rel="apple-touch-icon" href="/apple-touch-icon.6803c6f0.png"/><meta name="theme-color" content="#ffffff"/><link rel="manifest" href="/manifest.56b1cedc.json"/><link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="MDN Web Docs"/><script>Array.prototype.flat&&Array.prototype.includes||document.write('<script src="https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.flat%2Ces6"><\/script>')</script><title>HTML Sanitizer API - Web APIs | MDN</title><link rel="alternate" title="HTML Sanitizer API" href="https://developer.mozilla.org/ja/docs/Web/API/HTML_Sanitizer_API" hreflang="ja"/><link rel="alternate" title="HTML Sanitizer API" href="https://developer.mozilla.org/en-US/docs/Web/API/HTML_Sanitizer_API" hreflang="en"/><meta name="robots" content="index, follow"><meta name="description" content="The HTML Sanitizer API allow developers to take untrusted strings of HTML and Document or DocumentFragment objects, and sanitize them for safe insertion into a document&apos;s DOM."/><meta property="og:url" content="https://developer.mozilla.org/en-US/docs/Web/API/HTML_Sanitizer_API"/><meta property="og:title" content="HTML Sanitizer API - Web APIs | MDN"/><meta property="og:locale" content="en-US"/><meta property="og:description" content="The HTML Sanitizer API allow developers to take untrusted strings of HTML and Document or DocumentFragment objects, and sanitize them for safe insertion into a document&apos;s DOM."/><meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.cd6c4a5a.png"/><meta property="twitter:card" content="summary_large_image"/><link rel="canonical" href="https://developer.mozilla.org/en-US/docs/Web/API/HTML_Sanitizer_API"/><style media="print">.breadcrumbs-container,.document-toc-container,.language-menu,.on-github,.page-footer,.top-navigation-main,nav.sidebar,ul.prev-next{display:none!important}.main-page-content,.main-page-content pre{padding:2px}.main-page-content pre{border-left-width:2px}</style><script src="/static/js/ga.js" defer=""></script><script defer="defer" src="/static/js/main.bfba1cdc.js"></script><link href="/static/css/main.7fcd0907.css" rel="stylesheet">`
+    let meta = 0;
+    await walk(parse(input), async (node, parent) => {
+      if (node.type === ELEMENT_NODE && node.name === 'meta' && parent?.name === 'head') {
+        meta++;
+      }
+    })
+    expect(meta).toEqual(11);
+  })
+  it("works with </script> in live string", async () => {
+    const input = await fetch("https://developer.mozilla.org/en-US/docs/Web/API/HTML_Sanitizer_API").then(r => r.text());
+    let meta = 0;
+    await walk(parse(input), async (node, parent) => {
+      if (node.type === ELEMENT_NODE && node.name === 'meta' && parent?.name === 'head') {
+        meta++;
+      }
+    })
+    expect(meta).toEqual(11);
+  })
 });
 
 describe("style", () => {