Locker Service in Lightning

Definition

Locker Service is a security architecture introduced by salesforce to improve security and performance in the aura lightning components.

How it works

Locker Service works by removing access or isolating the components in one namespace to components from another namespace.

This enables lightning components to prevent issues like below :

• XSS and security issues like it which prevents unauthorized access to component markup cross domain.
• Other namespace components reading and modifying markup of some other namespace components. This was possible in managed package components but now lockerservice does not allow it.
• Unauthorized access to third party APIs which would interact directly with the aura component markup and JavaScript functions in the client side controller.

Also, lockerservice enables the following best practice features :

• Better modularity in JavaScript code with restricting access for each component.
• Better versioning of client side JavaScript code, which is almost similar to REST APIs versioning.
• Easier way to securely use third party JavaScript libraries like Angular, ReactJS etc.
• Using the ‘proxy’ object to read and write lightning attribute values, which enables better security.
• Better way to use inheritance in JavaScript code, which is not easy to do without the additional security.

Example

Let’s set up a single form with a div and an lightning input and give them both aura ids. Now the div and its content reside in the same default ‘c’ namespace. But the lightning input resides in the standard ‘lightning’

.


Markup :

Text Inside Div

And here is the javascript code :

({
	checkLock : function(component, event, helper) {
		
        // This works because the div is in the same namespace
        // 
		console.log("div : ", cmp.find("div-id").getElement());
        
        // This does not work as the lightning:input tag is in a different namespace
        // 
      console.log("input field : ", cmp.find("input-id").getElement());
	}
})

When we try and fetch the elements in JavaScript, we are able to do so with the div but it throws an error when we try to fetch the content of the lightning input, because it resides in a different namespace.