Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

AntiSamy XSS Rules for Media Queries

Avatar

Level 2

I am trying to allow users to publish HTML and CSS content in content fragments. The users are finding that important pieces of their CSS/HTML is being stripped out, in particular media queries/responsive codes.
Does anyone have any guidance for writing AntiSamy config.xml's that will pass the CSS (and HTML) in the spoiler tags below? Shown below are a before and after of the HTML/CSS when it's run through an AntiSamy config.xml that I customized slightly to at least preserve the html, head, and meta tags. I can't find any documentation on allowing more complicated CSS styling like this. Note that in particular, all the screen/@media sections are removed.

As a side question, is anyone familiar with ways of disabling XSS protection partially or completely to bypass the content fragment filtering? The way we are managing and authoring our content means that XSS is not relevant to our AEM use case.

Spoiler
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>	
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Title</title>
<style type="text/css">
* {
    line-height: normal !important;
}
strong {
    font-weight: bold !important;
}
em {
    font-style: italic !important;
}
body {
    background-color: #ffffff !important;
    -webkit-text-size-adjust: none !important;
}
h1 {
    font-size: 24px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    color: #002C6C !important;
    font-weight: bold !important;
}
h2 {
    font-family: Arial, Helvetica, sans-serif !important; 
    font-size: 16px !important; 
    color: #4a4a4a !important;
    font-weight: bold !important;
}
h3 {
    font-family: Arial, Helvetica, sans-serif !important; 
    font-size: 12px !important; 
    color: #000000 !important;
    font-weight: bold !important;
}
.ExternalClass * {
    line-height: 112%
}
.ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td {
    line-height: 112%
}
td {
    -webkit-text-size-adjust: none;
}
a[href^=tel] {
    color: inherit;
    text-decoration: none;
}
.applelinksgray a {
    color: #4a4a4a !important;
    text-decoration: none;
}
.applelinksblack a {
    color: #000000 !important;
    text-decoration: none;
}

@media screen and (max-width: 600px) {
.fullWidth {
    width: 100% !important;
    min-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0px !important;
    text-align: center !important;
}
.hero {
    width: 100% !important;
    height: auto !important;
}
.herotwo {
    width: 100% !important;
    height: auto !important;
    max-width: 140px !important;
}
.applestore {
    width: 100% !important;
    height: auto !important;
    max-width: 130px !important;
}
.googleplay {
    width: 100% !important;
    height: auto !important;
    max-width: 138px !important;
}
.button {
    padding-left: 0px !important;
}
.padding {
    padding: 15px !important;
}
}

