Forget Lightning Locker and move to Lightning Web Security Presented by Fabien Taillon

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

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

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

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

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

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

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

Not cool Lightning Web Security - @FabienTaillon - https://texei.com/blog

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

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

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

JavaScript Proxy demo How does Lightning Locker works Lightning Web Security - @FabienTaillon - https://texei.com/blog

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

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

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

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

How does Lightning Web Security works Lightning Web Security - @FabienTaillon - https://texei.com/blog

● 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

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

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

• 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

THANK YOU