Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Sandbox CSS possible? #1467

Open
mkrecek234 opened this issue Jun 20, 2024 · 0 comments
Open

Sandbox CSS possible? #1467

mkrecek234 opened this issue Jun 20, 2024 · 0 comments

Comments

@mkrecek234
Copy link

I am using Trumbowyg to display incoming HTML-formatted emails, just as Outlook and other programs format them.
What I noticed is that if I open some heavily formatted emails with meta fontface and other CSS definitions, those CSS definitions will then also be applied to the rest of the page. I noted this that even though my CSS definition for href links "a" is not underlined, after opening such an email, all "a" href links were displayed underlined.
Is there any way to "sandbox" the CSS definitions of the displayed HTML in Trumbowyg?

Here is an HTML which caused this:

<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="Generator" content="Microsoft Word 15 (filtered medium)"> <!--[if !mso]><style>v\:* {behavior:url(#default#VML);} o\:* {behavior:url(#default#VML);} w\:* {behavior:url(#default#VML);} .shape {behavior:url(#default#VML);} </style><![endif]--><style><!-- /* Font Definitions */ @font-face  {font-family:Helvetica;  panose-1:2 11 6 4 2 2 2 2 2 4;} @font-face  {font-family:"Cambria Math";  panose-1:2 4 5 3 5 4 6 3 2 4;} @font-face  {font-family:Calibri;  panose-1:2 15 5 2 2 2 4 3 2 4;} @font-face  {font-family:Aptos;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal  {margin:0cm;  font-size:12.0pt;  font-family:"Aptos",sans-serif;} a:link, span.MsoHyperlink  {mso-style-priority:99;  color:blue;  text-decoration:underline;} span.E-MailFormatvorlage18  {mso-style-type:personal-reply;  font-family:"Helvetica",sans-serif;  color:#0E2841;} .MsoChpDefault  {mso-style-type:export-only;  font-size:10.0pt;  mso-ligatures:none;  mso-fareast-language:EN-US;} @page WordSection1  {size:612.0pt 792.0pt;  margin:70.85pt 70.85pt 2.0cm 70.85pt;} div.WordSection1  {page:WordSection1;} --></style><!--[if gte mso 9]><xml> <o:shapedefaults v:ext="edit" spidmax="1026" /> </xml><![endif]--><!--[if gte mso 9]><xml> <o:shapelayout v:ext="edit"> <o:idmap v:ext="edit" data="1" /> </o:shapelayout></xml><![endif]--> </head> <body lang="DE" link="blue" vlink="purple" style="word-wrap:break-word"> <div class="WordSection1"> <p class="MsoNormal"><span style="font-size:11.0pt;font-family:&quot;Helvetica&quot;,sans-serif;color:#0E2841;mso-fareast-language:EN-US">Hi Michael<o:p></o:p></span></p> <p class="MsoNormal"><span style="font-size:11.0pt;font-family:&quot;Helvetica&quot;,sans-serif;color:#0E2841;mso-fareast-language:EN-US"><o:p>&nbsp;</o:p></span></p> <p class="MsoNormal"><span style="font-size:11.0pt;font-family:&quot;Helvetica&quot;,sans-serif;color:#0E2841;mso-fareast-language:EN-US">Danke für den schnellen Draht. Ich habe uns direkt für morgen Mittag mal was gebucht </span><span style="font-size:11.0pt;font-family:&quot;Segoe UI Emoji&quot;,sans-serif;color:#0E2841;mso-fareast-language:EN-US">&#128522;</span><span style="font-size:11.0pt;font-family:&quot;Helvetica&quot;,sans-serif;color:#0E2841;mso-fareast-language:EN-US"> <o:p></o:p></span></p> <p class="MsoNormal"><span style="font-size:11.0pt;font-family:&quot;Helvetica&quot;,sans-serif;color:#0E2841;mso-fareast-language:EN-US"><o:p>&nbsp;</o:p></span></p> <p class="MsoNormal"><span style="font-size:11.0pt;font-family:&quot;Helvetica&quot;,sans-serif;color:#0E2841;mso-fareast-language:EN-US">Test text </span><a href="https://www.google.com/">Test Link</a><span style="font-size:11.0pt;font-family:&quot;Helvetica&quot;,sans-serif;color:#0E2841;mso-fareast-language:EN-US"><o:p></o:p></span></p> <p class="MsoNormal"><span style="font-size:11.0pt;font-family:&quot;Helvetica&quot;,sans-serif;color:#0E2841;mso-fareast-language:EN-US"><o:p>&nbsp;</o:p></span></p> <p class="MsoNormal"><span style="font-size:11.0pt;font-family:&quot;Helvetica&quot;,sans-serif;color:#0E2841;mso-fareast-language:EN-US">BG<o:p></o:p></span></p> <p class="MsoNormal"><span style="font-size:11.0pt;font-family:&quot;Helvetica&quot;,sans-serif;color:#0E2841;mso-fareast-language:EN-US">Tobias&nbsp; <o:p></o:p></span></p> <p class="MsoNormal"><span style="font-size:11.0pt;font-family:&quot;Helvetica&quot;,sans-serif;color:#0E2841;mso-fareast-language:EN-US"><o:p>&nbsp;</o:p></span></p> <p class="MsoNormal"><span style="font-size:11.0pt;font-family:&quot;Helvetica&quot;,sans-serif;color:#0E2841"><o:p>&nbsp;</o:p></span></p> <table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td valign="top" style="padding:0cm 0cm 0cm 0cm"> <p class="MsoNormal"><b><span style="font-size:11.0pt;font-family:&quot;Helvetica&quot;,sans-serif;color:#053556;mso-ligatures:standardcontextual">Tobias</span></b><span style="font-size:11.0pt;font-family:&quot;Calibri&quot;,sans-serif;color:#44546A;mso-ligatures:standardcontextual"><br> </span> <p class="MsoNormal"><span style="color:white">//-Ref 209951-//<o:p></o:p></span></p> </div> </div> </body> </html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@mkrecek234