From 4877cc223e2aa742b9e32ba48c874aab328b8907 Mon Sep 17 00:00:00 2001
From: Oleg Semyonov <oleg@prezly.com>
Date: Thu, 6 Oct 2022 16:24:36 +0400
Subject: [PATCH 1/2] Strip <script> tags from the injected HTML

---
 src/components/HtmlInjection.tsx | 35 ++++++++++++++++++++------------
 1 file changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/components/HtmlInjection.tsx b/src/components/HtmlInjection.tsx
index 1c798d1f..100abba8 100644
--- a/src/components/HtmlInjection.tsx
+++ b/src/components/HtmlInjection.tsx
@@ -1,4 +1,4 @@
-import React, { HTMLAttributes, ScriptHTMLAttributes, useEffect } from 'react';
+import React, { HTMLAttributes, ScriptHTMLAttributes, useEffect, useMemo } from 'react';
 
 interface Props extends HTMLAttributes<HTMLDivElement> {
     html: string;
@@ -8,34 +8,41 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
 export function HtmlInjection(props: Props) {
     const { html, onError, ...attrs } = props;
 
-    useScripts(html, onError);
+    const strippedHtml = useScripts(html, onError);
 
-    return <div {...attrs} dangerouslySetInnerHTML={{ __html: html }} />;
+    return <div {...attrs} dangerouslySetInnerHTML={{ __html: strippedHtml }} />;
 }
 
 function useScripts(html: Props['html'], onError: Props['onError']) {
-    useEffect(() => {
+    const [strippedHtml, scriptsAttributes] = useMemo(() => {
         const container = document.createElement('div');
         container.innerHTML = html;
 
-        const scripts: ScriptHTMLAttributes<HTMLScriptElement>[] = Array.from(
-            container.getElementsByTagName('script'),
-        ).map((script) => {
+        const scripts = Array.from(container.getElementsByTagName('script'));
+
+        const scriptsAttributes: ScriptHTMLAttributes<HTMLScriptElement>[] = scripts.map((script) => {
             return Array.from(script.attributes).reduce((agg, { name, value }) => ({ ...agg, [name]: value }), {});
         });
 
+        scripts.forEach((script) => script.remove());
+
+        const strippedHtml = container.innerHTML;
         container.remove();
 
-        scripts.forEach((attributes) => {
+        return [strippedHtml, scriptsAttributes];
+    }, [html]);
+
+    useEffect(() => {
+        scriptsAttributes.forEach((attributes) => {
             if (attributes.src && document.querySelector(`script[src="${attributes.src}"]`)) {
                 return;
             }
 
-            const script = document.createElement('script');
-            setScriptAttributes(script, attributes);
+            const scriptElement = document.createElement('script');
+            setScriptAttributes(scriptElement, attributes);
 
-            script.addEventListener('error', onError);
-            document.body.appendChild(script);
+            scriptElement.addEventListener('error', onError);
+            document.body.appendChild(scriptElement);
         });
 
         if (typeof iframely !== 'undefined') {
@@ -43,7 +50,9 @@ function useScripts(html: Props['html'], onError: Props['onError']) {
         }
 
         return;
-    }, [html]);
+    }, [scriptsAttributes]);
+
+    return strippedHtml;
 }
 
 function setScriptAttributes(script: HTMLScriptElement, attributes: ScriptHTMLAttributes<HTMLScriptElement>): void {

From b8ba95d872c81619405896f42b03f64b74f02030 Mon Sep 17 00:00:00 2001
From: Oleg Semyonov <oleg@prezly.com>
Date: Thu, 6 Oct 2022 16:27:33 +0400
Subject: [PATCH 2/2] Rename `scriptElement` back to `script`

---
 src/components/HtmlInjection.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/HtmlInjection.tsx b/src/components/HtmlInjection.tsx
index 100abba8..c1687432 100644
--- a/src/components/HtmlInjection.tsx
+++ b/src/components/HtmlInjection.tsx
@@ -38,11 +38,11 @@ function useScripts(html: Props['html'], onError: Props['onError']) {
                 return;
             }
 
-            const scriptElement = document.createElement('script');
-            setScriptAttributes(scriptElement, attributes);
+            const script = document.createElement('script');
+            setScriptAttributes(script, attributes);
 
-            scriptElement.addEventListener('error', onError);
-            document.body.appendChild(scriptElement);
+            script.addEventListener('error', onError);
+            document.body.appendChild(script);
         });
 
         if (typeof iframely !== 'undefined') {