[Sanitize] Sanitize content in Displayer and in Playground

lib/controls/video/index.jsx

@@ -20,6 +20,7 @@ import {
   isPreviousEmptyBlock,
   moveSelectionTo,
   removePreviousEmptyBlock,
+  sanitizeIframeReactComp,
 } from "../../utils";
 import { getDataForProvider } from "./providers";
 
@@ -34,6 +35,7 @@ const VideoEditor = ({ contentState, entityKey, blockKey }) => {
     dispatch(updateEditor(moveSelectionTo(editorState, blockKey)));
   };
   const hasFocus = hasEntityFocus(contentState, editorState, entityKey);
+  const reactComp = parseHtml(embedlyHtml || html, { sanitize: false });
   return (
     <ResponsiveIframeContainer
       ratio={embedRatio || 67.5}
@@ -46,7 +48,7 @@ const VideoEditor = ({ contentState, entityKey, blockKey }) => {
         })}
         onClick={onClick}
       >
-        {parseHtml(embedlyHtml || html, { sanitize: false })}
+        {sanitizeIframeReactComp(reactComp)}
       </div>
     </ResponsiveIframeContainer>
   );
@@ -56,13 +58,14 @@ const VideoDisplayer = (props) => {
   const { embedlyHtml, embedRatio, height, html } = props.contentState
     .getEntity(props.entityKey)
     .getData();
+  const reactComp = parseHtml(embedlyHtml || html, { sanitize: false });
   return (
     <ResponsiveIframeContainer
       ratio={embedRatio || 67.5}
       className="kiss-Draft__media-read"
       style={{ ...(height && { height }) }}
     >
-      {parseHtml(embedlyHtml || html, { sanitize: false })}
+      {sanitizeIframeReactComp(reactComp)}
     </ResponsiveIframeContainer>
   );
 };
@@ -162,10 +165,7 @@ const VideoControls = ({ disabled, onChange, embedlyApiKey }) => {
                 {({ handleSubmit, isSubmitting, values }) => {
                   return (
                     <>
-                      <Label
-                        className="k-u-margin-bottom-single"
-                        htmlFor="url"
-                      >
+                      <Label className="k-u-margin-bottom-single" htmlFor="url">
                         {translations.image_upload.label}
                       </Label>
                       <InputWithButton
@@ -200,7 +200,9 @@ const VideoControls = ({ disabled, onChange, embedlyApiKey }) => {
                             ratio={embedRatio}
                             style={{ ...(height && { height }) }}
                           >
-                            {parseHtml(embedlyHtml, { sanitize: false })}
+                            {sanitizeIframeReactComp(
+                              parseHtml(embedlyHtml, { sanitize: false })
+                            )}
                           </ResponsiveIframeContainer>
                         </div>
                       )}

lib/controls/video/providers.js

@@ -2,7 +2,6 @@ export const calculRatio = ({ height, width }) =>
   ((height / width) * 100).toPrecision(4);
 
 export const getDataForProvider = (response) => {
-  console.log(response);
   if (
     response.type === "video" ||
     (response.type === "rich" && response.provider_name !== "SoundCloud")

lib/decorators/lazy-media.jsx

@@ -1,33 +1,34 @@
-import React from 'react'
 import {
+  LazyLoader,
   parseHtml,
   ResponsiveIframeContainer,
-  LazyLoader
-} from '@kisskissbankbank/kitten'
+} from "@kisskissbankbank/kitten";
+import React from "react";
+import { sanitizeIframeReactComp } from "../utils";
 
 const Media = (props) => {
-  const { html } = props.contentState.getEntity(props.entityKey).getData()
-
+  const { html } = props.contentState.getEntity(props.entityKey).getData();
+  const reactComp = parseHtml(html, { sanitize: false });
   return (
     <LazyLoader>
       <ResponsiveIframeContainer ratio={67.5}>
-        {parseHtml(html, { sanitize: false })}
+        {sanitizeIframeReactComp(reactComp)}
       </ResponsiveIframeContainer>
     </LazyLoader>
-  )
-}
+  );
+};
 
 const mediaStrategy = (contentBlock, callback, contentState) => {
   contentBlock.findEntityRanges((character) => {
-    const entityKey = character.getEntity()
+    const entityKey = character.getEntity();
     return (
       entityKey !== null &&
-      contentState.getEntity(entityKey).getType() === 'MEDIA'
-    )
-  }, callback)
-}
+      contentState.getEntity(entityKey).getType() === "MEDIA"
+    );
+  }, callback);
+};
 
 export default {
   strategy: mediaStrategy,
   component: Media,
-}
+};

lib/utils.js

@@ -1,3 +1,4 @@
+import { sanitizeUrl } from "@braintree/sanitize-url";
 import { domElementHelper } from "@kisskissbankbank/kitten";
 import {
   AtomicBlockUtils,
@@ -15,6 +16,7 @@ import flow from "lodash/fp/flow";
 import get from "lodash/fp/get";
 import isEmpty from "lodash/fp/isEmpty";
 import omit from "lodash/fp/omit";
+import pick from "lodash/fp/pick";
 import reduce from "lodash/fp/reduce";
 import trim from "lodash/fp/trim";
 import { decorator as buttonLinkDecorator } from "./controls/button-link";
@@ -33,6 +35,27 @@ export const isJSONContent = (content) => {
   }
 };
 
+export const sanitizeIframeReactComp = (iframeReactComp) => {
+  return {
+    ...iframeReactComp,
+    props: {
+      ...pick([
+        "allow",
+        "allowFullScreen",
+        "className",
+        "style",
+        "sandbox",
+        "frameBorder",
+        "height",
+        "scrolling",
+        "title",
+        "width",
+      ])(iframeReactComp?.props),
+      src: sanitizeUrl(iframeReactComp?.props?.src),
+    },
+  };
+};
+
 export const getJSONContent = (value) => {
   if (!domElementHelper.canUseDom()) return {};
   return isJSONContent(value) ? JSON.parse(value) : getRawContent(value, true);

package.json

@@ -41,6 +41,7 @@
     "translations": "docusaurus write-translations"
   },
   "dependencies": {
+    "@braintree/sanitize-url": "^6.0.0",
     "@kisskissbankbank/kitten": "^10.3.0",
     "classnames": "^2.3.1",
     "draft-convert": "^2.1.12",