accessing camera and mic in sandboxed iframe from different subdomain

Question

I have basic video chat nodeJS webapp using twilio javascript SDK

video.xyz.com

which I am trying to add in a iframe of a webapplet running on different webservice and sub domain

demo.xyz.com

Browser shows Camera and microphone access prompt when i run directly and it works fine. But inside iframe i am not able to access camera and mic.

Both webapplets are running on same port but different subdomains.

I have tried setting document.domain on video chat app to match parent page app where iframe will be added, but didn't get that to work. I get this error in chrome:

"Uncaught DOMException: Failed to set the 'domain' property on 'Document': Assignment is forbidden for sandboxed iframes."

I do have allow mic and camera attribute.

<iframe allow="camera; microphone" sandbox="allow-forms allow-scripts" src="https://video.xyz.com"></iframe>

What do i need to do get camera access in iframe? Which web app will need this change? Does this need CORS?

Thanks in advance. Any help would be appreciated.

Can you request the camera/microphone from the iframe instead? — Brad, Jul 16 '19 at 17:55
Brad, I tried that using allow attributes. Do you mean some other way? — user5775613, Jul 17 '19 at 14:16
Yeah, I meant instead of making the request from the outer frame, request your camera/microphone from the code ran within the iframe. — Brad, Jul 17 '19 at 14:25
ok, how can i do that? as it works standalone so not understanding what i need to do different when i run it in iframe. — user5775613, Jul 18 '19 at 01:08
Any update on how this was resolved? I'm currently having the same issue on chrome 81 — Tarun Kolla, Apr 22 '20 at 12:28
I believe you also need to set `sandbox="allow-same-origin"`. — myfunkyside, May 24 '20 at 17:01

pascal918 · Answer 1 · 2020-06-07T17:16:47.447

Just read https://groups.google.com/forum/#!topic/bigbluebutton-dev/jauJm_sBbU8

This worked before:

<iframe src="example.com" allow="camera; microphone"/>

In my case , the webpage has a HTTP response header: "Content-Security-Policy: child-src 'self' *;" And the URL's origin in Iframe is not the same as its parent's URL origin.

But now we should do like this:(tested in Chrome Version 83.0.4103.61 )

<iframe src="example.com" allow="camera https://example.com; microphone https://example.com"/>

score 2 · Answer 2 · answered Jan 27 '20 at 10:02

2

Piece of cake:

<iframe
       title="Open identification process"
       src="xxx.com"
       frameBorder="0"
       width="600"
       height="800"
       allow="camera; microphone"
     />

answered Jan 27 '20 at 10:02

Kyrylo Malakhov

1,256
12
13

accessing camera and mic in sandboxed iframe from different subdomain

2 Answers2

Linked