Avoid CSS override when new html loaded in div

Question

Introduction

I am working on kendo grids for user email inbox functionality. Emails are loading in grid perfectly, no problem, i can feel so much satisfaction in my mind. I can view detail of each email.

Problem starts on the detailed view when third party rich-content emails load in detail div and overrides the CSS of the website. Its easier to imagine what the main website might look like.

Research:I have made research to avoid this override behavior but it seems there is no other solution than specificity . I cannot change css allover to avoid override.

Edit

Another option was to load newly loaded html(email) in iframe if one can resole iframe issues.

If someone already faced this type of issue, please do help. Any kind of help or reference will be appreciated.

Thanks for your time.

Answer 1

如果您使用的是诸如html或电子邮件之类的任何第三方内容，则应使用iframe以避免可能导致ui扭曲的CSS冲突以及可能破坏页面或窃取数据的跨站点脚本（XSS） 。

Answer 2

This is the reason why most email clients either use iframes, or prohibit style tags within the email's content.

For example Gmail sanitizes the <style></style> tags and find the matching elements and appends the styling inline .

Outlook renders the content inside of an iframe but most removes of the styling tags.

From a practical point of view I would say it's much easier to output your content like Google. This does mean you'll have use/create a serverside pre-processor to properly sanitize the email contents and add them as inline styling to the appropriate elements.