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

[satzlinger]

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?

[TarunKumar]

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!

[satzlinger]

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.

[krishna_sai]

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

[satzlinger]

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

[EstebanBustamante]

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:

[satzlinger]

@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 '