How do you render html in jcr type:String field throu...

[mpalme1]

I've got several type:String fields in my jcr properties that I need to render through the htl script of a custom component. Don't know if this matters, but these String fields are populated from multi-line fields of a content fragment. 

In my component code, I have the ContentFragment, and for jcr fields that were populated by single-line text fields on the content fragment model (and thus have no html tags in them), they render fine if I do something like this:

	@Override
	public String getTitle() {
		ContentElement titleElement = pageContentFragment.getElement("insight-title");
		return titleElement.getContent();
	}

 and then in my htl, something like this:

 <section
 	data-sly-use.insight="com.ab.bernstein.core.models.InsightHero" 
 	data-sly-use.placeholderTemplate="core/wcm/components/commons/v1/templates.html"  	
 	>
    <div>
        <h1>${insight.title}</h1>
    </div>
 </section> 

But for those fields that have html tags like this:

The same approach displays the p tags on the page instead of inserting them into the html dom. The actual dom generated looks like this:

<p>&lt;p&gt;Texting with your feet is a rare skill.&lt;/p&gt;</p>

Is there a way from within my component code to prevent AEM from escaping the HTML like this?

[vanegi · Accepted solution]

Please check https://helpx.adobe.com/experience-manager/kb/target-attribute-issue-tag.html and see if that helps. Need to update XSS filter config as per the document.

To protect against cross-site scripting (XSS) vulnerabilities, HTL automatically recognises the context within which an output string is to be displayed within the final HTML output, and escapes that string appropriately.

It is also possible to override the automatic display context handling with the context option.

${properties.jcr:title @ context='html'}  <!--/* Use this in case you want to output HTML - Removes markup that may contain XSS risks */-->

${properties.jcr:title @ context='text'}  <!--/* Use this for simple HTML content - Encodes all HTML */-->

${properties.jcr:title @ context='elementName'}  <!--/* Allows only element names that are white-listed, outputs 'div' otherwise */-->

${properties.jcr:title @ context='attributeName'} <!--/* Outputs nothing if the value doesn't correspond to the HTML attribute name syntax - doesn't allow 'style' and 'on*' attributes */-->

${properties.jcr:title @ context='attribute'}  <!--/* Applies HTML attribute escaping */-->

${properties.jcr:title @ context='uri'}  <!--/* Outputs nothing if the value contains XSS risks */-->

${properties.jcr:title @ context='scriptToken'}  <!--/* Outputs nothing if the value doesn't correspond to an Identifier, String literal or Numeric literal JavaScript token */-->

${properties.jcr:title @ context='scriptString'}  <!--/* Applies JavaScript string escaping */-->

${properties.jcr:title @ context='scriptComment'} <!--/* Context for Javascript block comments. Outputs nothing if value is trying to break out of the comment context */-->

${properties.jcr:title @ context='scriptRegExp'}  <!--/* Applies JavaScript regular expression escaping */-->

${properties.jcr:title @ context='styleToken'}  <!--/* Outputs nothing if the value doesn't correspond to the CSS token syntax */-->

${properties.jcr:title @ context='styleString'}  <!--/* Applies CSS string escaping */-->

${properties.jcr:title @ context='styleComment'}  <!--/* Context for CSS comments. Outputs nothing if value is trying to break out of the comment context */-->

${properties.jcr:title @ context='comment'}  <!--/* Applies HTML comment escaping */-->

${properties.jcr:title @ context='number'}  <!--/* Outputs zero if the value is not a number */-->

${properties.jcr:title @ context='unsafe'}  <!--/* Use this at your own risk, this disables XSS protection completely */-->