Allow slash in style aspect-ratio property value in Embed html | Community
Skip to main content
S
satzlinger
Level 2
June 12, 2023

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

  • June 12, 2023
  • 3 replies
  • 1232 views

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

3 replies

TarunKumar
Community Advisor
TarunKumarCommunity Advisor
Community Advisor
June 12, 2023

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!

    S
    satzlingerAuthor
    Level 2
    June 12, 2023

    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
      Community Advisor
      krishna_saiCommunity Advisor
      Community Advisor
      June 12, 2023

      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/embed.html?lang=en#security

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

      Hope this helps,

      Krishna

        S
        satzlingerAuthor
        Level 2
        June 12, 2023

        @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
          Community Advisor and Adobe Champion
          EstebanBustamanteCommunity Advisor and Adobe Champion
          Community Advisor and Adobe Champion
          June 12, 2023

          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:

           

           

          Esteban Bustamante
            S
            satzlingerAuthor
            Level 2
            June 13, 2023

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

              Terms & ConditionsAccessibility statement

              Loading footer...