Merge pull request #3 from moveyourdigital/fix-sandbox-iframe-youtube

Remove sandbox property from embed block

Author: lightningspirit

README.md

@@ -70,20 +70,13 @@ However, each renderer supports a set of props, including `className` which can
     className: "article-hr"
   },
   embed: {
-    className: "styled-iframe",
-    rel: "nofollower",
-    sandbox: "allow-fullscreen"
+    className: "styled-iframe"
   }
   header: {
     className: "lead"
   },
   image: {
-    className: "img-fluid",
-    actionsClassNames: {
-      stretched: 'image-block--stretched',
-      withBorder: 'image-block--with-border',
-      withBackground: 'image-block--with-background',
-    }
+    className: "img-fluid"
   },
   list: {
     className: "unstyled-list"
@@ -92,18 +85,57 @@ However, each renderer supports a set of props, including `className` which can
     className: "lead"
   },
   quote: {
-    className: "block-quote",
-    actionsClassNames: {
-    alignment: 'text-align-{alignment}', // This is a substitution placeholder: left or center.
-  }
+    className: "block-quote"
   },
   table: {
     className: "table"
   }
 }} />
 ```
 
-Above you have all allowed properties for each renderer.
+Below are the defaults for each renderer:
+
+```js
+const defaultConfigs = {
+  code: {
+    className: ""
+  },
+  delimiter: {
+    className: ""
+  },
+  embed: {
+    className: "styled-iframe",
+    rel: "noreferer nofollower external", // Generates an <a> if not able to receive an "embed" property
+    sandbox: undefined
+  }
+  header: {
+    className: ""
+  },
+  image: {
+    className: "",
+    actionsClassNames: {
+      stretched: "image-block--stretched",
+      withBorder: "image-block--with-border",
+      withBackground: "image-block--with-background",
+    }
+  },
+  list: {
+    className: ""
+  },
+  paragraph: {
+    className: ""
+  },
+  quote: {
+    className: "",
+    actionsClassNames: {
+      alignment: "text-align-{alignment}", // This is a substitution placeholder: left or center.
+    }
+  },
+  table: {
+    className: "table"
+  }
+}
+```
 
 So, in theory, any CSS framework (such as Bootstrap) can work seamlessly with this library as long as you pass the correct properties.
 
@@ -137,6 +169,11 @@ export default () => <Blocks data={dataFromEditor} renderers={{
 }} />
 ```
 
+## Security optimization
+
+For `embed` block, you can pass a string of Feature-Policy directives for `sandbox` to optimize for security. Take into account that services such as YouTube won't work properly if you set those settings.
+
+
 ## Inspiration
 
 - [EditorJS-React-Renderer](https://github.com/BomdiZane/EditorJS-React-Renderer) but without opinated inline styles.

src/__snapshots__/index.test.tsx.snap

@@ -67,7 +67,6 @@ Array [
       data-src="https://www.youtube.com/watch?v=yDiD8F9ItX0"
       frameBorder="0"
       height="320"
-      sandbox=""
       src="https://www.youtube.com/embed/yDiD8F9ItX0"
       width="580"
     />

src/renderers/embed/__snapshots__/index.test.tsx.snap

@@ -7,7 +7,6 @@ exports[`<Embed /> when receives a Embed block with actions renders a <figure> b
     data-src="https://www.youtube.com/watch?v=yDiD8F9ItX0"
     frameBorder="0"
     height="320"
-    sandbox=""
     src="https://www.youtube.com/embed/yDiD8F9ItX0"
     width="580"
   />

src/renderers/embed/index.tsx

@@ -14,12 +14,12 @@ const Embed = ({
   data,
   className = '',
   rel = 'noreferer nofollower external',
-  sandbox = '',
+  sandbox,
 }: {
   data: EmbedBlockData;
   className?: string;
   rel?: string;
-  sandbox?: string;
+  sandbox?: string | null;
 }) => {
   const classNames: string[] = [];
   if (className) classNames.push(className);
@@ -41,10 +41,14 @@ const Embed = ({
     figureprops.height = data.height.toString();
   }
 
+  if (sandbox) {
+    figureprops.sandbox = sandbox.toString();
+  }
+
   return (
     <figure>
       {data.embed ? (
-        <iframe src={data.embed} {...figureprops} frameBorder="0" sandbox={sandbox} data-src={data.source}></iframe>
+        <iframe src={data.embed} {...figureprops} frameBorder="0" data-src={data.source}></iframe>
       ) : (
         <a href={data.source} target="_blank" rel={rel}>
           {data.source}