Add allow="usb" to Preview iframe (codesandbox#2309)

Closes codesandbox#2304

Author: keepkeyjon

packages/app/src/app/pages/common/Modals/ShareModal/getCode.js

@@ -66,7 +66,7 @@ export const getEmbedUrl = (sandbox, mainModule, state) =>
 export const getIframeScript = (sandbox, mainModule, state) =>
   `<iframe src="${getEmbedUrl(sandbox, mainModule, state)}" title="${escapeHtml(
     getSandboxName(sandbox)
-  )}" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media" 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>`;
+  )}" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" 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>`;
 
 // eslint-disable-next-line
 export const getButtonMarkdown = (sandbox, mainModule, state) => {

packages/common/src/components/Preview/index.tsx

@@ -533,7 +533,7 @@ class BasePreview extends React.Component<Props, State> {
             <React.Fragment>
               <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"
+                allow="geolocation; microphone; camera;midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
                 src={this.currentUrl()}
                 ref={this.setIframeElement}
                 title={getSandboxName(sandbox)}