search

remotion-dev / remotion

🎥 Make videos programmatically with React
https://remotion.dev
Other
20.54k stars 1.03k forks source link

`window.location.origin` breaking URL when used inside of iframe #3502

Closed par5ul1 closed 8 months ago

par5ul1 commented 8 months ago

When loading a <Player /> from an iframe with a srcdoc, window.location.origin will return 'null'. This is used, among other functions, in getAbsoluteSrc.

This issue was first observed by me when attempting to use the <Video /> component with an absolute url. The project renders properly via SSR, but in my sandboxed iframe environment, I got the following error:

Uncaught TypeError: Failed to construct 'URL': Invalid base URL
    at getAbsoluteSrc (index.mjs:177:12)
    at durationReducer (index.mjs:1237:18)
    at updateReducer (react-dom.development.js:16664:22)
    at Object.useReducer (react-dom.development.js:17898:16)
    at useReducer (react.development.js:1627:21)
    at DurationsContextProvider (index.mjs:1250:88)
    at renderWithHooks (react-dom.development.js:16305:18)
    at updateFunctionComponent (react-dom.development.js:19583:20)
    at beginWork (react-dom.development.js:21596:16)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:14)

Proposed fix is to use window.origin instead of window.location.origin. See: https://html.spec.whatwg.org/multipage/webappapis.html#dom-origin-dev

Developers are strongly encouraged to use self.origin over location.origin. The former returns the origin of the environment, the latter of the URL of the environment.

par5ul1 commented 8 months ago

I have opened a PR to address this, and I tested it to the best of my ability.

mateusrachid commented 8 months ago

Also happens when the document has been loaded with the file: protocol.

Minimal reproduction: https://github.com/mateusrachid/remotion-location-origin-issue