Preserve comments and other block text element's structures

seek-oss · Jun 4, 2024 · ea6525c · ea6525c
1 parent 4d0db85
commit ea6525c
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 8 deletions.
diff --git a/packages/sku/entry/csp.js b/packages/sku/entry/csp.js
@@ -75,9 +75,7 @@ export default function createCSPHandler({
       console.error(`Invalid script passed to 'registerScript'\n${script}`);
     }
 
-    parse(script, { blockTextElements: { script: true } })
-      .querySelectorAll('script')
-      .forEach(processScriptNode);
+    parse(script).querySelectorAll('script').forEach(processScriptNode);
   };
 
   /**
@@ -113,7 +111,9 @@ export default function createCSPHandler({
    * @returns {string}
    */
   const handleHtml = (html) => {
-    const root = parse(html);
+    const root = parse(html, {
+      comment: true,
+    });
 
     if (!root) {
       throw new Error(

diff --git a/packages/sku/entry/csp.test.js b/packages/sku/entry/csp.test.js
@@ -24,10 +24,70 @@ describe('createCSPHandler', () => {
     );
     cspHandler.registerScript('<script>console.log("Hello, World!")</script>');
 
-    const html = /* html */ `<html><head></head><body>Welcome to my App!</body></html>`;
+    const html =
+      /* html */
+      `<html>
+        <!--
+          Hello
+          World!
+        -->
+        <head>
+          <script>
+            console.log("Hello, World!");
+            console.log("Hello, World!");
+          </script>
+          <noscript>
+            You have
+            Javascript disabled
+          </noscript>
+          <style>
+            div {
+              color: papayawhip;
+            }
+          </style>
+        </head>
+        <body>
+          <div>
+            Welcome to my App!
+          </div>
+          <pre>
+            Multi
+            Line
+            Text
+          </pre>
+      </html>`;
 
-    expect(cspHandler.handleHtml(html)).toMatchInlineSnapshot(
-      `"<html><head><meta http-equiv="Content-Security-Policy" content="script-src 'self' 'sha256-uCWFWr3Z6MtMWnxQ5Qyr6+zW+EGpZvdwyqLxlDbe/rE=' 'sha256-lLONtxmGZgnK0e52sTdx8mwK2vMdmln9LPZAbPGHAR0=';"></head><body>Welcome to my App!</body></html>"`,
-    );
+    expect(cspHandler.handleHtml(html)).toMatchInlineSnapshot(`
+      "<html>
+              <!--
+                Hello
+                World!
+              -->
+              <head><meta http-equiv="Content-Security-Policy" content="script-src 'self' 'sha256-uCWFWr3Z6MtMWnxQ5Qyr6+zW+EGpZvdwyqLxlDbe/rE=' 'sha256-lLONtxmGZgnK0e52sTdx8mwK2vMdmln9LPZAbPGHAR0=' 'sha256-IYf6lwpasx2aXpcaX33x4ihyqfUb7LQFFjpVwJyfoYk=';">
+                <script>
+                  console.log("Hello, World!");
+                  console.log("Hello, World!");
+                </script>
+                <noscript>
+                  You have
+                  Javascript disabled
+                </noscript>
+                <style>
+                  div {
+                    color: papayawhip;
+                  }
+                </style>
+              </head>
+              
+                <div>
+                  Welcome to my App!
+                </div>
+                <pre>
+                  Multi
+                  Line
+                  Text
+                </pre>
+            </html>"
+    `);
   });
 });