YouTube `<iFrame>` doesn't render.

[RokeJulianLockhart]

1. Description

   <iframe src="https://www.youtube.com/embed/TIi6-W9v-dM?start=59" title="How to attach East German Shoulder boards" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen> </iframe>

   doesn't render in a TD flowchart at https://mermaid.live/edit#pako:eNo1UE1vwjAM_StRzpTuskm0wDSJfR12AmmHZQc3MTQiaSrHXVch_vsM23x6evZ7tt9J2-RQV3of0mhbIFa7jemU1MOH0Uu_J4ioMtmV0S1zn6uyHMdxPqWBhwbnNsUSY4Ou3L36u-J98VW4t_vM4rS6XRit2HNAEb-kUXFSwAy2VY-QWT0jRejUtk1DcEiqSUAui-a6tEkkpChvhIEg9wkGazEgpYiMVCsYOPUBplrZ4PurvhjJM9YKO0tTz-iKiM5DrQ4TpWxTL73eWx4IC98Vf7BWIzZFlgDwf9t-CCFbQuzWT0I0YI9qh9-8LH9DWRv9qWc6Xp7wTiI8XXIzmluMYlIJdEBHo013lrnLqdups7piGnCmh94B48bDQcx0tYeQ8fwD1uCMUw. However, it renders at https://www.w3schools.com/html/tryit.asp.

2. Steps to reproduce

   Visit https://mermaid.live/edit#pako:eNo1UE1vwjAM_StRzpTuskm0wDSJfR12AmmHZQc3MTQiaSrHXVch_vsM23x6evZ7tt9J2-RQV3of0mhbIFa7jemU1MOH0Uu_J4ioMtmV0S1zn6uyHMdxPqWBhwbnNsUSY4Ou3L36u-J98VW4t_vM4rS6XRit2HNAEb-kUXFSwAy2VY-QWT0jRejUtk1DcEiqSUAui-a6tEkkpChvhIEg9wkGazEgpYiMVCsYOPUBplrZ4PurvhjJM9YKO0tTz-iKiM5DrQ4TpWxTL73eWx4IC98Vf7BWIzZFlgDwf9t-CCFbQuzWT0I0YI9qh9-8LH9DWRv9qWc6Xp7wTiI8XXIzmluMYlIJdEBHo013lrnLqdups7piGnCmh94B48bDQcx0tYeQ8fwD1uCMUw

3. Screenshots

   

4. Code Sample

   flowchart TD
       A["<iframe src="https://www.youtube.com/embed/TIi6-W9v-dM?start=59" title="How to attach East German Shoulder boards" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen> </iframe>"]

5. Setup

   Mermaid version	10.9.0
   Browser and Version	firefox-125.0-1.fc40.x86_64.rpm

6. Suggested Solutions

   Support the tag, if it's unsupported.

7. Additional Context

   https://github.com/microsoft/vscode/issues/210604#issue-2249402570 might be relevant.

[Yash-Singh1]

Hi @RokeJulianLockhart, the lack of <iframe> support is a security feature to prevent bad actors from embedding malicious sites, however you can enable this to work by setting the securityLevel to loose and adding iframe to the ALLOWED_TAGS in the dompurifyConfig in the Config tab on mermaid.live:

{
  "securityLevel": "loose",
  "dompurifyConfig": {
    "ALLOWED_TAGS": ["iframe"]
  }
}

Here is a Mermaid live link demonstrating this (you may have to readd the "securityLevel": "loose" option in the configuration tab):

https://mermaid.live/edit#pako:eNo9UsFu2zAM_RVB57jeZQNqtx2CpesGpNghAXqYhkGW6FioJBoSVc8I8u-j4246EY_viU-POkuDFmQje4-TGXQicdypKPhsfyp55_qkA4iczL2SA9GYm7qepulmxkKlgxuDoYbQga2P392n6uX2rbLPnzPxTfcfb5UU5MgDi7_hJAiFJtJmEI86k3iCFHQUhwGLt5BEhzrZzJrr0A4Tg6z8wIj27I9rbQx4SBiAILVCF8LR67kVxrvxqq-m5AhaAdGkeSSwVQDrdCtOc8JscOTe6AyVBJWL1XvZigm6KnMA8G9aX7zPJgHEh68MdNq8iiP8obt6DeVByV8qyo0MyzOc5RDPS3JK0gCBr2m4tDq9KrlZ8QymsLl5D2_g175HzPCfYDGMzOjnLxh7d1oo53UZSm73-x8vj7vfx-3TYWnwdlYfVxtCXFS8sJklkcMcjWwoFdjIMlpNsHP6xFzZ9NpnRjkRwvS8rv76Ay5_AU9Fs-0

[RokeJulianLockhart]

https://github.com/mermaid-js/mermaid/issues/5469#issuecomment-2062953703

@Yash-Singh1, indeed, https://mermaid.live/edit#pako:eNo9UsFu2zAM_RVB57jeZQNqtx2CpesGpNghAXqYhkGW6FioJBoSVc8I8u-j4246EY_viU-POkuDFmQje4-TGXQicdypKPhsfyp55_qkA4iczL2SA9GYm7qepulmxkKlgxuDoYbQga2P392n6uX2rbLPnzPxTfcfb5UU5MgDi7_hJAiFJtJmEI86k3iCFHQUhwGLt5BEhzrZzJrr0A4Tg6z8wIj27I9rbQx4SBiAILVCF8LR67kVxrvxqq-m5AhaAdGkeSSwVQDrdCtOc8JscOTe6AyVBJWL1XvZigm6KnMA8G9aX7zPJgHEh68MdNq8iiP8obt6DeVByV8qyo0MyzOc5RDPS3JK0gCBr2m4tDq9KrlZ8QymsLl5D2_g175HzPCfYDGMzOjnLxh7d1oo53UZSm73-x8vj7vfx-3TYWnwdlYfVxtCXFS8sJklkcMcjWwoFdjIMlpNsHP6xFzZ9NpnRjkRwvS8rv76Ay5_AU9Fs-0 works for me when I re-add

"securityLevel": "loose"

Many thanks.