element-hq / element-web

A glossy Matrix collaboration client for the web.
https://element.io
GNU Affero General Public License v3.0
11.15k stars 1.99k forks source link

Jitsi widget blocked by CSP frame-ancestors 'self', but working on Web/Mobile #23884

Closed krassle closed 1 year ago

krassle commented 1 year ago

Hello! My self-hosted jitsi-meet and matrix-synapse instance using matrix-docker-ansible-deploy has been running for a few months now without any issues.

The Element-Desktop client app is requesting the Jitsi Widget frame through VECTOR-IM's own domain https://app.element.io and is being blocked by the Content Security Policy directive: "frame-ancestors 'self' *.example.com". Whereas Element-Web and also Element for mobile both are using the whitelisted/allowed subdomain https://element.example.com.

Element-Desktop:

https://**app.element.io**/jitsi.html#**conferenceDomain=jitsi.example.com**&conferenceId=Jitsi[...]

Element-Web:

https://**element.example.com**/jitsi.html#**conferenceDomain=jitsi.example.com**&conferenceId=Jitsi[...]

This is what the relevant log returns after clicking on Join conference. Dev-tools console log:

Refused to frame 'https://jitsi.example.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' *.example.com".

This issue is only reproducible on element-desktop.

Outcome

What did you expect?

Join conference works as expected

What happened instead?

Join conference widget frame is being blocked

Operating system

Debian 10 (buster), x86_64

Application version

Element-Desktop: 1.11.15

How did you install the app?

apt-get install element-desktop

Homeserver

Synapse v1.71.0

Will you send logs?

Yes

krassle commented 1 year ago

What I don't understand is: Why is this framing inside an external domain behavior even necessary?

Both Element-Web and Element-Android handle this correctly by framing inside the "preferredDomain"! The jitsi widget URL should look like this: https://your.jitsi.example.org/jitsi.html#conferenceDomain=your.jitsi.example.org&conferenceId=Jitsi[...] Instead it looks like this (on Element-Desktop): https://app.element.io/jitsi.html#conferenceDomain=your.jitsi.example.org&conferenceId=Jitsi[...]

This behavior also has a potential security implication IMO... Jitsi server admins are being forced to compromise on their security policies by changing a strict Content Security Policy directive from "frame-ancestors 'self'" to "frame-ancestors 'self' *.element.io" in order to allow an external domain to frame their jitsi instance! Otherwise Element-Desktop refuses to work with their own jitsi server and throws out the following error message after trying to start a conference (Dev-tools-LOG): Refused to frame 'https://your.jitsi.example.org/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'.

As a potential security issue this should be handled with more urgency, imo.

t3chguy commented 1 year ago

Element Desktop runs on vector://vector/webapp - the Jitsi widget iframe on Desktop uses that same origin.

image

The only place you would be seeing app.element.io in a Jitsi widget from Element Desktop is if you are using pop-out, this is because your browser wouldn't be able to access vector://vector/webapp/jitsi.html for obvious reasons, so it uses app.element.io as a fallback. If you want your Jitsi to be iframable from element-desktop then add vector://vector to your CSP.