Transform <iframe> URLs according to a registry

What does this MR do and why?

Per #282443 ("What Could Still Be Implemented"), let's add a registry of useful "do what I mean" URL transformation patterns, so that (for example) embedding a YouTube view URL (as opposed to embed url) Just Works™. This exact thing was attempted several times during internal testing of the feature, which suggests users will likely try it to. We can make it work seamlessly, so let's.

As noted by Alex at #282443 (comment 3085521796), this registry should be usable from both the backend and frontend. This MR implements it as a YAML config file; we can accumulate useful transforms here as part of the functionality of GitLab, and if a self-managed admin wants, they could add their own, too.

Transformation of the URL is kicked off by IframeLinkFilter (which catches both embed-style ![]() frames, as well as <iframe> tags themselves as of !224626 (merged)), before the allowlist checking takes place: this means that only the final embed URL needs to be added to the allowlist (and thus CSP).

The URL as originally entered is stored in data-iframe-canonical-src, for the rich-text editor to use in future (i.e. to preserve the user's input). The RTE doesn't currently support showing these embeds correctly — this is future work — but doing it from now (rather than from when the RTE learns to support it) is important, as this will be cached in the generated HTML saved to the database.

References

Past work:

Present work: a series of 4 stacked MRs for %18.10/%18.11 to bring this closer to GA:

Screenshots or screen recordings

Before After
image image

How to set up and validate locally

  1. Check out the branch.

  2. Enable the allow_iframes_in_markdown feature on your GDK.

  3. Enable embedding of www.youtube.com from /admin/application_settings/general#js-iframe-settings, and ensure Enable embedded content is turned on.

  4. It may be wise to restart the GDK Rails instance here, for best chances of success.

  5. Using the plain-text editor, insert the following content into a wiki page, issue description, MR comment, etc.:

    ![](https://www.youtube.com/watch?v=DwIepRJgMF4){width=560 height=315}
  6. Even though this is a watch URL and can't be placed in an <iframe> directly, it should embed correctly at 560x315!

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Asherah Connor

Merge request reports

Loading