Improve handling of svg files

[alexanderstephan]

Description

This PR adds a sanitizer that enables use of dataURLs for svg Blobs. Right now all files with the MIME-type image/svg+xml are getting converted to a application/octet-stream, which breaks the lightbox view.

How it currently looks like:

How it should look like:

A proper lightbox is displayed.

Security

It also fixes a security issue where SVGs can be forwarded to e2e encrypted rooms and possibly steal the encryption keys.

I would highly appreciate feedback regarding the use of DOMPurify. Especially the way I make tags work with the sanitizer. I did this because during my testing many SVG made heavy use of them.

Related issues

The idea of using DOMPurify was originally mentioned here as I found out later: https://github.com/vector-im/element-web/issues/2581

I am looking into looking into this specific issue next, but for now it should fix the following issues:

• https://github.com/vector-im/element-web/issues/18526
• https://github.com/vector-im/element-web/issues/15094
• https://github.com/vector-im/element-web/issues/10833 (Possibly, the issue lacks a bit of description)

Current status:

• [x] I added DOMPurify as a dependency
• [x] I implemented and tested sanitizing svgs and opening them in a lightbox
• [x] I tested that the thumbnails also work as expected in e2e encrypted rooms
• [x] I expanded the comments regarding MIME-type filtering and my implementation
• [x] Affirm that a thumbnail is always generated when it should
• [x] Review use of DOMPurify
• [ ] Fix scaling
• [ ] Prevent preview of large SVGs
• [ ] Write tests

Signed-off-by: Alexander Stephan [email protected]

---

Here's what your changelog entry will look like:

✨ Features

• Improve handling of svg files (#7032). Contributed by @alexanderstephan.

Preview: https://61771aa1667ae2e7582564a3--matrix-react-sdk.netlify.app ⚠️ Do you trust the author of this PR? Maybe this build will steal your keys or give you malware. Exercise caution. Use test accounts.