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.

Allow slash in style aspect-ratio property value in Embed html

Avatar

Level 2

Hello, our client wants to add html code that includes the aspect-ratio style property with the value 16/9 to the embed html like this:

 

<div style="max-height: 900px;aspect-ratio: 16/9;margin: auto;">

 

I allowed the aspect ratio for the style property in the xssprotection config.xml and want to allow any value for the aspect-ratio like this

 

<property name="aspect-ratio" description="">
<regexp-list>
<regexp name="anythingWithSlash"/>
</regexp-list>
</property>

 

I tried it with the out of the box anything and also added my own anythingWithSlash

<regexp name="anything" value=".*"/>
<regexp name="anythingWithSlash" value=".*|\/"/>

but the result is always 

aspect-ratio: 16 9;

 without the slash. 

 

Are slashed removed on a deeper level?

Topics

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

6 Replies

Avatar

Community Advisor

Hi @satzlinger ,

I'd recommend to use separate CSS file to use all these CSS  properties. For that particular you can add aspect ratio as below:

calc(16/9)

 
calc() can be basically used to calculate percentage, time, number, frequency and angle.

Hope it helps!

Avatar

Level 2

Hi @TarunKumar Thank you for your fast reply.

I do not think this is possible in out use case as editors will add an Embed component like in the Screenshot with code copied from another service and expects that it works. My goal is not keep the slash they entered in the aspect ratio value.

ScreenShot from 2023-06-12 12-24-32.png

 

Avatar

Community Advisor

Hi @satzlinger , 
By default for security purposes, all script and style attributes are removed from the output. However you can override the rules but remember if we override rules that will impact all the components not just embed component.
https://experienceleague.adobe.com/docs/experience-manager-core-components/using/wcm-components/embe...

It is suggested to create your own HTML Inject component to include such Html codes on pages.

Hope this helps,

Krishna

Avatar

Level 2

@krishna_sai Thank you for your answer. As stated in the original post I am aware of the xssprotection and already enabled the properties I need. The question is why the slash is removed by aem and how I can prevent this.

Avatar

Community Advisor

No, I think that the regex is being evaluated at the attribute level through the single quotation symbol ''. 
So this worked for me:
Overlay the xssprotection and add the following rule:

<property name="aspect-ratio" description="This property sets the aspect Ratio of an element.">
<regexp-list>
<regexp name="anything"/>
</regexp-list>
</property>

Use the value in quotation aspect-ratio:'16/9', the result:

Esteban666_1-1686584632179.png

 

 



Esteban Bustamante

Avatar

Level 2

@EstebanBustamante Thank you for your input.

The aspect ratio property with the value 16/9 also works for me when I manually add ' before and after 16/9.

I also know it works when using the number 1.77 instead of 16/9.

 

The goal would be to get the code working without influencing what the editors copied from the Service provider.

For now the workaround is fine, but we would still like to fully support the aspect ratio without '