search

obsproject / obs-browser

CEF-based OBS Studio browser plugin
GNU General Public License v2.0
776 stars 220 forks source link

IFrames are not visible in browser source #314

Closed Martmists-GH closed 3 years ago

Martmists-GH commented 3 years ago

Operating System Info

Other

Other OS

Arch Linux

OBS Studio Version

27.0.1

OBS Studio Version (Other)

No response

OBS Studio Log URL

https://obsproject.com/logs/e7YvjfxpUA8LuO7Z

OBS Studio Crash Log URL

No response

Expected Behavior

The iframe is visible

Current Behavior

The iframe is invisible and doesn't make any sound (despite the fact that it should).

Steps to Reproduce

  1. Create an html file that embeds youtube
  2. serve it on localhost
  3. load the webpage in a browsersource

Anything else we should know?

It works fine in Google Chrome.

tt2468 commented 3 years ago

Can you provide an HTML file which demonstrates the issue?

Martmists-GH commented 3 years ago 
<html>
    <head>
        <meta charset="UTF-8">
        <title>IFrame Test</title>
    </head>
    <body>
        <div id="root">
            <iframe src="https://music.youtube.com/watch?v=iC3avZ49EA8" width="1920" height="1080"> </iframe>
        </div>
    </body>
</html>

This works fine in browser (served over localhost, not as file) but in the browser source this only shows a border (both as file AND served on localhost)

ElectronicWar commented 3 years ago

Refused to display 'https://music.youtube.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'. The site in question blocks iframes, CEF works as intended.

Martmists-GH commented 3 years ago

The site in question blocks iframes, CEF works as intended.

Is there a way to bypass this like chrome does? I already tried adding --disable-web-security to the flags field.

Refused to display 'https://music.youtube.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

How did you get this? I've had a lot of trouble trying to debug the overlay so I've been doing all my debugging in chrome.

ElectronicWar commented 3 years ago

To expose Chrome Dev Tools for your browser sources, add --remote-debugging-port=1234 to your OBS Studio shortcut (where 1234 is your preferred port number) and navigate to http://localhost:1234/ in Chrome to connect to the session

Martmists-GH commented 3 years ago

When opening that I get

shell.js:3124 Uncaught TypeError: document.registerElement is not a function
    at Object.UI.registerCustomElement (shell.js:3124)
    at shell.js:3136
    at shell.js:3138
UI.registerCustomElement @ shell.js:3124
(anonymous) @ shell.js:3136
(anonymous) @ shell.js:3138
devtools_app.js:2 Uncaught ReferenceError: SDK is not defined
    at devtools_app.js:2
(anonymous) @ devtools_app.js:2
inspector.js:2 Uncaught ReferenceError: SDK is not defined
    at inspector.js:2