Lightning Locker Services Simplified

Lightning Locker Services enforces security for your lighting component.

Consider Lightning Locker Services as a security guard for your lightning components which enhances security by isolating Lightning Components that belong to one namespace from components present in a different namespace.

It protects by using the browser content security policy (CSP) that secures the web page against cross-site scripting(XSS), clickjacking & other code injections attacks.

DOM Access Containment

Let’s update the MyAwesomeComponent which we have created in our previous part Locating The Dom.

<aura:component>
    <aura:attribute name="welcome" type="String" default="Hey, Welcome to SalesforceBlue :)" />

    <lightning:card title="AwesomeAuraComponent" aura:id="card1">
        <aura:set attribute="actions">
            <lightning:button label="Click Me!" onclick="{!c.greetings}"/>
        </aura:set>

        <p class="slds-p-horizontal_small" aura:id="p1">
            <p>{!v.welcome}</p>
        </p>
    </lightning:card>
</aura:component>	

({
    greetings : function(component, event, helper) {
       var obj = component.find("card1").getElement();
       console.log('obj : ' + obj);
    }
})

Please click on Click Me! Button. You will get an error like the below:

Why did the above error happen?

Why you were not able to use the component.find(“card1”).getElement() by giving an aura id of a lightning card?

The answer to this question is locker services.

Lightning Locker Services doesn’t allow c:MyAwesomeComponent to access the DOM for lightning:card because the card is in the lightning namespace and c:MyAwesomeComponent is in the c namespace.

A component can only traverse the DOM and access elements created by a component in the same namespace.

Secure Wrapper

Let’s modify the MyAwesomeComponent controller with the following code:

({
    greetings : function(component, event, helper) {
       var obj = component.find("p1").getElement();
       console.log('obj : ' + obj);
    }
})

Please click on Click Me! Button and observe the browser console logs.

In the above code block component.find(“p1”).getElement() don’t return an HTML element rather it returns a SecureElement. This is the wrapper for the Element object, which represents variour HTML elements.

Lightning Locker replaces instances of objects, such as components and events, with secure wrapped versions.

JavaScript Strict Mode Enforcement

Lightning Locker services enable Javascript in Aura Component to run in strict mode.

You don’t have to declare explicitly using the “use strict” in your javascript code.

If you write Javascript which doesn’t follow the strict mode, you may see some unexpected errors.

Let’s see few pointers about using strict mode in your javascript code:

• You must declare a variable before using it.
  
• You must declare an object without using it.
  
• Parameters name in a function must be unique.
  
• The libraries that your components use must also work in strict mode.
  
• Writing to a read-only property is not allowed.

Here is the complete Javascript reference for strict mode. Please feel free to visit and explore the guidelines for using strict mode.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode

Thank you for visiting SalesforceBlue.com
If you have any queries feel free to write down a comment below 🙂