[Lviv Women In Tech 01/2023] Forget Lightning Locker and move to Lightning Web Security

Tired of Lightning Locker limitations ? Want a faster environment for your lightning web components ?

Lightning Web Security is the new security architecture, modeled to be faster and more compliant with web standards.

Let’s see how it differs from Lightning Locker and what are the benefits. Also learn if your org is already suited for it or not and what should be done to avoid issues.

You’re just one session away from moving to a better security architecture !

Transcript

1. LVIV SALESFORCE WOMEN IN TECH GROUP Forget Lightning Locker and move to Lightning Web Security
2. - 7x Salesforce MVP - CTO at Texeï - Paris Developer Group Leader - French Touch Dreamin team - Serial speaker - Not so serial blogger @FabienTaillon https://texei.com/blog Fabien Taillon
3. At Classic time, all UI developments were done via Visualforce • Security was guaranteed by iframe and different domains Why Lightning Locker / Lightning Web Security https://xxxxx.my.salesforce.com https://xxx.vf.force.com iframe Lightning Web Security - @FabienTaillon - https://texei.com/blog LVIV SALESFORCE WOMEN IN TECH GROUP Why Lightning Locker / Lightning Web Security
4. At Lightning time • No change regarding Visualforce and security and Visualforce • Lightning Components developments are in the same DOM as Salesforce + third party components https://xxx.lightning.force.com Salesforce component Salesforce component Salesforce component My component My component Third party component Why Lightning Locker / Lightning Web Security Lightning Web Security - @FabienTaillon - https://texei.com/blog LVIV SALESFORCE WOMEN IN TECH GROUP Why Lightning Locker / Lightning Web Security
5. All components can access to everything from other namespace: DOM, APIs, cookies… https://xxx.lightning.force.com Salesforce component Salesforce component Salesforce component My component My component Third party component Why Lightning Locker / Lightning Web Security Lightning Web Security - @FabienTaillon - https://texei.com/blog LVIV SALESFORCE WOMEN IN TECH GROUP Why Lightning Locker / Lightning Web Security
6. All components can access to everything from other namespace: DOM, APIs, cookies… https://xxx.lightning.force.com Salesforce component Salesforce component Salesforce component My component My component Third party component Why Lightning Locker / Lightning Web Security Lightning Web Security - @FabienTaillon - https://texei.com/blog LVIV SALESFORCE WOMEN IN TECH GROUP Why Lightning Locker / Lightning Web Security
7. All components can access to everything from other namespace: DOM, APIs, cookies… https://xxx.lightning.force.com Salesforce component Salesforce component Salesforce component My component My component Third party component Why Lightning Locker / Lightning Web Security Lightning Web Security - @FabienTaillon - https://texei.com/blog LVIV SALESFORCE WOMEN IN TECH GROUP Why Lightning Locker / Lightning Web Security
8. All components can access to everything from other namespace: DOM, APIs, cookies… https://xxx.lightning.force.com Salesforce component Salesforce component Salesforce component My component My component Third party component Why Lightning Locker / Lightning Web Security Lightning Web Security - @FabienTaillon - https://texei.com/blog LVIV SALESFORCE WOMEN IN TECH GROUP Why Lightning Locker / Lightning Web Security
9. Not cool Lightning Web Security - @FabienTaillon - https://texei.com/blog LVIV SALESFORCE WOMEN IN TECH GROUP
10. Lightning Locker / Lightning Web Security: • is a powerful security architecture for Lightning components. • enhances security by isolating Lightning components that belong to one namespace from components in a different namespace. • promotes best practices that improve the supportability of your code by only allowing access to supported APIs and eliminating access to non-published framework internals What are Lightning Locker / Lightning Web Security Lightning Web Security - @FabienTaillon - https://texei.com/blog LVIV SALESFORCE WOMEN IN TECH GROUP What are Lightning Locker / Lightning Web Security
11. Lightning Locker / Lightning Web Security: • enables JavaScript strict mode • enforces CSP (Content Security Policy) • prevents access to JavaScript Global variables (Window, Document…) • prevents Prototype pollution What are Lightning Locker / Lightning Web Security Lightning Web Security - @FabienTaillon - https://texei.com/blog LVIV SALESFORCE WOMEN IN TECH GROUP What are Lightning Locker / Lightning Web Security
12. Makes use of JavaScript Proxy. Instead of giving access to global scope, Lightning Components have access to a secure wrapper proxy: • Window → SecureWindow • Document → SecureDocument • Element → SecureElement • … → https://developer.salesforce.com/docs/atlas.en-us.214.0.lightning.meta/lightning/security_global_access.htm How does Lightning Locker works Lightning Web Security - @FabienTaillon - https://texei.com/blog LVIV SALESFORCE WOMEN IN TECH GROUP How does Lightning Locker works
13. JavaScript Proxy demo How does Lightning Locker works Lightning Web Security - @FabienTaillon - https://texei.com/blog LVIV SALESFORCE WOMEN IN TECH GROUP How does Lightning Locker works
14. SecureWindow, SecureDocument, SecureElement, etc are a replacement for the real elements, all standard APIs may not be available in the Secure version (especially new ones): • Window.BarcodeDetector • Window.Clipboard • … This may prevent your code or third party libraries to work. Everything is documented in the Locker API Viewer documentation: → https://developer.salesforce.com/docs/component-library/tools/locker-service-viewer Lightning Locker works, but… Lightning Web Security - @FabienTaillon - https://texei.com/blog LVIV SALESFORCE WOMEN IN TECH GROUP Lightning Locker works, but…
15. It’s slower, as every Secure wrapper is an extra overhead. The more calls to these APIs, the slower your component will be. This can be debugged and benchmarked in the Locker Console: → https://developer.salesforce.com/docs/component-library/tools/locker-service-console Performance impact example: → https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/security_locker_console_benchmark.htm Lightning Locker works, but… Lightning Web Security - @FabienTaillon - https://texei.com/blog LVIV SALESFORCE WOMEN IN TECH GROUP Lightning Locker works, but…
16. Worth noting, there is (of course) no support for JavaScript Proxy in Internet Explorer: Polyfill is used → Even slower on IE ! IE is retired and out of support since June 15, 2022 https://blogs.windows.com/windowsexperience/2021/05/19/the-future-of-internet-explorer-on-windows-10-is-in-microsoft-edge/ Lightning Locker works, but… Lightning Web Security - @FabienTaillon - https://texei.com/blog LVIV SALESFORCE WOMEN IN TECH GROUP Lightning Locker works, but…
17. Based on ShadowRealm: • web standard • Doesn’t override global objects with a wrapper (no overhead) • creates a new context for global objects (sandbox, or realm) • Use distortion: → https://developer.salesforce.com/docs/component-library/tools/lws-distortion-viewer How does Lightning Web Security works Lightning Web Security - @FabienTaillon - https://texei.com/blog LVIV SALESFORCE WOMEN IN TECH GROUP How does Lightning Web Security works
18. How does Lightning Web Security works Lightning Web Security - @FabienTaillon - https://texei.com/blog LVIV SALESFORCE WOMEN IN TECH GROUP How does Lightning Web Security works
19. • Faster • Allows cross-namespace component use • Use distortion of APIs, so all of them are available (but may be distorted) • Standard ◦ Better support of standard DOM API ◦ Better support for third party libraries ◦ Will benefit from browsers optimisation Why it’s positive Lightning Web Security - @FabienTaillon - https://texei.com/blog LVIV SALESFORCE WOMEN IN TECH GROUP Why it’s positive
20. Only GA for LWC (only beta in Spring ‘23 for aura components). Salesforce recommends to: • activate it if you’re a new org or LWC only • test thoroughly if you have a mix of LWC and aura • don’t activate it if you’ve only have aura components → https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.security_lwsec_when What’s not working/need to be careful of Lightning Web Security - @FabienTaillon - https://texei.com/blog LVIV SALESFORCE WOMEN IN TECH GROUP What’s not working/need to be careful of
21. Only GA for LWC (not aura components). • Beware of LWC only orgs where Aura may be needed after: ◦ List View Buttons ◦ Related List Buttons ◦ New / Edit override ◦ Lightning Out ◦ … → Learn more about Aura/LWC gaps and vote for your favorites: https://developer.salesforce.com/blogs/2023/01/unlocking-aura-to-lwc-migration-at-salesforce • Today it’s still a polyfill for some browsers What’s not working/need to be careful of Lightning Web Security - @FabienTaillon - https://texei.com/blog LVIV SALESFORCE WOMEN IN TECH GROUP What’s not working/need to be careful of
22. • Introducing ShadowRealm https://developer.salesforce.com/blogs/2022/04/introducing-shadowrealm • Workflow to Try Your LWCs with Lightning Web Security: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.security_lw sec_test_workflow • Lightning Web Security Console https://developer.salesforce.com/docs/component-library/tools/lws-console • Lightning Web Security Distortion Viewer https://developer.salesforce.com/docs/component-library/tools/lws-distortion-viewer • Lightning Web Security Basics Trailhead Badge https://trailhead.salesforce.com/content/learn/modules/lightning-web-security-basics Resources Lightning Web Security - @FabienTaillon - https://texei.com/blog LVIV SALESFORCE WOMEN IN TECH GROUP Resources
23. ANY QUESTIONS? LVIV SALESFORCE WOMEN IN TECH GROUP THANK Y U