Sanitizing insights text on fe

santiment · Jul 12, 2022 · aaef4ff · aaef4ff
1 parent a1efd94
commit aaef4ff
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 30 deletions.
diff --git a/src/components/InsightText.svelte b/src/components/InsightText.svelte
@@ -7,6 +7,7 @@
 
   let node
 
+  $: sanitized = sanitize(text)
   $: node && hookImageEnlarger()
 
   function hookImageEnlarger() {
@@ -15,10 +16,20 @@
       img.onclick = enlargeImage
     })
   }
+
+  function sanitize(text) {
+    return text
+      .replace(/<\s*script/g, '&lt;script')
+      .replace(/="?javascript:/g, '')
+      .replace(
+        /(onafterprint|onbeforeprint|onbeforeunload|onerror|onhashchange|onload|onoffline|ononline|onpageshow|onresize|onunload|onblur|onchange|oncontextmenu|onfocus|oninput|oninvalid|onreset|onsearch|onselect|onsubmit|onkeydown|onkeypress|onkeyup|onclick|ondblclick|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|onwheel|onwheel|ondrag|ondragend|ondragenter|ondragleave|ondragover|ondragstart|ondrop|onscroll|oncopy|oncut|onpaste|ontoggle)=/g,
+        '_=',
+      )
+  }
 </script>
 
 <div class={className} bind:this={node}>
-  {@html text}
+  {@html sanitized}
 </div>
 
 <style lang="scss">

diff --git a/src/routes/read/[slug].svelte b/src/routes/read/[slug].svelte
@@ -1,6 +1,5 @@
 <script context="module">
   import { getIdFromSEOLink } from 'webkit/utils/url'
-  import { CommentsType } from 'webkit/api/comments'
   import { queryInsightSSR } from '@/api/insights'
   import { RELATED_PROJECT_FRAGMENT, queryPriceDataSSR } from '@/api/insights/project'
   import { redirectNonAuthor } from '@/flow/redirect'
@@ -41,7 +40,6 @@
 
 <script>
   import { getDateFormats } from 'webkit/utils/dates'
-  import Comments from 'webkit/ui/Comments/svelte'
   import ViewportObserver from 'webkit/ui/ViewportObserver.svelte'
   import { currentUser } from '@/stores/user'
   import { session } from '@/stores/session'
@@ -56,6 +54,7 @@
   import SuggestedInsights from './_SuggestedInsights.svelte'
   import MetaTags from './_MetaTags.svelte'
   import Paywall from './_Paywall.svelte'
+  import Comments from './_Comments.svelte'
 
   export let insight
   export let projectData
@@ -115,14 +114,7 @@
       <Epilogue {insight} {link} {isDraft} {isAuthor} {isFollowing} />
     </ViewportObserver>
 
-    <div id="comments">
-      <Comments
-        type={CommentsType.Insight}
-        commentsFor={insight}
-        currentUser={$currentUser}
-        titleClass="h4 c-waterloo"
-      />
-    </div>
+    <Comments {insight} />
   {/if}
 </div>
 
@@ -142,23 +134,4 @@
     margin-bottom: 20px;
     border-bottom: 1px solid var(--porcelain);
   }
-
-  #comments {
-    margin-top: 40px;
-  }
-
-  #comments :global(form) {
-    margin-bottom: 30px;
-  }
-
-  #comments :global(form button) {
-    height: 40px;
-    flex: 0 0 92px;
-    white-space: nowrap;
-  }
-
-  #comments :global(form > div) {
-    min-height: 40px;
-    padding: 9px 12px;
-  }
 </style>
diff --git a/src/routes/read/_Comments.svelte b/src/routes/read/_Comments.svelte
@@ -0,0 +1,39 @@
+<script>
+  import Comments from 'webkit/ui/Comments/svelte'
+  import { CommentsType } from 'webkit/api/comments'
+  import { currentUser } from '@/stores/user'
+
+  export let insight
+</script>
+
+<div id="comments">
+  <Comments
+    type={CommentsType.Insight}
+    commentsFor={insight}
+    currentUser={$currentUser}
+    titleClass="h4 c-waterloo"
+  />
+</div>
+
+<style lang="scss">
+  #comments {
+    margin-top: 40px;
+
+    :global {
+      form {
+        margin-bottom: 30px;
+      }
+
+      form button {
+        height: 40px;
+        flex: 0 0 92px;
+        white-space: nowrap;
+      }
+
+      form > div {
+        min-height: 40px;
+        padding: 9px 12px;
+      }
+    }
+  }
+</style>