Lightning Locker Service

So, what’s the frightening Lightning Locker Service? It is a combination of security features that have been implemented for you in order your Lightning Components are secure, and other components don’t break yours! So, no frightening at all, right?

With the new app-centric model introduced by Lightning Components, a Salesforce app (and thus the DOM) is going to be composed by different components, that even can be created or removed at runtime. What if a component executes some Javascript for accessing other component markup? What if a component is able of calling other component Javascript functions? What if a component is able of accessing window and do whatever it wants with it?  For controlling all of this Locker Service has born.

With Locker Service active, we have to bear in mind:

  • You won’t be able to access the part of the DOM that does not belong to your component. Same for the Javascript code.
  • Locker Service enforces that only documented APIs can be used in client side code. Despite when we write client-side code in Lightning Components we feel to be writing Javascript, really we are using a secure virtual DOM proxy, which API is documented in https://<myDomain&gt;.lightning.force.com/auradocs/reference.app, where <myDomain> is the name of your custom Salesforce domain.
  • Locker Service uses Javascript strict mode, which makes easier to write secure JavaScript. For example, in normal JavaScript, mistyping a variable name creates a new global variable. However, in strict mode, this will throw an error, making it impossible to accidentally create a global variable.
  • Locker Service enforces CSP, which is a security standard to protect agains XSS, clickjacking and other code injection attacks. This means that insecure functions, as eval, won’t be compliant with Locker Service.

Known all of this, let’s see if the Components I have developed so far for my blog work with Locker Service active!

First I have taken a look at the components created in this Lightning Components Facets post. I have tried to render the container component with Locker Service active, and everything works fine. I expected this result, as there was no Javascript at all in the component!

Second,  I have done the same test with  the components I created in this Lightning Components Attributes post. This time, when I try to render the container component I receive this error:

Screen Shot 2016-07-01 at 19.20.39

However, if I deactivate the Locker Service critical update, which is possible in summer 16, the component works like a charm.

If I open Lightning Inspector for debugging, I find that the error is saying to me that “key” is not defined in line 20 of my renderer function:

Screen Shot 2016-07-05 at 09.04.31

Here we have the problem! I was defining key as a global var, which remember, is not allowed, according to what we said before. Finally, fixing the line as follows solves the problem:

for (var key in ratingsByProduct)

And what happens with Javascript and CSS External libraries? The framework’s CSP mandates that external JavaScript libraries must be uploaded to Salesforce static resources. BUT, those libraries have to be compliant with Locker Service as well.

How can you check that you code is Locker Service compliant? Salesforce has provided us a Lightning CLI tool, that can help with that.

Which is the rollout plan for Locker Service? From a great session from Doug Chasman I attended in TrailHeaDX event (safe harbor):

  • Summer 16:
    • Automatically turned on in brand new summer 16 orgs
    • Also turned on in older orgs without Lightning Components
    • Critical update for orgs with at least one Lightning Component
    • Can be toggled, either directly or by request
  • Winter 17
    • Turned on in all orgs
  • Spring 17
    • CSP fully enabled

 

 

 

 

3 thoughts on “Lightning Locker Service

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