CODEWITHSUNDEEP
aemsightlyhtl
mrjayviper
mrjayviper

Reputation: 2388

a tag disappearing in rendered HTML (using HTL in href property)

so I have this piece of HTL

<div class="col-lg-6"><a href="${properties.targetURL@context='uri'}" class="black_transparent_button">View all fishes|${properties.targetURL}</a></div>

When I view the page (view as published) in my local AEM, this is the rendered HTML

<div class="col-lg-6">View all fishes|/content/myhost/en/fishes.html</div>

as can be seen, the a tag has disappeared.

As a test, I tried using the relative link directly like this:

I tried with/without context=uri and I get the same issue.

<div class="col-lg-6"><a href="/content/myhost/en/fishes.html" class="black_transparent_button">View all fishes</a></div>

And the a tag disappeared as well. Using full URL (i.e. http://www.myhost.com/content/myhost/en/fishes.html) works fine.

Any ideas on how to fix it?

Thanks

Edit: I also tried the second code (the one using relative URL) in our testing environment (in the cloud and hosted by Adobe) and I get the same issue.

Upvotes: 0

Views: 2360

Answers (2)

Sandeep Kumar
Sandeep Kumar

Reputation: 1856

Day CQ Link Checker Transformer configuration validates if the URL is valid content resource on a instance, if not complete link tag is removed (Absolute URLs excluded). Following is the snapshot of configuration

enter image description here

Following could be reasons

  1. Relative URL is has valid URL characters but content path is not a valid resource on instance.
  2. URL is not a valid resource per resource resolver mappings

You could verify by Disable Checking. If this is working in this case double check URL paths are valid resources or not.

Upvotes: 1

Ahmed Musallam
Ahmed Musallam

Reputation: 9753

This happens, most likely, because your properties.targetURL is a malformed URL, and the removal of the <a> is most likely due to antiSammy which is used in HTL implementation for XSS protection and HTML validation.

Take the following examples (AEM 6.3):

<a href="${'https://www.google.com'}">google</a> <!-- google -->
<a href="${'hi'}"></a> <!-- hi -->
<a href="${'https://hello'}"> hello  </a> <!-- hello -->
<a href="${null}"> null </a> <!-- null -->

renders:

<a href="https://www.google.com">google</a> <!-- google -->
<!-- hi -->
<a href="https://hello"> hello  </a> <!-- hello -->
<a> null </a> <!-- null -->

Note that I'm using HTL expressions ${} here, not a direct href="string" and only HTL expressions are validated.

The one link that was not a correctly formatted url, the <a> tag was removed. Also note, that if the expression evaluates to null, the <a> is rendered but the href is removed per the HTL spec.

Hope this helps.

PS, you can use HTL REPL to test this fast without having to setup a component.

Upvotes: 1

Related Questions