I have a website which I fully control, in which I embed my other application via iframe - this application prompts the user for screen sharing. So the prompt comes from within the inner, embedded document.
The website and the iframe are on different origins. I only need to capture the contents of actual iframe (not the website in which it is embedded) via the screen capture api, but I cannot get it to work - I'm getting an Error: NotAllowedError: Failed to execute 'getDisplayMedia' on 'MediaDevices': Access to the feature "display-capture" is disallowed by permission policy. If the code is hosted on the same origin it works, but that won't be the case in the actual application.
Website:
<iframe
allow="display-capture"
src="link"
referrerpolicy="no-referrer"
sandbox="allow-scripts allow-forms allow-modals allow-pointer-lock allow-same-origin"
allowFullScreen>
</iframe>
On the iframe end I expose the following response headers:
res.header('Permissions-Policy', 'display-capture=*');
res.header('Feature-Policy', 'display-capture=*');
Same with the actual website.
Both of the apps are running on https.
I found some docs on MDN but I can't figure out on which side do I miss the permissions in order to get it work. I can add all necessary headers / prompts / permissions where necessary, I'm just stuck how exactly am I supposed to get it to work. Thanks.
So what I posted in the question is actually enough - just keep in mind that all nested iframes (and especially the top level one) need the allow="display-capture" attribute, as well as proper headers on the parent window. The best resource to read up on this is probably https://developer.chrome.com/en/docs/privacy-sandbox/permissions-policy/