0

I am trying to set "allow" attribute on iframe either on page load or "on-click" event.

Below is my sample HTML code:

<button onclick="myFunction()">Click me</button>
<br/>
<iframe id="allow_test" src="https://www.example.com/someDeviceTest.html" width="300" height="300" />

Note that in the above iframe tag, allow attribute is not there to start with.

Script:

function myFunction() {
    console.log("button clicked");
    document.getElementById("allow_test").setAttribute("allow", "microphone;");
}

document.addEventListener('DOMContentLoaded', function(){ 
        console.log("Onload set attribute");
        document.getElementById("allow_test").setAttribute("allow", "microphone;");
}, false);

I can see the allow attribute being added into the iframe with both tests when I inspect. But the microphone access is still denied. Allow attribute is not being honored if I set it via setAttribute.

After page load, just reloading iframe alone makes it work (i.e. successfully gets access to microphone successfully)

kiranramanna
  • 115
  • 1
  • 9
  • Does this answer your question? [accessing camera and mic in sandboxed iframe from different subdomain](https://stackoverflow.com/questions/57008648/accessing-camera-and-mic-in-sandboxed-iframe-from-different-subdomain) – xy2 Sep 12 '20 at 03:57
  • @Hugo, Nope it does not. Sandbox adds more restrictions. Another point in above question link, it already has `allow="camera; microphone"`. I want to add this attribute dynamically after the page load. – kiranramanna Sep 12 '20 at 04:06

1 Answers1

0

By adding allow attribute before src and setting the value from javascript worked.

kiranramanna
  • 115
  • 1
  • 9