[YeurDreamin 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. Welcome to #YD22 Amsterdam
2. Harder, better, faster, stronger: forget Lightning Locker and move to Lightning Web Security Fabien Taillon
3. 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 Who am I
4. 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
5. At Lightning time • No change regarding Visualforce and security and Visualforce • Lightning Components developments are in the same DOM as Salesforce + third party components Why Lightning Locker / Lightning Web Security https://xxx.lightning.force.com Salesforce component Salesforce component Salesforce component My component My component Third party component
6. All components can access to everything from other namespace: DOM, APIs, cookies… Why Lightning Locker / Lightning Web Security https://xxx.lightning.force.com Salesforce component Salesforce component Salesforce component My component My component Third party component
7. All components can access to everything from other namespace: DOM, APIs, cookies… Why Lightning Locker / Lightning Web Security https://xxx.lightning.force.com Salesforce component Salesforce component Salesforce component My component My component Third party component
8. All components can access to everything from other namespace: DOM, APIs, cookies… Why Lightning Locker / Lightning Web Security https://xxx.lightning.force.com Salesforce component Salesforce component Salesforce component My component My component Third party component
9. All components can access to everything from other namespace: DOM, APIs, cookies… Why Lightning Locker / Lightning Web Security https://xxx.lightning.force.com Salesforce component Salesforce component Salesforce component My component My component Third party component
10. Not cool Why Lightning Locker / Lightning Web Security
11. 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
12. 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
13. 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
14. JavaScript Proxy demo How does Lightning Locker works
15. 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…
16. 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…
17. 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 Lightning Locker works, but… https://blogs.windows.com/windowsexperience/2021/05/19/the-future-of-internet-explorer-on-windows-10-is-in-microsoft-edge/
18. How does Lightning Web Security works 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
19. How does Lightning Web Security works
20. • 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
21. 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
22. 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
23. • 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.secur ity_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
24. Q&A #YD22 Amsterdam