Salesforce Lightning Component LockerService Demystified

In one of our previous blog posts, we talked about the security benefits of the Lightning component LockerService. In this blog post we will take a simple example and explore how LockerService applies to base Lightning components (Lightning components with the Lightning namespace) that Salesforce is adding every release.

Let’s take an example of the below code that uses the lightning:input component from Salesforce.

The component will look like the screenshot below when you preview your application.

Once you click on the Search button notice this ugly error on the screen.

Analyzing the error, the failing line is of Javascript code as shown below:

var searchTerm = component.find(‘searchBox’).getElement().value;

If you read Lightning component developer guides and know the different functions and methods components support, the above code might seem perfectly right. You might have used the find function and getElement many times on the DOM element to find the DOM nodes successfully, but why is this an issue now?

Now let’s change the code to use our own input tag instead of the one provided by Salesforce. Let’s modify the component code as shown below. Observe the one in bold that shows the changes we did. In a nutshell, we added our own input tag.

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
 <aura:attribute name="searchTerm" type="String" />
        <lightning:layout multipleRows="true" horizontalAlign="center" verticalAlign="center">
            <lightning:layoutItem flexibility="auto" size="6">
               <div class="slds-form-element">
                <label class="slds-form-element__label" for="text-input-id-1">
                   Enter search term
                 </label>
                  <div class="slds-form-element__control">
                    <input type="search" id="text-input-id-1" class="slds-input" placeholder="Enter Search Term" aura:id="searchBox"/>
                  </div>
              </div>
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" size="4" padding="horizontal-small">
                 <lightning:button variant="brand" label="Search" title="" onclick="{! c.handleClick }" />
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-large" size="6">
              <p> You searched for {!v.searchTerm}</p>
            </lightning:layoutItem>
        </lightning:layout>
</aura:component>

Now this works without any issues. The code line var searchTerm = component.find(‘searchBox’).getElement().value; actually works now.

So the issue happened when we used one of the standard components from Salesforce with the lightning namespace. The answer for this behavior is Salesforce LockerService.

As per the LockerService security feature, one cannot access DOM elements that are not part of the component. lightning:input belongs to the lightning namespace and hence LockerService prevents the component from accessing the DOM.

How would we do this without accessing the input value by using lightning:input? Note that the components in the lightning namespace (Base Components) will have attributes and out-of-the-box events to simplify a lot of custom code.

So, we can directly bind the attribute to the lightning:input and out-of-the-box two-way data binding takes care of it. To do this change the code as below.

Conclusion

If you are building a Lightning Component using a mix of out-of-the-box provided base components and custom markup, remember these LockerService principles. It’s always good to browse through the documentation of the base components (Note: you can access the new documentation about base components using the url format  https://.lightning.force.com/componentReference/suite.app) from within your org to learn the attributes and about their usage. Standard out-of-the-box components are great, but some business and performance requirements of the application might be complex enough to adopt a completely custom approach and build your own.

 

If you’re looking for experts to keep your app up to speed with the latest and greatest in the development world, why not schedule a consultation with our team?