Site widgets and site plugins run in sandboxed environments when editing and previewing a site. This means they're treated as if they come from a different domain, and Wix does not support the allow-same-origin directive in the sandbox attribute. As a result, your site plugin or widget can't access same-origin resources in the editor.
This restriction impacts several key web storage and caching APIs:
document.cookieWindow.localStorage and Window.sessionStorageYou may encounter additional issues:
localStorage) are unavailable in the editor.In Chrome, you may encounter a Local Network Access permissions error when rendering site plugins in the editor.
To resolve:
chrome://flags/#local-network-access-check.Disabling this permission may subject you to certain security risks.
When your widget runs in the editor or preview mode, some browser APIs are unavailable to access. If your code tries to access localStorage, cookies, or other restricted APIs without checking the current mode, it will throw runtime errors.
The code examples in this task use the Web Storage API localStorage property. However, you can apply these steps to all sandboxed browser APIs and properties. If you are working with the cookies API, make sure to comply with GDPR and data protection regulations.
There are 2 ways to handle this issue: check the current mode before each API call, or create a reusable flag for multiple API calls.
Import window from the Site Window API.
Check the current mode with viewMode() before accessing the browser API:
Import window from the Site Window API.
Set a flag using viewMode() to indicate if the current mode is site mode:
Use the flag before accessing browser APIs:
When hosting your site widget script on a 3rd-party server (such as Netlify), you can encounter a CORS error:
This error occurs because the widget runs in a sandboxed iframe context that has an opaque origin (null). The browser blocks cross-origin script requests unless the hosting server explicitly allows them. To fix this, configure your hosting provider or server to return the Access-Control-Allow-Origin header for your script files. Below is the example script for Netlify in the netlify.toml file: