Today we are going to talk about LWC security. But before, after 10 days of close inspection, it is time to give you answers of the day 1 challenge (you can still find here: https://blog.texei.com/day-1-lightning-web-component-challenge-texeiadventcalendar-231743ef2b19).
First of all, let’s remind us of how LWC works : As classical MVC framework, LWC is locally store in your Web browser. It means users can see your .html and .js file, and can modify it as wanted. You have to be aware that everything store in those file is accessible.
Component 1
Component 1 use a <template if:true={isUserConnected}> to display the code only to connected user. The key is hard-coded in the .html file and the part of file is only displayed if the value isUserConnected is true. We can easily see the key in component1.js. See Component 1 code
Component 2
The component 2 display a list specific field of some record. But in the background, every fields of the objet are send from the APEX controller. As in the component 1, you just have to look into chrome console but not in static file this time, in the debugging statement. This way you can to see every filed retrieved of the objets (with the one containing the key). See Component 2 code
We have to look for our .js file component2.js and identify the wire targeted. then we just have to put a breakpoint just after and check the object
LWC security: How to secure Component 2 then ?
- Remove the field from the initial SOQL request as we dont need it in the component here
- Use the key word WITH SECURITY_ENFORCE in your SOQL request which avoir user to retrieve data he can’t usually access
Component 3
To get Component 3 key, you just need to do a basic SOQL injection. SOQL executed by the component was given (component 3 code):
You have to found what to put as searchKey to return all record and the key. using x%’)OR(Name like ‘ you can get the result expected
LWC security: How to secure Component 3 then?
- Avoid dynamic SOQL request extracting searchKey from the request first
- Using String.escapeSingleQuotes function to update the entry provided by the user. This method appends the escape character (\) to all single quotes in a string passed by a user. This method treats all single quotes as enclosing strings, instead of database commands.
These small examples shown you that when exposing LWC to the public includes some risk. It is necessary to be rigorous in the code implementation otherwise some sensitif data could be exposed.
That’s all for our tip about LWC security. Hope you had a good time! Come back tomorrow for a new article written by Elora Guyader. Want to continue learning? Check out our next article Manage nested Object in your Lightning Web Components.
Follow us on LinkedIn here and on Twitter here!
More to read on LWC security :
https://medium.com/salesforce-platform/is-your-lightning-component-secure-5a5a25b98f17
https://trailhead.salesforce.com/fr/content/learn/modules/secure-clientside-development?trail_id=security_developer
https://trailhead.salesforce.com/fr/content/learn/modules/secure-serverside-development?trail_id=security_developer
