Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
Read More & Register today!

AntiSamy XSS Rules for Media Queries

Avatar

Level 2
Level 2
6/9/21 8:00:59 AM

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.

Content Fragments

Views

1.4K

Replies

6
Sign in to like this content

Total Likes

Translate
Translate
6 Replies

Avatar

Community Advisor
Community Advisor
6/9/21 10:08:57 AM

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



Arun Patidar

Views

1.4K

Replies

4
Sign in to like this content

Total Likes

Translate
Translate

Avatar

Level 2
Level 2
6/9/21 10:31:39 AM
In response to arunpatidar
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.

Views

1.3K

Replies

0
Sign in to like this content

Total Likes

Translate
Translate

Avatar

Community Advisor
Community Advisor
6/10/21 12:15:38 PM
In response to arunpatidar
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

Views

1.3K

Replies

0
Sign in to like this content

Total Likes

Translate
Translate

Avatar

Level 2
Level 2
6/11/21 8:02:38 AM
In response to arunpatidar
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.

Views

1.3K

Replies

0
Sign in to like this content

Total Likes

Translate
Translate

Avatar

Level 2
Level 2
6/14/21 8:33:18 AM

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.

Views

1.3K

Replies

0
Sign in to like this content

Total Likes

Translate
Translate
Related Conversations
Adobe Developers Live, November 2024, On-Demand Session | Orchestrating Commerce APIs for headless implementations

Views

37

Likes

0

Replies

0
Adobe Developers Live, November 2024, On-Demand Session | Dynamic Media Masterclass: Best Practices for Performant Delivery

Views

43

Likes

0

Replies

0
Version Purge on aem as a cloud service Query

Views

194

Likes

0

Replies

5
Best Practices for Implementing Adobe Experience Manager (AEM) in 2024

Views

276

Likes

0

Replies

0
curl command for SSL setup

Views

124

Likes

0

Replies

2