Expand my Community achievements bar.

Radically easy to access on brand approved content for distribution and omnichannel performant delivery. AEM Assets Content Hub and Dynamic Media with OpenAPI capabilities is now GA.
SOLVED

HTML attributes being removed on render

Avatar

Level 2

Hello,

The HTL token with context="html" is stripping out certain HTML attributes. When XSS protection is turned off (context="unsafe"), the HTML renders as I originally expected. The following attributes are getting stripped: data, placeholder, pattern, minlength, required, and aria-*

- - - THE QUESTION - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Is there a way to whitelist one or more of those attributes somewhere so that context="html" does not remove them on render? If there is not a way to whitelist them, what would you recommend aside from changing context to unsafe?

- - - ENVIRONMENT - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

We're using AEM 6.2 in Classic.

- - - SIMPLIFIED EXAMPLE BEGIN - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

In the JS Use-api, the HTML element is defined and returned

var domFragment = '<input type="tel" id="phone" name="phone" class="helloworld" placeholder="Your phone" pattern="[0-9]*" minlength="16" maxlength="16" required aria-required="true" aria-labelledby="phone-lbl">';

return {

        htmlForm: domFragment

}

In the HTML page, the token is set as:

<sly data-sly-use.form="formbuilder.js"></sly>

<div class="form-builder">

  <form>

    ${form.htmlForm @ context='html'}

  </form>

</div>

---Expected Output (and also what I see when I change the token to context="unsafe")---

<div class="built-form">

  <form>

    <input type="tel" id="phone" name="phone" class="helloworld" placeholder="Your phone" pattern="[0-9]*" minlength="16" maxlength="16" required aria-required="true" aria-labelledby="phone-lbl">

  </form>

</div>

---Actual Output (with context="html")---

<div class="built-form">

  <form>

    <input type="tel" id="phone" name="phone" class="helloworld" maxlength="16">

  </form>

</div>

- - - END - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

In application, I am generating an entire HTML form from JSON data in the SSJS and returning the built-form to ${form.htmlForm @ context='html'}. So adding all of these fields after generating it on the serverside would be 1) Awkward, and 2) Cumbersome.

Thank you for your <input>.

1 Accepted Solution

Avatar

Correct answer by
Employee

You can overlay /libs/cq/xssprotection/config.xml to /apps and add your attributes in the config. You can look at XSS Filter issue with the target attribute of the a tag

View solution in original post

2 Replies

Avatar

Correct answer by
Employee

You can overlay /libs/cq/xssprotection/config.xml to /apps and add your attributes in the config. You can look at XSS Filter issue with the target attribute of the a tag

Avatar

Level 2

This was exactly what I was looking for. The included cross-post also helped demonstrate the execution of your solution. I had looked for something like that before posting here, but missed that one. Well done! Thank you!