[North Africa Dreamin 2022] Harder, better, faster, stronger: 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. Forget Lightning Locker and move to Lightning Web Security Presented by Fabien Taillon
2. Fabien Taillon • 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 Lightning Web Security - @FabienTaillon - https://texei.com/blog
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
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
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
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
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
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
9. Not cool Lightning Web Security - @FabienTaillon - https://texei.com/blog
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
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
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
13. JavaScript Proxy demo How does Lightning Locker works Lightning Web Security - @FabienTaillon - https://texei.com/blog
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
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
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
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
18. How does Lightning Web Security works Lightning Web Security - @FabienTaillon - https://texei.com/blog
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
20. Only GA for LWC (not 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
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 ◦ … • Today it’s still a polyfill if most browsers What’s not working/need to be careful of Lightning Web Security - @FabienTaillon - https://texei.com/blog
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.securi ty_lwsec_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
23. THANK YOU