How Lightning Locker Uses the Proxy Object

Lightning Locker uses the standard JavaScript Proxy object to filter a component’s access to underlying JavaScript objects. The Proxy object ensures that a component only sees DOM elements created by a component in the same namespace.

You can interact with a Proxy object in the same way as you interact with the raw JavaScript object, but the object shows up in the browser’s console as a Proxy. It’s useful to understand Lightning Locker’s usage of Proxy if you drop into your browser’s debugger and start poking around.

When a component creates a JavaScript object, Lightning Locker returns the raw JavaScript object. When Lightning Locker filters the object, it returns a Proxy object. Some scenarios where Lightning Locker filters an object and returns a Proxy object are:

• Passing an object to a Lightning web component (LWC) or an Aura component in a different namespace.
• Passing an object from an Aura component on API version less than 40.0 to the method of a component on API version greater than or equal to 40.0.
• Calling cmp.get() to retrieve an Aura component attribute value that you set with the value of a native JavaScript object or array. The object or array isn’t filtered when it’s originally created.

When you access these objects, Lightning Locker returns a Proxy object.

• Any object that implements the HTMLCollection interface
• A SecureElement object, which represents an HTML element.

See Also

• DOM Access Containment
• Secure Wrappers
• Arrays Proxied When Passed to Child Components