@media print and (max-width: 600px) {
.fullWidth {
    width: 100% !important;
    min-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0px !important;
    text-align: center !important;
}
.hero {
    width: 100% !important;
    height: auto !important;
}
.herotwo {
    width: 100% !important;
    height: auto !important;
    max-width: 140px !important;
}
.applestore {
    width: 100% !important;
    height: auto !important;
    max-width: 130px !important;
}
.googleplay {
    width: 100% !important;
    height: auto !important;
    max-width: 138px !important;
}
.herothree {
    width: 100% !important;
    height: auto !important;
    max-width: 130px !important;
}
.button {
    padding-left: 0px !important;
}
.padding {
    padding: 15px !important;
}
}
</style>
</head>
<body style="padding: 0px;margin: 0px; background-color:#ffffff;">
<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width:600px; background-color:#ffffff;" class="fullWidth" role="none">
  <tr>
    <td align="center" style="vertical-align:top; padding:0px 0px 0px 0px; min-width:600px; background-color:#ffffff;" class="fullWidth">
      <table align="center" width="600" cellpadding="0" cellspacing="0" border="0" class="fullWidth" style="background-color:#ffffff;" role="none">
        <tr>
          <td align="left" style="vertical-align:top; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #4a4a4a; padding: 12px 12px 12px 30px;" class="padding">[Preheader_Variable]</td>
        </tr>
        <tr>
          <td align="center" style="vertical-align:top; background-color: #005eb8;"><img src="https://not.a.site/no-real-image.png"  width="190" height="auto" alt="Image" border="0" style="display:block;" class="herotwo"/></td>
        </tr>
        <tr>
          <td align="left" style="vertical-align:top; padding: 35px 12px 15px 30px;" class="padding"><h1 style="font-size: 26px; font-family: Arial, Helvetica, sans-serif; color: #002C6C; font-weight: bold;">[HEADLINE]</h1></td>
        </tr>
        <tr>
          <td align="left" style="vertical-align:top; font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: #4a4a4a; padding: 0px 0px 55px 30px;" class="padding">[Variable_Tagline_2] </td>
        </tr>
        <tr>
          <td align="center" style="vertical-align:top; padding: 0px 0px 30px 0px;">
            <table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
              <tr>
                <td align="center" style="vertical-align:top;">
                  <table width="300" align="left" cellpadding="0" cellspacing="0" border="0" class="fullWidth">
                    <tr>
                      <td align="center" style="vertical-align:top;padding:0px 0px 30px 30px;" class="padding">
                        <table height="50" cellpadding="0" cellspacing="0" border="0" style="vertical-align:top;" align="left">
                          <tr>
                            <td align="center" style="background-color:#228833; color: #fffffe; font-size: 18px; font-family: Helvetica, Arial, sans-serif; font-weight:bold; border: 1px solid #228833; width: 250px; height: 50px; vertical-align:middle; border-radius:8px; -moz-border-radius: 8px; -webkit-border-radius:8px;"><a href="#" target="_blank" style="color: #fffffe; text-decoration:none; white-space: nowrap;">[PLACEHOLDER]</a></td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td align="left" style="vertical-align:top; font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: #4a4a4a; padding: 0px 30px 45px 30px; background-color: #ffffff;" class="padding">[VARIABLE_TAGLINE]</td>
        </tr>
        <tr>
          <td align="center" style="vertical-align:top; padding: 0px 30px 30px; background-color: #ffffff;" class="padding">
            <table width="100%" cellpadding="0" cellspacing="0" border="0">
              <tr>
                <td align="center" style="vertical-align:top; background-color: #2e3192; padding: 1px 0px 0px 0px;">
                  <table width="100%" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                      <td align="center" style="vertical-align:top; padding: 30px 0px 0px; background-color: #ffffff;"><img src="https://not.a.site/no-real-image.png"  width="153" height="auto" alt="Image" border="0" style="display:block;"/></td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
       <tr>
          <td align="center" style="vertical-align:top; font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #252525; padding: 20px 12px 13px 12px; background-color: #ededed;"><h2 style="font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #252525; font-weight: bold;">Text Here<span style="font-size:70%; line-height:0; vertical-align:3px;">&reg;</span> app?</h2></td>
        </tr>
         <tr>
          <td align="left" style="vertical-align:top;background-color: #ededed;"><table width="100%" cellpadding="0" cellspacing="0" border="0">
              <tr>
                <td align="left" style="vertical-align:top; padding: 0px 0px 0px 03px;"><table width="100%" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                      <td align="right" style="vertical-align:top;padding: 0px 8px 13px 12px;"><a href="https://not.a.site/no-real-image.png" target="_blank"><img src="https://not.a.site/no-real-image.png"  width="140" height="auto" alt="Button Text" border="0" style="display:block;"/></a></td>
                      <td align="left" style="vertical-align:top;padding: 0px 12px 13px 8px; "><a href="https://not.a.site/no-real-image.png" target="_blank"><img src="https://not.a.site/no-real-image.png"  width="148" height="auto" alt="Button Text 2" border="0" style="display:block;"/></a></td>
                    </tr>
                  </table></td>
              </tr>
            </table></td>
        </tr>
        <tr>
          <td style="padding:20px 30px 23px 30px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color: #000000; vertical-align:top; background-color: #ededed;" align="left">App<span style="font-size:70%; line-height:0; vertical-align:3px;">&reg;</span> app is available<br />
           trademark text<br />
            
trademark text<br />
            <br />
            <h3 style="text-transform: uppercase; font-family: Arial, Helvetica, sans-serif !important; font-size: 12px !important; color: #000000 !important; font-weight: bold !important;">About</h3>
            settings text<span style="font-size:70%; line-height:0; vertical-align:3px;">&reg;</span> etc<a href="https://not.a.site/no-real-image.png" style="color:#002855; text-decoration:underline;">not.a.site</a> to manage settings.<br />
            <br />
            sign in <span class="applelinksblack"><a style="color:#000001;text-decoration: none;">https://not.a.site/no-real-image.png</a></span> to send a message <br />
            <br />
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>
</html>



