Im using a WYSIWYG editor (called "Jodit") in my website. it has the functionality to be able to add html code. If I add some html style code along with "!important" I can modify the CSS of my entire website.
Example, go to https://xdsoft.net/jodit/play.html?currentTab=State
Click the "Change Mode" icon ""
Paste in
<html>
<style>
* {
color:red !important;
}
</style>
</html>
The whole websites text goes red.
How can I stop a wysiwyg editor from modifying code outside of its textarea?
The most straightforward way would be to make the selector more specific so it only targets content inside the WYSIWYG area, such as
.jodit_workplace > * {
color: red !important;
}
If the content from the WYSIWYG editor is not under your control (for example, if a user can edit and publish it) and you can therefore not prefix the selector, you could use an iframe or shadow dom to completely isolate it from the rest of your page.