{"id":143,"date":"2020-12-11T12:10:25","date_gmt":"2020-12-11T11:10:25","guid":{"rendered":"https:\/\/transferttexei.wordpress.com\/2021\/08\/11\/day-11-lightning-web-component-challenge%e2%80%8a-%e2%80%8areview-texeiadventcalendar\/"},"modified":"2024-04-17T16:45:45","modified_gmt":"2024-04-17T14:45:45","slug":"day-11-lightning-web-component-challenge-review-texeiadventcalendar","status":"publish","type":"post","link":"https:\/\/texei.com\/en\/advices\/day-11-lightning-web-component-challenge-review-texeiadventcalendar\/","title":{"rendered":"Day 11\u00a0: Lightning Web Component Challenge\u200a\u2014\u200aReview #TexeiAdventCalendar"},"content":{"rendered":"\r\n

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<\/a>).<\/p>\r\n\r\n\r\n\r\n

First of all, let\u2019s remind us of how LWC works\u00a0: As classical MVC framework, LWC is locally store in your Web browser. It means users can see your\u00a0.html and\u00a0.js file, and can modify it as wanted. You have to be aware that everything store in those file is accessible.<\/p>\r\n\r\n\r\n\r\n

\"LWC\r\n
LWC environment overview<\/figcaption>\r\n<\/figure>\r\n\r\n\r\n\r\n

Component 1<\/h2>\r\n\r\n\r\n\r\n

Component 1 use a <template if:true={isUserConnected}> <\/strong>to display the code only to connected user. The key is hard-coded in the\u00a0.html file and the part of file is only displayed if the value isUserConnected <\/strong>is true. We can easily see the key in component1.js. See Component 1 code<\/a><\/p>\r\n\r\n\r\n\r\n

\"\"\r\n
Step 1\u00a0: Open your chrome\u00a0console<\/figcaption>\r\n<\/figure>\r\n\r\n\r\n\r\n
\"\"\r\n
Step 2\u00a0: Go to Sources and the find the component in s\/module\/c\/component1.js <\/strong>and click on small bracket to format the\u00a0file<\/figcaption>\r\n<\/figure>\r\n\r\n\r\n\r\n

Component 2<\/h2>\r\n\r\n\r\n\r\n

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<\/a><\/p>\r\n\r\n\r\n\r\n

\"\"\r\n
After opening chrome console open s\/module\/c\/component2.js <\/strong>and click on small bracket to format the\u00a0file<\/figcaption>\r\n<\/figure>\r\n\r\n\r\n\r\n

We have to look for our\u00a0.js file component2.js and identify the wire targeted. then we just have to put a breakpoint just after and check the object<\/p>\r\n\r\n\r\n\r\n

\"\"<\/figure>\r\n\r\n\r\n\r\n

LWC security: How to secure Component 2 then ?<\/h3>\r\n\r\n\r\n\r\n