Why there is a need for Lightning Locker? – Lightning Locker Services Part 1

Why there is a need for Lightning Locker? – Lightning Locker Services Part 1

Lightning Locker- A question in every Lightning Developer’s mind for which they are still seeking the clear explanation. With a series of posts, I will try my best to explain this in simple words with a few examples along the way.

 

In simple English, 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. This virtual browser sits in front of your real browser which is unsafe as you get access to complete DOM and can easily manipulate it.

 

Not simple enough? No worries!! Let’s take one step at a time.

Step #1- Why there is a need for Lightning Locker? – Let’s go through this post to find out the answer of this question.

Why do we say that browsers can be insecure?

Your browser is just an application to compile HTML and Javascript code to generate web pages. It is medium to interact with the end user. However, it cannot distinguish between a genuine user or a hacker. So this part needs to be taken care by the Javascript running inside the browser/webpage. The javascript should be smart enough to tell the difference between a hacker and genuine user based on their interaction or activity with the webpage.

What is malicious javascript?

If you talk about javascript, it barely has access to your operating system, then how it can be malicious. Well, if you look from another perspective a javascript code has access to your webpage and can perform tasks like getting cookies information, sending HTTP request to the external server using XHR or getting user sensitive data stored in forms. So these features can make your javascript malicious if not being used by an authorized person.

What is cross-site scripting(XSS)?

XSS is a malicious javascript code injected within a web-page by the end user (hacker). This javascript code can be injected in several ways like below:

    • Injecting Via Form – In this case, the hacker needs to identify an input element where he can paste his malicious javascript code. For example, let’s have a look at below login form, a user can submit a malicious javascript code which will execute on the login page. On this example, I am simply writing an alert box using, <script>alert('you are hacked');</script>However, in real life, the hacker can inject a script to send the user’s credential to an external server.
    • Injecting Via Url – In this case, the hacker replaces the URL parameters with a malicious javascript code which will be executed by the webpage. Something like this http://sfdcfacts.com?postId=<script>alert('you are hacked');</script>

What is the solution?

XSS attacks are the main challenge in the web-development world and there is no straightforward and 100% working solution to prevent these attacks. The common technique to avoid these attacks are:

  • Data Validation – Validating input field data before saving it or processing it
  • Data Filtering – Filter malicious keywords from input field data
  • Data Escaping – Character escaping is another popular solution where some characters are replaced with another word/character. It is widely supported by all popular languages.
  • Deep Testing – A thorough and deep testing is a must to test this attack.

However, there are new security standards being introduced which make this job easier and can control these attacks to an extent. One of these solutions is “JavaScript Strict Mode”.

What is JavaScript Strict Mode?

“strict mode” was introduced in JavaScript version ES5. Strict mode makes it easier to write secure JavaScript. Strict mode does not allow you to assign values to the variables which are not declared. For example below code will throw an error:

"use strict";
x=5;//will throw an error as x is not declared

where below code will not throw an error:

"use strict";
var x=5;//will work as x has been declaed before value assignment

This also prevents accidental global variable creation i.e. if you misspell a variable name, in previous JavaScript versions a new global variable was created, but with the strict mode in ES5, you will get an error. So if strict mode is ON, then you must:

  • Declare a variable before value assignment.
  • Attach the variable to the window object, to make it global.

How it impacts your Lightning Components?

Now we all know the power of JavaScript and how it can impact your webpage if not used in a correct way. But does it have the same impact on our Lightning Components?

No, it’s much worse. How? Let’s see.

Lightning Framework is a component-based framework, where multiple components are placed together on the same page to give you a combined output. These components can be:

  • Base lightning component (lightning namespace like lightning:button)
  • Other out of the box components (like force, ui, aura namespace)
  • Custom components (You org’s custom components, generally from “c” namespace)
  • Managed/Unmanaged package components

Having these many different components, which belongs to different namespaces on the very same webpage can be very insecure as:

  • One component can traverse the DOM of another component. That means my managed package component can read or traverse the DOM of my Org’s custom components.
  • Components can call private APIs.
  • If strict mode is not enabled (without lightning locker), can lead to other security issues.

Let’s take below-shown lightning component as an example:

Component Structure
Component Structure

In this example, I have 4 different namespace components in one single custom component. If Lightning Locker is NOT enabled, then you will see a DOM something like below:

DOM Structure
DOM Structure

So, every component belongs to the same window object hence they all will have access to each other. My managed package component can traverse through my custom component or vice versa. This is very insecure as I should not allow a managed package to read my component.

To change above behavior of Lightning Framework, Lightning Locker was introduced which restrict access to your DOM elements from a different namespace and at the same time gives complete accessibility to same namespace components.

This post explains the need of Lightning Locker Services. I will be writing follow up posts in this series to explain the Locker Service Advantages and Disadvantages, Security mechnism comes with locker services and in the end an example of Locker Service Implementation. Please do share your feedback in the comments.

#LearnShareRepeat – Let everyone learn about Lightning Locker by sharing this post.

Manish Choudhari

I am a certified Salesforce Application & System Architect and Developer working on Salesforce Technology since 2014. Currently, I have 14 Salesforce certifications along with OCPJP (Oracle Certified Profession JavaSE6 Programmer) working in Salesforce.com Hyderabad as a Technical Engineer. Writing technical blogs, learning new technologies and frameworks and sharing knowledge is my hobby.

This Post Has 7 Comments

  1. Avatar

    Nice Manish. I like your explanation.

  2. Avatar

    great content to read

  3. Avatar

    Fantastic Manish…it was very useful

  4. Avatar

    Hmm it seems like your website ate my first comment (it
    was super long) so I guess I’ll just sum it up what I had written and
    say, I’m thoroughly enjoying your blog. I as well am an aspiring blog blogger but I’m still new to the whole
    thing. Do you have any helpful hints for novice blog writers?
    I’d definitely appreciate it.

    1. Avatar

      Hey Adam,
      I am glad that you like my content. I am new to this myself and certainly not an expert in this area. However, I can share a few things that I have learned so far.

      The key to successful blogging is to write about the things you are most passionate about. While doing so keep few things in mind:
      1. Pick the right topic for your audience, it could be any topic related to your expertise which could be most useful for the audience. Should not be a broad topic like “How to learn to code?”, should be like “How to write your first program in Java”.
      2. Make your point clear and do not involve multiple things in the same article
      3. Build audience interest by showing them what they can learn from your article, what are the use cases
      4. Write it from the audience perspective, which means your audience should be able to understand and follow your article
      5. Give the link to related articles, these could be from your own website or external links

      As I said, I am not an expert but all these points come from my experience 🙂 Have a great day!!

  5. Avatar

    Good explanation in simple words …:)

Leave a Reply

Close Menu