Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

AntiSamy XSS Rules for Media Queries

Avatar

Avatar
Level 1
crabtreej
Level 1

Likes

0 likes

Total Posts

5 posts

Correct Reply

0 solutions
View profile

Avatar
Level 1
crabtreej
Level 1

Likes

0 likes

Total Posts

5 posts

Correct Reply

0 solutions
View profile
crabtreej
Level 1

09-06-2021

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>
antisamy content fragment CSS html xss xssapi xssprotection
View Entire Topic

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,345 likes

Total Posts

3,220 posts

Correct Reply

914 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,345 likes

Total Posts

3,220 posts

Correct Reply

914 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

09-06-2021

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