0
votes

In my author I am editing a text component and adding the following html:

<li><span><a href="#" class="tt" data-toggle="popover" data-html="true" data-placement="top" data-content="Test text" role="button">test text</a></span></li>

However, When I switch to preview mode the html that render is:

<li><span><a class="tt" href="#">Test text</a></span></li>

It looks like AEM is stripping out some attributes. Any ideas why?

MORE INFO After more reading, I think I narrowed it down to adding the attributes to /libs/cq/xssprotection/config.xml. However, pages stop loading when I add this:

    <tag name="div" action="validate">
        <attribute name="align"/>
        <attribute name="data-toggle">
            <regexp-list>
                <regexp name="data-toggle"/>
            </regexp-list>
        </attribute>
        <attribute name="data-html">
            <regexp-list>
                <regexp name="data-html"/>
            </regexp-list>
        </attribute>
        <attribute name="data-placement">
            <regexp-list>
                <regexp name="data-placement"/>
            </regexp-list>
        </attribute>
        <attribute name="data-content">
            <regexp-list>
                <regexp name="data-content"/>
            </regexp-list>
        </attribute>
    </tag>

Do I have the incorrect syntax?

1

1 Answers

0
votes

This is because you are using the OOTB text component and the OOTB text component uses <cq:text> tag to display the text configured in the component. Something similar to the one shown below.

<cq:text property="text" escapeXml="true" ... />

Behind the scenes, when the escapeXml attribute is set to true, it internally calls the #filterHTML method of XSSAPI, the output of which stripped all your data attributes.

You can overlay the text component and remove the escapeXml attribute if required or implement your logic after overlaying as per the requirements.