Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

● 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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

• 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

Slide 23

Slide 23 text

THANK YOU