AEM property displays correctly in <p> but not in href attribute - href

I'm making a custom multifield breadcrumb component with this code.
<ul class="breadcrumb-list">
<li class="breadcrumb-item" data-sly-repeat.textItem="${properties.text}">
<a class="breadcrumb-link" href="${properties.link['textItemList.index']}">${textItem}</a>
<p class="works">${properties.link[textItemList.index]}</p>
<p class="doesn't work">${properties.link['textItemList.index']}</p>
<span>//</span>
</li>
</ul>
I've added the paragraph elements to show how my properties display.
This is the html output:
If I remove the single quotes as in p class="works", the value displays the breadcrumb item's link value. If I add the single quotes as in p class="doesn't work", nothing displays.
You'd think that removing the quotes from the same value in the href would display my link as the href; however, when i remove the quotes in the href value, it removes the anchor tag altogether. when i add them back in, i can still see the anchor tag, but there is no href attribute at all, only the breadcrumb-link class.
How can I get the href value to show a link?

AEM evaluates al href before rendering the resulting html.
If the link is invalid it will not put anything under href
If the expression is invalid it will wipe out all the section
Have you tested with valid links?
This will not work only with plain text.

when i add them back in, i can still see the anchor tag, but there is no href attribute at all, only the breadcrumb-link class. - That is the expected behaviour. Because you have an array of links and putting the quotes will try to obtain an entry in the array by the 'textItemList.index' key, like you would do in a map, instead by the index. Nothing is found of course, so the anchor point is rendered without the href attribute.
when i remove the quotes in the href value, it removes the anchor tag altogether. - That is not the expected behaviour. Since you exemplify that inside the paragraph it works, then I suppose this is a display context issue. HTL should implicitly uses the uri context for href attribute values and text for content inside HTML elements according to the documentation.
Try explicitly mention the context like href="${properties.link[textItemList.index] # context = 'uri'}" or href="${properties.link[textItemList.index] # context = 'text'}", or check the contexts mentioned in the doc - unsafe should ultimately do the job.

None of this context worked for me, and Im facing the same issue, if I remove the single quote "'" it will display the href just ok, but since my href includes it none of the context mentioned above is doing the job.
Is there any solution for this out there?

Related

how can I truncate text and remove html tags in django template

I've used truncatechars but if text contains a html tag, it will show the tag for me.
{{content.text|safe|truncatechars:140}}
for example displays something like this:
<p>hi</p>
I want to remove p tag.
Updated along with question:
To completely remove the tags before truncating, use:
{{ content.text|striptags|truncatechars:140 }}
Original answer:
To ensure the tags are broken correctly, you'll want to use the truncatechars_html template filter.

OrchardCMS Replacement Tokens for Query Results displaying HTML tags instead rendering them

I am having problems understanding the token system for the output of query / projections.
If I leave the property as is it displays the text content with HTML formatting intact.
But I need to wrap it with a tag, the html tags get displayed as text.
Rewrite Results -> Rewrite output
<div class="collapse" id="toggle_{Content.Id}">
{Content.Fields.CaseStudy.ClientChallenge} </div>
I am trying to create a collapsible text area, I already have a button that hides/unhides the content.
Why is it displaying as text instead of rendering the tags properly.
I think this is because I don't know how replacement tokens work.
Another example problem is up one level on the edit Layout, I want to set the item class to work-item {Category}, Category being the name/title of a property, which I am using for grouping.
Right above the projection: I want to include some html that lists all the Categorys in a ul i.e. data-filter=".experiential" I have tried things like: work-item {Category} and work-item {Content.Fields.CaseStudy.Category}. Category is a "term" (?) from a taxonomy.
I feel like I am failing to understand how it all works.
Submitted as a bug https://github.com/OrchardCMS/Orchard/issues/7355
Will edit and post if it is fixed. In case anoyong else comes across this issue.

how to pass controls value to url?

I have a nintex form "A", that has a lot of controls.
I used a label control and in edit source i used html below to link to another form "B".
<a onclick="javascript:SP.UI.ModalDialog.showModalDialog({ url:'http://servername/.../newform.aspx' }); return false;" href="#">my link</a>
that works fine.
But I want to show one of form "A"s controls value in form "B".so i want to pass control value with this url to that form using querystring.Is it possible?
i mean use for example ?project=contolname at the end of url.
you can just keep it the way you have it and append ?project=contolname to the end of the URL and it will go through fine.

Binding HTML strings in Ember.JS

I am using a third party indexing service (Swiftype) to search through my database. The returned records contains a property called highlight. This simply adds <em> tags around matching strings.
I then bind this highlight property in Ember.JS Handlebars as such:
<p> Title: {{highlight.title}} </p>
Which results in the following output:
Title: Example <em>matching</em> text
The browse actually displays the <em> tags, instead of formatting them. I.e. Handlebars is not identifying the HTML tags, and simply printing them as a string.
Is there a way around this?
Thanks!
Handlebars by default escapes html, to prevent escaping, use triple brackets:
<p> Title: {{{highlight.title}}} </p>
See http://handlebarsjs.com/#html-escaping
Ember escapes html because it could be potentional bad code which can be executed. To avoid that use
Ember.Handlebars.SafeString("<em>MyString</em>");
Here are the docs
http://emberjs.com/guides/templates/writing-helpers/
if you've done that you could use {{hightlight.title}} like wished,...
HTH

Could anyone tell me why / how this XSS vector works in the browser?

I have suffered a number of XSS attacks against my site. The following HTML fragment is the XSS vector that has been injected by the attacker:
<a href="mailto:">
<a href=\"http://www.google.com onmouseover=alert(/hacked/); \" target=\"_blank\">
<img src="http://www.google.com onmouseover=alert(/hacked/);" alt="" /> </a></a>
It looks like script shouldn't execute, but using IE9's development tool, I was able to see that the browser translates the HTML to the following:
<a href="mailto:"/>
<a onmouseover="alert(/hacked/);" href="\"http://www.google.com" target="\"_blank\"" \?="">
</a/>
After some testing, it turns out that the \" makes the "onmouseover" attribute "live", but i don't know why. Does anyone know why this vector succeeds?
So to summarize the comments:
Sticking a character in front of the quote, turns the quote into a part of the attribute value instead of marking the beginning and end of the value.
This works just as well:
href=a"http://www.google.com onmouseover=alert(/hacked/); \"
HTML allows quoteless attributes, so it becomes two attributes with the given values.