From 355d97a94db6363ba2084eff87ce5d7db2b635e6 Mon Sep 17 00:00:00 2001
From: Ali Spittel <ali07cat07@gmail.com>
Date: Wed, 20 Feb 2019 13:08:46 -0500
Subject: [PATCH] add sanitization to github on chat (#1834)

* add sanitization to github on chat

* formatting
---
 app/javascript/chat/content.jsx    | 109 ++++++++++++++----------
 app/javascript/chat/githubRepo.jsx | 129 ++++++++++++++---------------
 2 files changed, 130 insertions(+), 108 deletions(-)

diff --git a/app/javascript/chat/content.jsx b/app/javascript/chat/content.jsx
index a7dedafeb..c4e977cc8 100644
--- a/app/javascript/chat/content.jsx
+++ b/app/javascript/chat/content.jsx
@@ -12,60 +12,83 @@ export default class Content extends Component {
     activeChannelId: PropTypes.number,
     pusherKey: PropTypes.string,
   };
+
   render() {
+    console.log(this.props);
     if (!this.props.resource) {
-      return ""
-    } else {
+      return '';
+    } 
       return (
         <div
-          className="activechatchannel__activecontent" id="chat_activecontent"
+          className="activechatchannel__activecontent"
+          id="chat_activecontent"
           onClick={this.props.onTriggerContent}
-          >
+        >
           <button
-            class="activechatchannel__activecontentexitbutton"
+            className="activechatchannel__activecontentexitbutton"
             data-content="exit"
-            >×</button>
-            {display(this.props)}
+          >
+            ×
+          </button>
+          {display(this.props)}
         </div>
       );
-    }
+    
   }
 }
 
 function display(props) {
-  if (props.resource.type_of === "loading-user") {
-    return <div style={{height: "210px",
-                      width: "210px",
-                      margin:" 15px auto",
-                      display: "block",
-                      borderRadius: "500px",
-                      backgroundColor: "#f5f6f7"}}></div>
-  } else if (props.resource.type_of === "loading-user") {
-    return <div style={{height: "25px",
-                      width: "96%",
-                      margin:" 8px auto",
-                      display: "block",
-                      backgroundColor: "#f5f6f7"}}></div>
-  } else if (props.resource.type_of === "user") {
-    return <UserDetails user={props.resource} />
-  } else if (props.resource.type_of === "article") {
-    return <Article resource={props.resource}/>
-  } else if (props.resource.type_of === "github") {
-    return <GithubRepo
-              activeChannelId={props.activeChannelId}
-              pusherKey={props.pusherKey}
-              githubToken={props.githubToken}
-              resource={props.resource}
-            />
-  } else if (props.resource.type_of === "channel-details") {
-    return <ChannelDetails
-              channel={props.resource.channel}
-              activeChannelId={props.activeChannelId}
-            />
-  } else if (props.resource.type_of === "code_editor") {
-    return <CodeEditor
-              activeChannelId={props.activeChannelId}
-              pusherKey={props.pusherKey}
-            />
+  if (props.resource.type_of === 'loading-user') {
+    return (
+      <div
+        style={{
+          height: '210px',
+          width: '210px',
+          margin: ' 15px auto',
+          display: 'block',
+          borderRadius: '500px',
+          backgroundColor: '#f5f6f7',
+        }}
+      />
+    );
+  } if (props.resource.type_of === 'loading-user') {
+    return (
+      <div
+        style={{
+          height: '25px',
+          width: '96%',
+          margin: ' 8px auto',
+          display: 'block',
+          backgroundColor: '#f5f6f7',
+        }}
+      />
+    );
+  } if (props.resource.type_of === 'user') {
+    return <UserDetails user={props.resource} />;
+  } if (props.resource.type_of === 'article') {
+    return <Article resource={props.resource} />;
+  } if (props.resource.type_of === 'github') {
+    return (
+      <GithubRepo
+        activeChannelId={props.activeChannelId}
+        pusherKey={props.pusherKey}
+        githubToken={props.githubToken}
+        resource={props.resource}
+      />
+    );
+  } if (props.resource.type_of === 'channel-details') {
+    return (
+      <ChannelDetails
+        channel={props.resource.channel}
+        activeChannelId={props.activeChannelId}
+      />
+    );
+  } if (props.resource.type_of === 'code_editor') {
+    return (
+      <CodeEditor
+        activeChannelId={props.activeChannelId}
+        pusherKey={props.pusherKey}
+      />
+    );
   }
-}
\ No newline at end of file
+}
diff --git a/app/javascript/chat/githubRepo.jsx b/app/javascript/chat/githubRepo.jsx
index d25a0d871..013a9c697 100644
--- a/app/javascript/chat/githubRepo.jsx
+++ b/app/javascript/chat/githubRepo.jsx
@@ -22,14 +22,14 @@ export default class GithubRepo extends Component {
       getJSONContents(
         `https://api.github.com/repos/${
           this.props.resource.args
-        }/contents?access_token=${  this.state.token}`,
+        }/contents?access_token=${this.state.token}`,
         this.loadContent,
         this.loadFailure,
       );
       getJSONContents(
         `https://api.github.com/repos/${
           this.props.resource.args
-        }/readme?access_token=${  this.state.token}`,
+        }/readme?access_token=${this.state.token}`,
         this.loadContent,
         this.loadFailure,
       );
