Unable to use Nextcloud Talk in an iframe because of allow attributes

[jejbq]

Organizr Version: V 2.1.2460

Branch: master

WebServer: traefik

Operating System: Debian/Linux

---

Problem Description:

the buildFrame() function in js/functions.js hardcodes the allow attributes, so we can't add a camera and microphone to it
as we can for the sandbox in System Settings => Main => Security => iFrame Sandbox

It would therefore be interesting to add an "iFrame Allow" option and use the default "clipboard-read ; clipboard-write" attributes or add the "iFrame allow" option on a case-by-case basis in each Organizr's Tab if the application requires more rights.

Workaround 1:
Use "New Windows" instead of "iFrame" in Tab

Workaround 2:

--- organizr/js/functions.js	2024-02-25 01:00:07.310965000 +0100
+++ organizr/js/functions.js	2024-02-28 17:41:19.302195000 +0100
@@ -3108,7 +3108,7 @@
     sandbox = sandbox.replace(/,/gi, ' ');
     sandbox = (sandbox) ? ' sandbox="' + sandbox + '"' : '';
 	return `
-		<iframe allow="clipboard-read; clipboard-write" allowfullscreen="true" frameborder="0" id="frame-`+extra+id+`" `+sandbox+` scrolling="auto" src="`+tabInfo.access_url+`" class="iframe"></iframe>
+		<iframe allow="camera; microphone; clipboard-read; clipboard-write" allowfullscreen="true" frameborder="0" id="frame-`+extra+id+`" `+sandbox+` scrolling="auto" src="`+tabInfo.access_url+`" class="iframe"></iframe>
 	`;
 }
 function buildFrameContainer(id, split = null){

---

Reproduction Steps:

Set up a Nextcloud AIO with Nextcloud Talk and create a tab in Organizr
for https://nextcloud.example.com/apps/spreed/

Nextcloud Talk will not be able to load the camera or microphone
even if you set the Permissions-Policy header: camera=(*), microphone=(*)
in your reverse proxy.

Permissions-Policy HTTP header, and governs the default behavior if they are not explicitly listed in a policy.
These are specified on the individual directive reference pages. For <iframe> allow attributes, the default behavior is always src.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Permissions-Policy

---

Errors on screen? If so paste here:

In Chrome:

MediaDevicesManager.js:383 [Violation] Permissions policy violation: microphone is not allowed in this document.
MediaDevicesManager.js:383 [Violation] Permissions policy violation: camera is not allowed in this document.
 devices.js:143 Error getting audio stream: NotAllowedError: Permission denied
 devices.js:203 Error getting video stream: NotAllowedError: Permission denied

[tronyx]

If you open a PR, we will approve this.

[jejbq]

I think the easiest thing to do is to do the same thing as this "Added iframe sandbox options" commit but for iFrame "allow" attributes and add all the available options including camera, microphone, clipboard-read, clipboard-write, etc.

Added iframe sandbox options Patch

List of features for allow attribute

Permissions Policy

[jejbq]

If you open a PR, we will approve this.

Done. Thanks!
Added iframe allow options #1970

[tronyx]

Changes were merged into the development branch so I'm closing this.