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
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
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)
LockerWindow.js
NonLockerWindow.cmp (use version 39 through bundle version settings)
NonLockerWindow.js
Output:
Let’s click each of the three buttons and see the alerts below:
App:
Non Locker Component
Locker Service Component:
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
Author:
 |
AJOMON JOSEPH Senior Salesforce Architect  Connect me on LinkedIn Follow me on Twitter @apexcoder Subscribe to my blog https://apexcoder.com Email me ajomon@apexcoder.com |
