Insufficient Escaping in Lightning Components

Each component in a bundle is responsible for sanitizing the input provided to it by parent components, apps, or in URL parameters.

The security boundary of an individual component is the component bundle. Each component in a bundle is responsible for sanitizing the input provided to it by parent components, apps, or in URL parameters. Public or global component attributes are assumed to contain attacker-controlled inputs unless sanitized by the component in an onInit handler.

Failure to sanitize inputs can lead to cross-site scripting (XSS) or URL redirection attacks.

Aura Example

In this Aura code, a component reads data from a global attribute and then renders it to the document object model (DOM) without sufficient escaping. One parameter has the tag unescapedHTML, which is open to exploitation. A hacker or malware can inject HTML or JavaScript into the view and trigger a cross-site scripting (XSS) attack.

1<aura:component controller="name_NewsController" access="global" extends="c:name_Name" implements="force:appHostable,flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes">
2   <aura:handler name="baseReady" event="c:name_Name" action="{!c.doInit}"/>
3   ...
4   <aura:attribute name="newsDetails" type="String" default="" access="global"/>
5   ...
6   <div class="slds-col_padded slds-size_1-of-1 textDetail">
7      <div class="slds-text-longform">
8         <aura:unescapedHtml aura:Id="newsDetail" value="{!v.newsDetails}"/>
9       </div>
10   </div>
11   ...
12</aura:component>

This Aura component code is secure because it doesn’t use the unescapedHTML.

1<aura:component controller="name_NewsController" access="global" extends="c:name_Name" implements="force:appHostable,flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes">
2   <aura:handler name="baseReady" event="c:name_Name" action="{!c.doInit}"/>
3   ...
4   <aura:attribute name="newsDetails" type="String" default="" access="global"/>
5   ...
6   <div class="slds-col_padded slds-size_1-of-1 textDetail">
7      <div class="slds-text-longform">
8         <aura:Id="newsDetail" value="{!v.newsDetails}"/>
9       </div>
10   </div>
11   ...
12</aura:component>

For more info, refer to Lightning Security in the Secure Coding Guide.