Make Mermaid sandboxing less tight to allow unsandboxed popups and navigation

aragiarequested to merge
gitlab-community/gitlab-org/gitlab:354010-more-permissive-mermaid-sandbox into master

What does this MR do and why?

This MR is essentially a repeat of !82012 (merged), it adds allow-popups-to-escape-sandbox and allow-top-navigation-by-user-activation to the iframe that houses rendered Mermaid charts within Markdown.

I've written about the current state of things at #354010 (comment 2926576121).

But to summarize, Mermaid charts are unusable to link to places, especially within Gitlab, because the iframe that houses the chart has sandboxing restrictions that make every popup from within the iframe have the same restrictions as the sandboxed iframe itself, see this note in MDN:

grafik

The problem with the restrictions following into a popup is that the iframe also forbids CORS requests for that popup, even if it's logically unrelated with that iframe, which breaks page load for popups within Gitlab, since all the metadata requests fail CORS, this can be observed by clicking the link for Popup in #354010 (comment 2926645452).

This is fixed with allow-popups-to-escape-sandbox, which makes popups not have the same restrictions. See https://googlechrome.github.io/samples/allow-popups-to-escape-sandbox/index.html for a sample of this.

The same sandboxing forbids using <a> with target="_top" or target="_parent" to navigate the current tab as well, this is fixed by allow-top-navigation-by-user-activation, I've picked allow-top-navigation-by-user-activation since it's more restrictive than allow-top-navigation

This doesn't fix #354010 completely because it doesn't fix the Naive case, and this is still a gotcha for anybody who isn't aware they're within an iframe, but I don't know a good solution for that.

Gitlab would need to either add _top to every link or hijack navigation within the iframe, I'm not knowledgable enough to evaluate if either of those would be good ideas, and they maybe probably be done somewhere else.

The security concerns in !82012 (merged) to my knowledge shouldn't be weakened by this.

References

#354010 !82012 (merged)

How to set up and validate locally

  1. Create a Markdown Mermaid graph in a place where it would be sandboxed (like an issue) with the following content: 
    flowchart TD
    A[<a target='_top' href='https://gitlab.com/gitlab-org/gitlab'>_top</a>]
    flowchart TD
    A[<a target='_blank' href='https://gitlab.com/gitlab-org/gitlab'>_blank</a>]
  2. _top should now function
  3. _blank should not break CORS requests since it should not be tainted by the sandbox

Related to #354010

Merge request reports