Prevent <script> from being escaped by React

remarkablemark · remarkablemark · commit 97ce98a6356c · 2016-08-19T18:51:03.000-04:00
Use `dangerouslySetInnerHTML` to prevent the text in the script
tag from being escaped by React.

Create test to check logic in DOM to React parser.
diff --git a/lib/dom-to-react.js b/lib/dom-to-react.js
@@ -26,7 +26,15 @@ function domToReact(nodes) {
 
         children = null;
 
-        if (node.type === 'tag') {
+        // node type for script is "script" not "tag"
+        if (node.name === 'script' && node.children[0]) {
+            // prevent text in script tag from being escaped
+            // https://facebook.github.io/react/tips/dangerously-set-inner-html.html
+            node.attribs.dangerouslySetInnerHTML = {
+                __html: node.children[0].data
+            };
+
+        } else if (node.type === 'tag') {
             // setting textarea value in children is an antipattern in React
             // https://facebook.github.io/react/docs/forms.html#why-textarea-value
             if (node.name === 'textarea' && node.children[0]) {
@@ -36,21 +44,21 @@ function domToReact(nodes) {
                 // continue recursion of creating React elements
                 children = domToReact(node.children);
             }
+        }
 
-            // specify a `key` prop if returning an array
-            // https://fb.me/react-warning-keys
-            if (len > 1) {
-                node.attribs.key = i;
-            }
-
-            result.push(
-                React.createElement(
-                    node.name,
-                    node.attribs,
-                    children
-                )
-            );
+        // specify a `key` prop if returning an array
+        // https://fb.me/react-warning-keys
+        if (len > 1) {
+            node.attribs.key = i;
         }
+
+        result.push(
+            React.createElement(
+                node.name,
+                node.attribs,
+                children
+            )
+        );
     }
 
     if (result.length === 1) {
diff --git a/test/data.json b/test/data.json
@@ -3,6 +3,7 @@
     "single": "<p>foo</p>",
     "multiple": "<p>foo</p><p>bar</p>",
     "complex": "<html><head><title>Title</title></head><body><header id=\"header\">Header</header><h1>Heading</h1><p>Paragraph</p><div class=\"class1 class2\">Some <em>text</em>.</div><script>alert();</script></body></html>",
-    "textarea": "<textarea>foo</textarea>"
+    "textarea": "<textarea>foo</textarea>",
+    "script": "<script>alert(1 < 2);</script>"
   }
 }
diff --git a/test/dom-to-react.js b/test/dom-to-react.js
@@ -41,7 +41,7 @@ describe('dom-to-react parser', function() {
     });
 
     // https://facebook.github.io/react/docs/forms.html#why-textarea-value
-    it('converts textarea correctly', function() {
+    it('converts <textarea> correctly', function() {
         var html = data.html.textarea;
         var reactElement = domToReact(htmlToDOM(html));
         assert(React.isValidElement(reactElement));
@@ -53,4 +53,18 @@ describe('dom-to-react parser', function() {
         );
     });
 
+    it('converts <script> correctly', function() {
+        var html = data.html.script;
+        var reactElement = domToReact(htmlToDOM(html));
+        assert(React.isValidElement(reactElement));
+        assert.deepEqual(
+            reactElement,
+            React.createElement('script', {
+                dangerouslySetInnerHTML: {
+                    __html: 'alert(1 < 2);'
+                }
+            }, null)
+        );
+    });
+
 });

Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,7 @@`
`3`	`3`	`"single": "<p>foo</p>",`
`4`	`4`	`"multiple": "<p>foo</p><p>bar</p>",`
`5`	`5`	`"complex": "<html><head><title>Title</title></head><body><header id=\"header\">Header</header><h1>Heading</h1><p>Paragraph</p><div class=\"class1 class2\">Some <em>text</em>.</div><script>alert();</script></body></html>",`
`6`		`- "textarea": "<textarea>foo</textarea>"`
	`6`	`+ "textarea": "<textarea>foo</textarea>",`
	`7`	`+ "script": "<script>alert(1 < 2);</script>"`
`7`	`8`	`}`
`8`	`9`	`}`