Spoiler
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>	
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Title</title>
<style type="text/css"><![CDATA[* {
	line-height: normal;
}
strong {
	font-weight: bold;
}
em {
	font-style: italic;
}
body {
	background-color: rgb(255,255,255);
}
* {
}
h1 {
	font-size: 24.0px;
	font-family: Arial , Helvetica , sans-serif;
	color: rgb(0,44,108);
	font-weight: bold;
}
h2 {
	font-family: Arial , Helvetica , sans-serif;
	font-size: 16.0px;
	color: rgb(74,74,74);
	font-weight: bold;
}
h3 {
	font-family: Arial , Helvetica , sans-serif;
	font-size: 12.0px;
	color: rgb(0,0,0);
	font-weight: bold;
}
*.ExternalClass * {
	line-height: 112.0%;
}
*.ExternalClass p, *.ExternalClass span, *.ExternalClass font, *.ExternalClass td {
	line-height: 112.0%;
}
td {
}
* {
}
]]></style>

</head><body style="padding: 0.0px;margin: 0.0px;background-color: rgb(255,255,255);">
<table align="center" border="0" cellpadding="0" cellspacing="0" class="fullWidth" style="min-width: 600.0px;background-color: rgb(255,255,255);" width="100%">
  <tbody><tr>
    <td align="center" class="fullWidth" style="vertical-align: top;padding: 0.0px 0.0px 0.0px 0.0px;min-width: 600.0px;background-color: rgb(255,255,255);">
      <table align="center" border="0" cellpadding="0" cellspacing="0" class="fullWidth" style="background-color: rgb(255,255,255);" width="600">
        <tbody><tr>
          <td align="left" class="padding" style="vertical-align: top;font-family: Arial , Helvetica , sans-serif;font-size: 12.0px;color: rgb(74,74,74);padding: 12.0px 12.0px 12.0px 30.0px;">[Preheader_Variable]</td>
        </tr>
        <tr>
          <td align="center" style="vertical-align: top;background-color: rgb(0,94,184);"><img alt="Image" border="0" class="herotwo" src="https://not.a.site/no-real-image.png" style="display: block;" width="190" /></td>
        </tr>
        <tr>
          <td align="left" class="padding" style="vertical-align: top;padding: 35.0px 12.0px 15.0px 30.0px;"><h1 style="font-size: 26.0px;font-family: Arial , Helvetica , sans-serif;color: rgb(0,44,108);font-weight: bold;">[HEADLINE]</h1></td>
        </tr>
        <tr>
          <td align="left" class="padding" style="vertical-align: top;font-family: Arial , Helvetica , sans-serif;font-size: 18.0px;color: rgb(74,74,74);padding: 0.0px 0.0px 55.0px 30.0px;">[Variable_Tagline_2] </td>
        </tr>
        <tr>
          <td align="center" style="vertical-align: top;padding: 0.0px 0.0px 30.0px 0.0px;">
            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
              <tbody><tr>
                <td align="center" style="vertical-align: top;">
                  <table align="left" border="0" cellpadding="0" cellspacing="0" class="fullWidth" width="300">
                    <tbody><tr>
                      <td align="center" class="padding" style="vertical-align: top;padding: 0.0px 0.0px 30.0px 30.0px;">
                        <table align="left" border="0" cellpadding="0" cellspacing="0" height="50" style="vertical-align: top;">
                          <tbody><tr>
                            <td align="center" style="background-color: rgb(34,136,51);color: rgb(255,255,254);font-size: 18.0px;font-family: Helvetica , Arial , sans-serif;font-weight: bold;border: 1.0px solid rgb(34,136,51);width: 250.0px;height: 50.0px;vertical-align: middle;"><a href="#" style="color: rgb(255,255,254);text-decoration: none;white-space: nowrap;" target="_blank">[PLACEHOLDER]</a></td>
                          </tr>
                        </tbody></table>
                      </td>
                    </tr>
                  </tbody></table>
                </td>
              </tr>
            </tbody></table>
          </td>
        </tr>
        <tr>
          <td align="left" class="padding" style="vertical-align: top;font-family: Arial , Helvetica , sans-serif;font-size: 18.0px;color: rgb(74,74,74);padding: 0.0px 30.0px 45.0px 30.0px;background-color: rgb(255,255,255);">[VARIABLE_TAGLINE]</td>
        </tr>
        <tr>
          <td align="center" class="padding" style="vertical-align: top;padding: 0.0px 30.0px 30.0px;background-color: rgb(255,255,255);">
            <table border="0" cellpadding="0" cellspacing="0" width="100%">
              <tbody><tr>
                <td align="center" style="vertical-align: top;background-color: rgb(46,49,146);padding: 1.0px 0.0px 0.0px 0.0px;">
                  <table border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tbody><tr>
                      <td align="center" style="vertical-align: top;padding: 30.0px 0.0px 0.0px;background-color: rgb(255,255,255);"><img alt="Image" border="0" src="https://not.a.site/no-real-image.png" style="display: block;" width="153" /></td>
                    </tr>
                  </tbody></table>
                </td>
              </tr>
            </tbody></table>
          </td>
        </tr>
       <tr>
          <td align="center" style="vertical-align: top;font-family: Arial , Helvetica , sans-serif;font-size: 16.0px;color: rgb(37,37,37);padding: 20.0px 12.0px 13.0px 12.0px;background-color: rgb(237,237,237);"><h2 style="font-family: Arial , Helvetica , sans-serif;font-size: 16.0px;color: rgb(37,37,37);font-weight: bold;">Text Here<span style="font-size: 70.0%;line-height: 0;vertical-align: 3.0px;">®</span> app?</h2></td>
        </tr>
         <tr>
          <td align="left" style="vertical-align: top;background-color: rgb(237,237,237);"><table border="0" cellpadding="0" cellspacing="0" width="100%">
              <tbody><tr>
                <td align="left" style="vertical-align: top;padding: 0.0px 0.0px 0.0px 3.0px;"><table border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tbody><tr>
                      <td align="right" style="vertical-align: top;padding: 0.0px 8.0px 13.0px 12.0px;"><a href="https://not.a.site/no-real-image.png" target="_blank"><img alt="Button Text" border="0" src="https://not.a.site/no-real-image.png" style="display: block;" width="140" /></a></td>
                      <td align="left" style="vertical-align: top;padding: 0.0px 12.0px 13.0px 8.0px;"><a href="https://not.a.site/no-real-image.png" target="_blank"><img alt="Button Text 2" border="0" src="https://not.a.site/no-real-image.png" style="display: block;" width="148" /></a></td>
                    </tr>
                  </tbody></table></td>
              </tr>
            </tbody></table></td>
        </tr>
        <tr>
          <td align="left" style="padding: 20.0px 30.0px 23.0px 30.0px;font-family: Arial , Helvetica , sans-serif;font-size: 12.0px;color: rgb(0,0,0);vertical-align: top;background-color: rgb(237,237,237);">App<span style="font-size: 70.0%;line-height: 0;vertical-align: 3.0px;">®</span> app is available<br />
           trademark text<br />
            
