aura:unescapedHtml In Lightning Component Salesforce

Hello friends, In this tutorial, we are going learn aura:unescapedHtml In Lightning Component. This is a very useful pre-built component which is used to render pre-formatted HTML

aura:unescapedHtml In Lightning Component Salesforce

aura:unescapedHtml is used to render pre-formatted HTML. The value assigned to this component will be rendered without modifying its content. For Example, sometimes you need to render HTML content that is generated on the server side and add it to dom. You must escape any HTML if necessary or your app might be exposed to security vulnerabilities.

The syntax for defining aura:unescapedHTML

 <aura:unescapedHtml value="{!v.attr}"/>.

To avoid XSS vulnerability you must sanitize value which you are going to assign this component.
Let’s see an example :

Step 1: Login to your Salesforce account and Open Developer Console.

Step 2: Create a Lightning Component called LightningQuickActionExample. Write the following code in:

UnescapedHTML.cmp:

<aura:component >
<aura:attribute name="htmlval" type="String"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<div>
The unescaped HTML value : <aura:unescapedHtml value="{!v.htmlval}" />
The value of attribute :{!v.htmlval}
</div>
</aura:component>

UnescapedHTML.css

.THIS .Heading {
font-size:24px;
font-weight:bold;
}

UNEScapedHTML.Controller.Js

({
doInit : function(component, event, helper) {
component.set("v.htmlval", "<h1 class='Heading'>Hello World!!</h1>");
}
})

TEST THE COMPONENT.

Create a New Lightning Application and replace the following code.

<aura:application extends="force:slds" >
 
<c:UnescapedHTML/>
 
</aura:application>

Output:

View More:

• Select Multiple values using lightning:dualListbox in Lightning Component Salesforce.
• Attribute in Lightning Component
• How to dynamically bind picklist field value in Lightning Component
• What is Trigger Factory in Salesforce?.

Conclusion:

I hope you would love this post. Please don’t hesitate to comment for any technical help. Your feedback and suggestions are important to us.

Thank you.