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.
SOLVED

[xssprotection] How to allow "transform" style for inline CSS ?

Avatar

Level 2

Hi guys ,

 

I am allowing SVG graphic attributes and elements ( https://developer.mozilla.org/en-US/docs/Web/SVG )  in /apps/cq/xssprotection/config.xml .

But I am not able to allow transform property for CSS . 

I have tried adding the below code in embed component as HTML but still AEM is trimming that piece of code ( Please find code and screenshots below  ) . 

<svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="noise1" x="0" y="0" width="100%" height="100%">
    <feturbulence basefrequency="0.025" />
  </filter>
  <filter id="noise2" x="0" y="0" width="100%" height="100%">
    <feturbulence basefrequency="0.05" />
  </filter>

  <rect x="0" y="0" width="200" height="200" style="filter: url(#noise1);" ></rect>
  <rect
    x="0"
    y="0"
    width="200"
    height="200"
    style="filter: url(#noise2); transform: translateX(220px);" ></rect>
</svg>

 

HTML Code in browser  -- 

RahulKu8_1-1714481193427.png

 

 

tried code under <css-rules> tag --> 

 

<property name="transform">
       <literal-list>
           <literal value="translateX"/>
       </literal-list>
       <regexp-list>
           <regexp name="anything"/>
       </regexp-list>
</property>

 

Can anyone please help regarding this issue ? 

Thank You

 

 

1 Accepted Solution

Avatar

Correct answer by
Level 2

Hi @gkalyan , I can't modify server's headers and <meta> tag solution is also not resolving the issue .

So , what I understand is /libs/cq/xssprotection/config.xml ( overlayed by /apps/cq/xssprotection/config.xml ) provides XSS protection mechanism  which filters out all user-supplied content ( in my case , code is being added in embed component  as HTML ) . 

And by default there is no rule provided for "transform" property and that's why the same property is getting removed in browser .

View solution in original post

7 Replies

Avatar

Community Advisor

Hi @RahulKu8 , Can you please try by updating /apps/cq/xssprotection/config.xml as follows.

 

Add the regex pattern for transform property under <common-regexps> as below

 

<regexp name="CSStransform" value="translateX\((-|\+)?0|(-|\+)?([0-9]+(\.[0-9]+)?)(em|ex|px|in|cm|mm|pt|pc))"/>

 

and update <css-rules> tag  with 

 

<property name="transform">
			<regexp-list>
				<regexp name="CSStransform"/>
			</regexp-list>
		</property>

 

 

Avatar

Level 2

Thank you @sravs  for suggestion , but still code is not reflecting in browser .

And I have also tried with translateX in CSStransform value .

Avatar

Community Advisor

HI @RahulKu8 

You can try Implementing a CSP header in your web server configuration or meta tags in your HTML. You can specify a policy that allows inline styles, including the transform property.

 

You can configure your web server to return the Content-Security-Policy HTTP header with the rules 

Content-Security-Policy: default-src 'self'; style-src 'self' 'unsafe-inline';

 

If you cannot modify your server’s headers, you can use a <meta> tag in your HTML document like below:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline';">

 

Reference: https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP

Avatar

Community Advisor

@RahulKu8 Did you try this option of setting the HTTP header and meta tags?

 

Interesting to see if it resolved or something else is still blocking it.

Avatar

Correct answer by
Level 2

Hi @gkalyan , I can't modify server's headers and <meta> tag solution is also not resolving the issue .

So , what I understand is /libs/cq/xssprotection/config.xml ( overlayed by /apps/cq/xssprotection/config.xml ) provides XSS protection mechanism  which filters out all user-supplied content ( in my case , code is being added in embed component  as HTML ) . 

And by default there is no rule provided for "transform" property and that's why the same property is getting removed in browser .