@@ -40,7 +40,7 @@ export default class GithubRepo extends Component {
   handleItemClick = e => {
     e.preventDefault();
     getJSONContents(
-      `${e.target.dataset.apiUrl}&access_token=${  this.state.token}`,
+      `${e.target.dataset.apiUrl}&access_token=${this.state.token}`,
       this.loadContent,
       this.loadFailure,
     );
@@ -102,7 +102,8 @@ export default class GithubRepo extends Component {
           </p>
         </div>
       );
-    } if (this.state.content) {
+    }
+    if (this.state.content) {
       return (
         <div className="activecontent__githubrepo">
           <div className="activecontent__githubrepoheader">
@@ -111,68 +112,66 @@ export default class GithubRepo extends Component {
           <pre>{this.state.content}</pre>
         </div>
       );
-    } 
-      const directories = this.state.directories.map(item => (
-        <div className="activecontent__githubrepofilerow">
-          <a
-            href={item.html_url}
-            data-api-url={item.url}
-            data-path={item.path}
-            onClick={this.handleItemClick}
-          >
-              📁 
-            {' '}
-            {item.name}
-          </a>
-        </div>
-        ));
-      const files = this.state.files.map(item => (
-        <div className="activecontent__githubrepofilerow">
-          <a
-            href={item.html_url}
-            data-api-url={item.url}
-            data-path={item.path}
-            onClick={this.handleItemClick}
-          >
-            {item.name}
-          </a>
-        </div>
-        ));
-      let readme = '';
-      if (this.state.readme) {
-        readme = (
-          <div
-            dangerouslySetInnerHTML={{ __html: marked(this.state.readme) }}
-          />
-        );
-      }
-      if (this.state.root) {
-        return (
-          <div className="activecontent__githubrepo">
-            <div className="activecontent__githubrepoheader">
-              <a href="/Users/benhalpern/dev/dev.to_core/app" />
-              {this.state.path}
-            </div>
-            <div className="activecontent__githubrepofiles">
-              {directories}
-              {files}
-            </div>
-            {readme}
+    }
+    const directories = this.state.directories.map(item => (
+      <div className="activecontent__githubrepofilerow">
+        <a
+          href={item.html_url}
+          data-api-url={item.url}
+          data-path={item.path}
+          onClick={this.handleItemClick}
+        >
+          📁 
+          {' '}
+          {item.name}
+        </a>
+      </div>
+    ));
+    const files = this.state.files.map(item => (
+      <div className="activecontent__githubrepofilerow">
+        <a
+          href={item.html_url}
+          data-api-url={item.url}
+          data-path={item.path}
+          onClick={this.handleItemClick}
+        >
+          {item.name}
+        </a>
+      </div>
+    ));
+    let readme = '';
+    if (this.state.readme) {
+      readme = (
+        <div
+          dangerouslySetInnerHTML={{
+            __html: marked(this.state.readme, { sanitize: true }),
+          }}
+        />
+      );
+    }
+    if (this.state.root) {
+      return (
+        <div className="activecontent__githubrepo">
+          <div className="activecontent__githubrepoheader">
+            <a href="/Users/benhalpern/dev/dev.to_core/app" />
+            {this.state.path}
           </div>
-        );
-      } 
-        return (
-          <div className="activecontent__githubrepo">
-            <div className="activecontent__githubrepoheader">
-              {this.state.path}
-            </div>
-            <div className="activecontent__githubrepofiles">
-              {directories}
-              {files}
-            </div>
+          <div className="activecontent__githubrepofiles">
+            {directories}
+            {files}
           </div>
-        );
-      
-    
+          {readme}
+        </div>
+      );
+    }
+    return (
+      <div className="activecontent__githubrepo">
+        <div className="activecontent__githubrepoheader">{this.state.path}</div>
+        <div className="activecontent__githubrepofiles">
+          {directories}
+          {files}
+        </div>
+      </div>
+    );
   }
 }