trademark text<br />
            <br />
            <h3 style="text-transform: uppercase;font-family: Arial , Helvetica , sans-serif;font-size: 12.0px;color: rgb(0,0,0);font-weight: bold;">About</h3>
            settings text<span style="font-size: 70.0%;line-height: 0;vertical-align: 3.0px;">®</span> etc<a href="https://not.a.site/no-real-image.png" style="color: rgb(0,40,85);text-decoration: underline;">not.a.site</a> to manage settings.<br />
            <br />
            sign in <span class="applelinksblack"><a style="color: rgb(0,0,1);text-decoration: none;">https://not.a.site/no-real-image.png</a></span> to send a message <br />
            <br />
        </td></tr>
      </tbody></table>
    </td>
  </tr>
</tbody></table>

</body></html>
Topics

Topics help categorize Community content and increase your ability to discover relevant content.

6 Replies

Avatar

Community Advisor

Why are you using internal CSS instant referencing using a path or clientlibs?



Arun Patidar

Avatar

Level 2
I'm sorry, could you explain a bit more what you mean? We aren't using any internal CSS referencing, unless I'm misunderstanding your question. The stylesheet is all inline.

Avatar

Community Advisor
Yes, I meant why are you using css directly inside <style> tag (internal css) instead of using clienlibs? inline(css used by style attribute in HTML elemen) css would not be having any issue.


Arun Patidar

Avatar

Level 2
How would (relatively) non-technical users input their CSS to client libs? Wouldn't that require access to our AEM project? The HTML/CSS is being written by people that just have author access to the content fragments and is generally very diverse in contents.

Avatar

Level 2

Adding one comment to clarify - We've determined that this issue may not be specific to content fragments. Rather, the Rich Text Editor feature used within content fragments may be what's triggering the XSS scan.