Lightning Locker Service

Lightning Locker is a layer which sits in between your browser and DOM (document object). In other words, Lightning Locker is a virtual browser that allows only secure request to go through from client to server. This virtual browser sits in front of your real browser.  It creates a separate layer. Without such a layer it is unsafe as any one can get access to complete DOM and can easily manipulate it.

Lightning locker service is automatically enabled in all Salesforce orgs since summer 17 with the API version 40.0 and above.

Why there is a need for Lightning Locker? 

In JavaScript world there is a single Window object, representing the browser’s window, which all global objects, functions and variables are attached to.

In Lightning Components world, with the locker service enabled, the single Window object changes somewhat. Instead of a Window, your components see )a SecureWindow object which is shared among all components in the same namespace. This SecureWindow is isolated from the real Window for security reasons. In practice, this means that if you mix locker and non-locker Lightning Components on the same page, there are two different window concepts which know nothing about each other.

Example:

The example here is a lightning application that attaches a String to the Window object when it initialize and includes two components that each attempt to access this variable from the window, one at ApI 40 and one at Api 39. The app also attempts to access the variable, just to show that it is correctly attached.

Application – LockerServiceDemo.App 

Screen Shot 2018-10-02 at 9.36.29 PM.png

The above app is in version 40 and above, and it has has two components one locker and the other non locker. There is a button on the application, and one button each on locker and the other non locker component. When the application is loaded we are setting the value for window.testValue. The window is namespace and testValue is a string variable attached to the window. The goal is to click on all three buttons and display the variable value from window.testValue.

Application JS Controller – LockerServiceDemo.js

Screen Shot 2018-10-02 at 9.37.23 PM

Please see below the locker and the other non locker components and related JS Controllers:

LockerWindow.cmp  (use version 40 and above through bundle version settings)

Screen Shot 2018-10-02 at 9.39.43 PM.png

LockerWindow.js

Screen Shot 2018-10-02 at 9.48.00 PM.png

NonLockerWindow.cmp (use version 39 through bundle version settings)

Screen Shot 2018-10-02 at 9.41.52 PM.pngNonLockerWindow.js

Screen Shot 2018-10-02 at 9.48.00 PM.png

Output:

Let’s click each of the three buttons and see the alerts below:

App:

Screen Shot 2018-10-03 at 9.28.07 PM

Non Locker Component

Screen Shot 2018-10-03 at 7.48.49 PM

Locker Service Component:

Screen Shot 2018-10-03 at 9.28.07 PM

As the application is running with the locker service enabled, the variable is attached to a secure window. The locker component is also attached to same secure window. Hence in both these cases window.testValue gets the value “From the Window” as displayed above.

The non-locker service component cannot access the secure window, hence the variable is “undefined”.

 
References

https://developer.salesforce.com/blogs/developer-relations/2016/04/introducing-lockerservice-lightning-components.html

Author:

Ajomon Joseph AJOMON JOSEPH
Senior Salesforce Architect
In Connect me on LinkedIn
twitter Follow me on Twitter @apexcoder
blogger Subscribe to my blog https://apexcoder.com
email Email me ajomon@apexcoder.com

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s