fix(CodeSandbox): Fix CodeSandbox iframe restrictions (#28)

* updated iframe embed html for accessibility and security reasons * updated iframe attribs and tests
MichaelDeBoey · Oct 20, 2019 · b2cb080 · b2cb080
1 parent 58d96c9
commit b2cb080
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 4 deletions.
diff --git a/src/CodeSandbox.js b/src/CodeSandbox.js
@@ -12,5 +12,5 @@ export const shouldTransform = url => {
 export const getHTML = url => {
   const iframeUrl = url.replace('/s/', '/embed/');
 
-  return `<iframe src="${iframeUrl}" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"></iframe>`;
+  return `<iframe src="${iframeUrl}" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>`;
 };
diff --git a/src/__tests__/CodeSandbox.js b/src/__tests__/CodeSandbox.js
@@ -39,6 +39,6 @@ test('Gets the correct CodeSandbox iframe', () => {
   const html = getHTML('https://codesandbox.io/s/ynn88nx9x');
 
   expect(html).toMatchInlineSnapshot(
-    `"<iframe src=\\"https://codesandbox.io/embed/ynn88nx9x\\" style=\\"width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;\\"></iframe>"`
+    `"<iframe src=\\"https://codesandbox.io/embed/ynn88nx9x\\" style=\\"width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;\\" sandbox=\\"allow-modals allow-forms allow-popups allow-scripts allow-same-origin\\"></iframe>"`
   );
 });
diff --git a/src/__tests__/__snapshots__/plugin.js.snap b/src/__tests__/__snapshots__/plugin.js.snap
@@ -6,7 +6,7 @@ exports[`gatsby-remark-embedder can transform CodePen links 1`] = `
 `;
 
 exports[`gatsby-remark-embedder can transform CodeSandbox links 1`] = `
-"<iframe src=\\"https://codesandbox.io/embed/ynn88nx9x?view=split\\" style=\\"width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;\\"></iframe>
+"<iframe src=\\"https://codesandbox.io/embed/ynn88nx9x?view=split\\" style=\\"width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;\\" sandbox=\\"allow-modals allow-forms allow-popups allow-scripts allow-same-origin\\"></iframe>
 "
 `;
 
@@ -45,7 +45,7 @@ This is a paragraph with a [link](https://example.com).
 
 <iframe src=\\"https://codepen.io/team/codepen/embed/preview/PNaGbb\\" style=\\"width:100%; height:300px;\\"></iframe>
 
-<iframe src=\\"https://codesandbox.io/embed/ynn88nx9x?view=split\\" style=\\"width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;\\"></iframe>
+<iframe src=\\"https://codesandbox.io/embed/ynn88nx9x?view=split\\" style=\\"width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;\\" sandbox=\\"allow-modals allow-forms allow-popups allow-scripts allow-same-origin\\"></iframe>
 
 <iframe width=\\"100%\\" height=\\"300\\" scrolling=\\"no\\" frameborder=\\"no\\" src=https://w.soundcloud.com/player?url=https://soundcloud.com/clemenswenners/africa&color=ff5500&auto_play=false&hide_related=true&show_comments=true&show_user=true&show_reposts=false&show_teaser=false&visual=true></iframe>