CSS rules leak to rest of page
Clash Royale CLAN TAG#URR8PPPCSS rules leak to rest of page
BACKGROUND: I have a set of webpages where clients can create their own emails (usually reminders for things) to be sent out to people. It uses ckeditor and I allow them to define their own style rules in a <style> tag. On another page, I show all of the emails they have drafted. (I basically just take what they made out of the database and output it into the page) I'm not asking about the security risks of this. I know perfectly well what they are and how to deal with them. That's not the question. The main problem is that if I have a class called .button that turns buttons to a navy color and they have some style defined for that same class in their css that makes the text black, then it leaks out and turns my button text black.
<style>
.button
QUESTION: How do I let them preview what they wrote without letting their styles creep into my webpage and override my styles?
THINGS I'VE TRIED ALREADY: I've tried an iframe, but I can't totally figure out if it's possible to just embed code in it. I also have seen the <embed> and <object> tags, but I don't know if they could help either.
<embed>
<object>
Thanks in advance for any help!
Plus, an iframe comes closer to "the real thing" in regard to anything that relies on viewport sizes, than content just output into a limited width container element.
– CBroe
yesterday
It's unfortunate. We had the
scoped attribute for the style element, but no browser implements it.– Heretic Monkey
yesterday
scoped
style
2 Answers
2
You could try wrapping each email html and css in its own Shadow DOM: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
Shadow DOM is typically used just for this purpose, to help scope html and css. Popular frameworks like Angular make use of the Shadow DOM for this as well.
I'm guessing this isn't supported in IE 9, right? I work with people at a bank that very rarely updates its software. Is there anything you know of that's similar that supports IE 9 and up?
– Ethan Brouwer
yesterday
Eek, I feel your pain. IE does not support shadow dom natively. You can try using a polyfill to enable it: github.com/webcomponents/webcomponentsjs
– CodeCheshire
yesterday
One way is using !important in your own CSS which makes your CSS codes default value which cannot be overridden. for example:
!important
.button {
background-color: navy !important;
}
My only reservations with this are that I have a lot of styles and I don't want to put !important after all of them, and I'm worried that then that would override their styles in the same case that I mentioned.
– Ethan Brouwer
yesterday
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
"I tried an iframe, but I can't totally figure out if it's possible to just embed code in it" - take a look at how platforms like jsfiddle, codepen etc. are doing it maybe? Those usually simply POST the data to an iframe, and have the server-side script that receives this data assemble the full HTML document including all the "gimmicks". Of course client-side JavaScript would also work, access the documentElement of what's displayed inside the iframe, and then you can basically go nuts with everything DOM has to offer, dynamic element creation, stylesheet insertion, whatever.
– CBroe
yesterday