Gabriel Walt gabrielwalt

As Sightly only knows the syntax of HTML and not of JS or of CSS, it can automatically execute the appropriate escaping and cross-site scripting protection for expressions located in HTML, but it cannot do that for expressions located in JS or in CSS contexts. To remain as secure as possible, Sightly makes it mandatory to provide explicitly the context in those two contexts.

For Handlebar templates, this is unfortunate though as it is actually not JavaScript, but HTML that is located within the script elements, which Sightly would be able to parse properly. This trick shows that by separating the Handlebar script into a dedicated file, Sightly then parses that template as HTML again.

Without separating this example into two distinct files, the expression of the example should have been written as follows: ${properties.jcr:title @ context='text'}

The list of all available contexts can be found here: http://docs.adobe.com/content/docs/en/aem/6-0/develop/sightly.html#Display%20Context

1. Use statement

template.html

<sly data-sly-use.logic="logic.js">
    <h1>${logic.pageTitle}</h1>
</sly>

	var SlingSettingsService = Packages.org.apache.sling.settings.SlingSettingsService;

	use(function () {
	// Get runmodes and transform them into an object that is easier to read for Sightly
	var runmodesObj = {};
	var runmodesSet = sling.getService(SlingSettingsService).getRunModes();
	var iterator = runmodesSet.iterator();

	while (iterator.hasNext()) {
	runmodesObj[iterator.next()] = true;

	use(function () {
	var myObj = {
	foo: "bar",
	arr: [1,2,3,4,5,6,7,8,9,10]
	};

	return {
	json: JSON.stringify(myObj)
	};
	});

	package org.summit.lab.core.models;

	import java.util.HashMap;
	import java.util.Iterator;
	import java.util.Map;

	import javax.annotation.PostConstruct;
	import javax.inject.Inject;
	import javax.jcr.RepositoryException;
	import javax.jcr.Session;

	/content
	/example
	@jcr:primaryType = "nt:unstructured"
	@jcr:title = "Outer Component"
	@sling:resourceType = "example/components/outer"
	/one
	@jcr:primaryType = "nt:unstructured"
	@jcr:title = "Inner Component One"
	@sling:resourceType = "example/components/inner"
	/two

	/content
	/example
	@jcr:primaryType = "nt:unstructured"
	@jcr:title = "Outer Component"
	@sling:resourceType = "example/components/outer"
	/apps
	/example
	/components
	/inner
	@jcr:primaryType = "cq:Component"

	<sly data-sly-template.card="${@ img, title, content}">
	<div class="card">
	<img src="${img}" alt/>
	<h2>${title}</h2>
	<div class="content" data-sly-test="${content}" data-sly-call="${content}"></div>
	</div>
	</sly>

	<sly data-sly-template.example>
	<p>This example shows how to pass markup to a template</p>

	#!/bin/bash
	mvn archetype:generate \
	-DarchetypeGroupId=com.adobe.granite.archetypes \
	-DarchetypeArtifactId=aem-project-archetype \
	-DarchetypeVersion=22 \
	-DgroupId=org.myorg \
	-DartifactId=mysite \
	-DartifactName="My Site" \
	-Dversion=0.0.1-SNAPSHOT \
	-Dpackage=org.myorg.mysite \