snack-sdk web embedding only works on localhost

[maxhudson]

Summary

We're using the expo snack-sdk package to display a preview of expo apps created using a GUI.

We're having success with ios/android expo go apps using the url, as well as web using the webPreviewURL in an iframe on localhost - but unfortunately we can't get the iframe to load in production from a domain other than localhost.

import { Snack } from 'snack-sdk';

function MyComponent() {
  const webPreviewRef = React.useRef(null);

  const [snack] = useState(new Snack({
    online: true,
    files: {
      'App.js': {
        type: 'CODE',
        contents: `
  import * as React from 'react';
  import { View, Text } from 'react-native';

  export default () => (
    <View style={{flex: 1, justifyContent: 'center'}}>
      <Text style={{fontSize: 20, textAlign: 'center'}}>
        Hello Snack!
      </Text>
    </View>
  );
`}
    }
  }));

  const { url, webPreviewURL } = snack.getState();

  return (
    <iframe
      ref={(c) => (webPreviewRef.current = c?.contentWindow ?? null)}
      src={webPreviewURL}
      allow="geolocation; camera; microphone"
    />
  );
}

How can we get the webPreviewURL to load in an iframe in a production environment at a url other than localhost?

What platform(s) does this occur on?

Web

SDK Version

49.0.0

Reproducible demo or steps to reproduce from a blank project

https://codesandbox.io/s/snack-sample-ls0zrt