chore: Update all embed frames (codesandbox#3888)

MichaelDeBoey · web-flow · commit 28ce4063e735 · 2020-04-15T15:13:00.000+02:00
diff --git a/packages/app/src/app/pages/common/Modals/ShareModal/getCode.ts b/packages/app/src/app/pages/common/Modals/ShareModal/getCode.ts
@@ -72,8 +72,8 @@ export const getIframeScript = (sandbox, mainModule, state) =>
      src="${getEmbedUrl(sandbox, mainModule, state)}"
      style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
      title="${escapeHtml(getSandboxName(sandbox))}"
-     allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
-     sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr"
+     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
    ></iframe>`;
 
 // eslint-disable-next-line
diff --git a/packages/common/src/components/Preview/index.tsx b/packages/common/src/components/Preview/index.tsx
@@ -595,8 +595,8 @@ class BasePreview extends React.Component<Props, State> {
           {(style: { opacity: number }) => (
             <>
               <StyledFrame
-                sandbox="allow-forms allow-scripts allow-same-origin allow-modals allow-popups allow-presentation"
-                allow="geolocation; microphone; camera;midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb; hid"
+                allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr"
+                sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
                 src={this.state.url}
                 ref={this.setIframeElement}
                 title={getSandboxName(sandbox)}
diff --git a/packages/homepage/content/docs/2-embedding.md b/packages/homepage/content/docs/2-embedding.md
@@ -6,10 +6,10 @@ description: Embed a sandbox in docs, blog posts, Medium, and other websites.
 
 ## What is an Embed?
 
-An embed enables you to include a sandbox in your documentation, blog post, 
-or website using an iframe, or anywhere with Embedly support, like Medium, 
-Reddit, Trello, and Notion. You can show just the code, the preview, or both 
-at the same time.
+An embed enables you to include a sandbox in your documentation, blog post, or
+website using an iframe, or anywhere with Embedly support, like Medium, Reddit,
+Trello, and Notion. You can show just the code, the preview, or both at the same
+time.
 
 CodeSandbox has a separate application for the embed. This application is
 specifically built to be as small as possible. If you replace `s` in the URL of
@@ -19,8 +19,8 @@ the embed doesn't have all of the features of the full editor.
 
 ## Generate an Embed URL
 
-You can generate a URL to embed by clicking 'Embed' in the header on the editor and selecting the options
-you want to have enabled.
+You can generate a URL to embed by clicking 'Embed' in the header on the editor
+and selecting the options you want to have enabled.
 
 ![Share Button](./images/share-button.png)
 
@@ -72,14 +72,14 @@ Use this code to embed:
 <iframe
   src="https://codesandbox.io/embed/new?codemirror=1"
   style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
-  allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
-  sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
 ></iframe>
 ```
 
 That will give to a result like this:
 
-<iframe src="https://codesandbox.io/embed/new?codemirror=1" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
+<iframe src="https://codesandbox.io/embed/new?codemirror=1" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
 
 ### Code Example Embed
 
@@ -94,11 +94,11 @@ Use this code to embed:
 <iframe
   src="https://codesandbox.io/embed/new?codemirror=1&highlights=6,7,8,9"
   style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
-  allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
-  sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
 ></iframe>
 ```
 
 That will give to a result like this:
 
-<iframe src="https://codesandbox.io/embed/new?codemirror=1&highlights=6,7,8,9" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
+<iframe src="https://codesandbox.io/embed/new?codemirror=1&highlights=6,7,8,9" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
diff --git a/packages/homepage/content/docs/2-importing.md b/packages/homepage/content/docs/2-importing.md
@@ -142,7 +142,7 @@ const url = `https://codesandbox.io/api/v1/sandboxes/define?parameters=${paramet
 
 #### Example Sandbox
 
-<iframe src="https://codesandbox.io/embed/6yznjvl7nw?editorsize=50&fontsize=14&hidenavigation=1&runonclick=1" 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 src="https://codesandbox.io/embed/6yznjvl7nw?editorsize=50&fontsize=14&hidenavigation=1&runonclick=1" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
 
 ### POST Form
 
@@ -151,7 +151,7 @@ show a form. With a POST request you can create bigger sandboxes.
 
 #### Example Sandbox
 
-<iframe src="https://codesandbox.io/embed/qzlp7nw34q?editorsize=70&fontsize=14&hidenavigation=1&runonclick=1" 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 src="https://codesandbox.io/embed/qzlp7nw34q?editorsize=70&fontsize=14&hidenavigation=1&runonclick=1" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
 
 ### Define without render
 
@@ -172,7 +172,7 @@ Both `get` and `post` requests are supported.
 You can also create a sandbox using an XHR request, like using `fetch`. An
 example sandbox of that is here:
 
-<iframe src="https://codesandbox.io/embed/9loovqj5oy?editorsize=70&fontsize=14&hidenavigation=1&runonclick=1" 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 src="https://codesandbox.io/embed/9loovqj5oy?editorsize=70&fontsize=14&hidenavigation=1&runonclick=1" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
 
 ## Import Single Components
 
diff --git a/packages/homepage/content/docs/2-tests.md b/packages/homepage/content/docs/2-tests.md
@@ -46,4 +46,4 @@ And will also show squiggles in the editor:
 
 Here's a failing Jest test running in a sandbox:
 
-<iframe src="https://codesandbox.io/embed/n9m2w9q8x0?view=preview" 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 src="https://codesandbox.io/embed/n9m2w9q8x0?view=preview" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
diff --git a/packages/homepage/content/docs/5-secrets.md b/packages/homepage/content/docs/5-secrets.md
@@ -40,9 +40,9 @@ secret like this, it justs illustrates how to access them).
      src="https://codesandbox.io/embed/broken-resonance-35lyl?codemirror=1&fontsize=14&hidenavigation=1&theme=dark"
      style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
      title="broken-resonance-35lyl"
-     allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
-     sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
-   ></iframe>
+     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr"
+     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+></iframe>
 
 ## Editing secrets
 
diff --git a/packages/homepage/src/screens/home/explore/index.js b/packages/homepage/src/screens/home/explore/index.js
@@ -96,7 +96,8 @@ const Sandbox = ({
           big={big}
           title={id}
           src={`https://codesandbox.io/embed/${id}?fontsize=14&hidenavigation=1&view=preview&hidedevtools=1`}
-          sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+          allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr"
+          sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
         />
       ) : (
         <Button href={`https://codesandbox.io/s/${id}`} target="_blank">
diff --git a/standalone-packages/react-sandpack/src/components/SandpackProvider/SandpackProvider.tsx b/standalone-packages/react-sandpack/src/components/SandpackProvider/SandpackProvider.tsx
@@ -273,7 +273,8 @@ export default class SandpackProvider extends React.PureComponent<
               position: 'absolute',
               visibility: 'hidden',
             }}
-            sandbox="allow-forms allow-scripts allow-same-origin allow-modals allow-popups allow-presentation"
+            allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr"
+            sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
             src={this.props.bundlerURL}
           />
           {children}

Original file line number	Diff line number	Diff line change
`@@ -46,4 +46,4 @@ And will also show squiggles in the editor:`
`46`	`46`
`47`	`47`	`Here's a failing Jest test running in a sandbox:`
`48`	`48`
`49`		`-<iframe src="https://codesandbox.io/embed/n9m2w9q8x0?view=preview" 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>`
	`49`	`+<iframe src="https://codesandbox.io/embed/n9m2w9q8x0?view=preview" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>`