Merge pull request facebook#4931 from bspaulding/safe-taint-docs

zpao · zpao · commit 7077c5ed9659 · 2015-09-22T11:04:48.000-07:00
Extracted "safe taint" in docs/homepage to align with best practice (cherry picked from commit 0656811)
diff --git a/docs/_js/examples/markdown.js b/docs/_js/examples/markdown.js
@@ -6,6 +6,9 @@ var MarkdownEditor = React.createClass({
   handleChange: function() {
     this.setState({value: React.findDOMNode(this.refs.textarea).value});
   },
+  rawMarkup: function() {
+    return { __html: marked(this.state.value, {sanitize: true}) };
+  },
   render: function() {
     return (
       <div className="MarkdownEditor">
@@ -17,9 +20,7 @@ var MarkdownEditor = React.createClass({
         <h3>Output</h3>
         <div
           className="content"
-          dangerouslySetInnerHTML={{
-            __html: marked(this.state.value, {sanitize: true})
-          }}
+          dangerouslySetInnerHTML={this.rawMarkup()}
         />
       </div>
     );
diff --git a/docs/docs/tutorial.md b/docs/docs/tutorial.md
@@ -257,14 +257,18 @@ That's React protecting you from an [XSS attack](https://en.wikipedia.org/wiki/C
 ```javascript{4,10}
 // tutorial7.js
 var Comment = React.createClass({
-  render: function() {
+  rawMarkup: function() {
     var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
+    return { __html: rawMarkup };
+  },
+
+  render: function() {
     return (
       <div className="comment">
         <h2 className="commentAuthor">
           {this.props.author}
         </h2>
-        <span dangerouslySetInnerHTML={{"{{"}}__html: rawMarkup}} />
+        <span dangerouslySetInnerHTML={this.rawMarkup()} />
       </div>
     );
   }
