feat(dom-to-react): skip and do not parse <script> content

remarkablemark · remarkablemark · commit 1fb5ee264199 · 2019-06-02T22:30:35.000-04:00
The "script" node is skipped since `react-dom` was never really
rendering the contents.

Update tests.
diff --git a/lib/dom-to-react.js b/lib/dom-to-react.js
@@ -56,11 +56,11 @@ function domToReact(nodes, options) {
 
     children = null;
 
-    // node type for <script> is "script"
     // node type for <style> is "style"
-    if (node.type === 'script' || node.type === 'style') {
-      // prevent text in <script> or <style> from being escaped
-      // https://facebook.github.io/react/tips/dangerously-set-inner-html.html
+    // skip node type "script" as react-dom does not render the contents
+    if (node.type === 'style') {
+      // prevent text in <style> from being escaped
+      // https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
       if (node.children[0]) {
         props.dangerouslySetInnerHTML = {
           __html: node.children[0].data
diff --git a/test/dom-to-react.js b/test/dom-to-react.js
@@ -56,23 +56,9 @@ describe('dom-to-react parser', () => {
     );
   });
 
-  it('does not escape <script> content', () => {
+  it('does not parse <script> content', () => {
     const html = data.html.script;
-    const reactElement = domToReact(htmlToDOM(html));
-
-    assert(React.isValidElement(reactElement));
-    assert.deepEqual(
-      reactElement,
-      React.createElement(
-        'script',
-        {
-          dangerouslySetInnerHTML: {
-            __html: 'alert(1 < 2);'
-          }
-        },
-        null
-      )
-    );
+    assert.deepEqual(domToReact(htmlToDOM(html)), []);
   });
 
   it('does not escape <style> content', () => {
diff --git a/test/helpers/data.json b/test/helpers/data.json
@@ -4,7 +4,7 @@
     "multiple": "<p>foo</p><p>bar</p>",
     "nested": "<div><p>foo <em>bar</em></p></div>",
     "attributes": "<hr id=\"foo\" class=\"bar baz\" style=\"background: #fff; text-align: center;\" data-foo=\"bar\" />",
-    "complex": "<html><head><meta charSet=\"utf-8\"/><title>Title</title><link rel=\"stylesheet\" href=\"style.css\"/></head><body><header id=\"header\">Header</header><h1 style=\"color:#000;font-size:42px\">Heading</h1><hr/><p>Paragraph</p><img src=\"image.jpg\"/><div class=\"class1 class2\">Some <em>text</em>.</div><script>alert();</script></body></html>",
+    "complex": "<html><head><meta charSet=\"utf-8\"/><title>Title</title><link rel=\"stylesheet\" href=\"style.css\"/></head><body><header id=\"header\">Header</header><h1 style=\"color:#000;font-size:42px\">Heading</h1><hr/><p>Paragraph</p><img src=\"image.jpg\"/><div class=\"class1 class2\">Some <em>text</em>.</div></body></html>",
     "textarea": "<textarea>foo</textarea>",
     "script": "<script>alert(1 < 2);</script>",
     "style": "<style>body > .foo { color: #f00; }</style>",
diff --git a/test/html-to-react.js b/test/html-to-react.js
@@ -45,12 +45,6 @@ describe('html-to-react', () => {
       assert.equal(render(reactElement), html);
     });
 
-    it('converts empty <script> to React', () => {
-      const html = '<script></script>';
-      const reactElement = Parser(html);
-      assert.equal(render(reactElement), html);
-    });
-
     it('converts empty <style> to React', () => {
       const html = '<style></style>';
       const reactElement = Parser(html);
