TikTok embeds with </3 in the song field break html

[rmens]

When embedding a TikTok which ends with </3 somehow the immediately following </a> is escaped along with it. This results in a broken page.

Tested with other tiktoks that also end with </3 (also break) and tiktoks that don't end with this (don't break).

This happens in the classic editor and the block editor in all themes. Confirmed with three different themes including Twenty Twenty.

This is the content of the post.

We zien de kleine rubberen haarelastiekjes steeds terug komen in de nieuwste <a href="https://www.beautify.nl/de-barbie-paardenstaart/">haartrends</a>. Denk aan de trend waarbij mensen losse vlechtjes in hun haar hebben hangen of los haar met één of twee knotjes. Deze kleine rubberen elastiekjes zijn vaak doorzichtig waardoor ze niet opvallen in het haar. Als je deze zelf al een keer hebt gebruikt weet je dat het best pijnlijk kan zijn om deze uit je haar te halen..

TikTok to the rescue.. want we hebben weer een tip gevonden. 

<h2>Rubberen haarelastiekjes</h2>
Je kunt natuurlijk ook gewoon een schaar gebruiken, maar de kans is groot dat je toch een aantal extra haren knipt waarvan het niet de bedoeling was. Gelukkig zagen wij op een TikTok dé manier om dit te vermijden! TikTokker<a href="https://www.tiktok.com/@thepamperedskin_" rel="noopener" target="_blank"> @thepamperedskin</a> laat ons zien hoe de hack werkt:

https://www.tiktok.com/@thepamperedskin_/video/7079373120741707035

<h3>Hitte</h3>
Het enige wat je nodig hebt is.. een haarstylingtool die heet kan worden! Denk aan een krul-of stijltang. Hoe werkt dit dan? Zorg dat je tool op temperatuur is en houdt deze even tegen het elastiekje aan. Door de hitte zal het rubber 'knappen' en zo haal je ze dus heel gemakkelijk uit je haar! 

<h3>Haarelastiekjestrend</h3>
Zoals we je al eerder vertelden is het gebruik van rubberen elastiekjes helemaal hot. Je hebt het vast al voorbij zien komen óf al zelf geprobeerd! Heb jij dit weekend een feestje en wil je wel zo'n haarstijl proberen? Wij geven je nu wat inspiratie zodat jij zelf aan de slag kan gaan:

<h3>1. Hailey Bieber </h3>

https://www.instagram.com/p/COWIM88p5G4/?utm_source=ig_web_copy_link 

<h3>2. Gigi Hadid</h3>

https://www.instagram.com/p/COIWYi-HzgD/ 

<h3>3. Kendall Jenner</h3>

https://www.instagram.com/p/Cb6kkT3Of80/ 

<h3>4. Queen of Jetlags</h3>

https://www.instagram.com/p/CcOFDv4Mkx4/ 

https://www.beautify.nl/tape-hack-tiktok/ 

[costdev]

@rmens Thanks for the ticket!

Reproduction Report

Environment

• Server: Apache (Linux)
• WordPress: trunk through 5.4
• Browser: Chrome 101.0.4951.54
• OS: Windows 10
• Theme: Twenty Twenty-One
• Plugins: None activated

Steps

1. Navigate to Post > Add New.
2. Paste the following link:

https://www.tiktok.com/@thepamperedskin_/video/7079373120741707035

3. Insert a Paragraph block below and enter some text.
4. Click Preview.
5. 🐞 Notice that the paragraph below the embedded video is now linked. ✅

Results

1. Issue reproduced on trunk and all the way back to 5.4 when TikTok videos were introduced. ✅

Notes

1. TikTok support was ​introduced in 5.4.
2. This may exist with a video from any provider which contains </3> in the video's title, rather than a TikTok-specific issue. This needs testing.
3. Holding off on assigning the Version to 5.4 until we know more.

[swissspidy]

Since this is an issue with lack of escaping on TikTok's side, there's not really something we can do in core, as this is a trusted provider and we do not filter/sanitize their output in any way. Suggesting wontfix.