Lightning Web Security Limitations

Here are some known limitations for Lightning components running with Lightning Web Security (LWS).

Accessors for top and location Global Properties

This limitation applies to Lightning web components (LWC) and Aura components.

The top property must be used with these accessors.

window.top
globalThis.top
self.top

The location property must be used with these accessors.

window.location
document.location
globalThis.location
self.location
document.defaultView.location

Limitations for window.top and window.location

This limitation applies to LWC and Aura components.

Generally, it’s not recommended to override or shadow built-in global variables.

Here’s an example of an override.

1// Don't do this
2window.fetch = function(...) { /* do something else */ }

Here’s an example of shadowing.

1// Don't do this
2let location = window.location.href;

In LWS, properties such as top and location on the window global aren’t accessible to your code by default. To allow components to have access to these properties, LWS performs some code transformations behind the scenes.

For this reason it’s best to avoid shadowing of top and location properties. When shadowing those properties, your code can produce unexpected results or not work at all. For example, you can see error messages such as Cannot access 'location' before initialization.

One way to make sure your code is free of such patterns is to use the ESLint no-shadow rule with builtinGlobals: true option.

Rename the variables to something other than location or top. You can use loc instead of location, for example.

1// Do this instead
2let loc = window.location.href;

Coding Patterns Not Supported in Aura Components

These patterns produce runtime errors in Aura components:

async/await
dynamic import

Aura components can’t use these techniques because they’re features introduced in ES6, which isn’t supported in Aura. Use of this syntax is typically flagged by validation rules at development time.

If an Aura component uses a static resource that uses async/await or dynamic import, it’s not detected until runtime where the component encounters an error.

Limitations for the $A Global Variable

When Aura components run with LWS, the $A global variable isn’t available to the eval() function or the Function constructor.

There’s no workaround for using $A with eval().

Using eval() with force:refreshView to refresh a view in LWC doesn’t work with LWS. Instead, use RefreshView API.

Tip

Workaround to Use $A in Functions

In Aura components, you can use dependency injection for the Function constructor as a workaround when LWS is enabled.

Define the function to accept an extra parameter, $A, which you can supply wherever it is invoked and $A exists on the global scope.

This example constructs a new function fn and specifies $A as one of its parameters, then invokes the function passing a reference to the accessible $A.

1var fn = new Function("$A", "a", "b");
2fn(window.$A, 1, 2);

$A is Blocked in LWC

The $A variable isn’t supported in Lightning web components because it’s specific to the Aura framework.

See Also