> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Handle Sandboxing in the Editor

## Article: Handle Sandboxing in the Editor

## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/handle-sandboxing-in-the-editor.md

## Article Content:

# Handle Sandboxing in the Editor

[Site widgets](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/site-widgets/about-site-widget-extensions.md) and [site plugins](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/site-plugins/about-site-plugin-extensions.md) 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:

* [Cookie Store API](https://developer.mozilla.org/en-US/docs/Web/API/Cookie_Store_API), such as [`document.cookie`](https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie)
* [Web Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API), such as [`Window.localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) and [`Window.sessionStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage)
* [IndexedDB API](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API)
* [Cache API](https://developer.mozilla.org/en-US/docs/Web/API/Cache)

You may encounter additional issues:

- [Chrome Local Network Access error](#chrome-local-network-access-error): Chrome may block rendering due to local network access restrictions.
- [Failed access to browser APIs](#failed-access-to-browser-apis): certain browser APIs (like `localStorage`) are unavailable in the editor.
- [CORS error](#cors-error): self-hosted scripts may fail to load due to missing cross-origin headers.

<blockquote class="important">

__Important:__ The format of the Wix editor URL is changing due to new cookies introduced for authorization. The new URL format is `{username}-{sitename}.{editor|studio|harmony}.wix.com`. If your app uses CORS and whitelists specific origins, update your allowed origins to match the new format to avoid blocked requests.

</blockquote>

## Chrome Local Network Access error

In Chrome, you may encounter a Local Network Access permissions error when rendering site plugins in the editor.

To resolve: 
  1. Navigate to `chrome://flags/#local-network-access-check`. 
  2. Disable the **Local Network Access Checks** setting.
  3. Restart your browser. 

Disabling this permission may subject you to [certain security risks](https://developer.chrome.com/blog/local-network-access). 

## Failed access to browser APIs

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](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). 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](https://dev.wix.com/docs/build-apps/launch-your-app/legal-and-security/gdpr-compliance/about-gdpr-and-data-protection.md).

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.

### Option 1 | Check the current mode before a single API call

1. Import `window` from the [Site Window API](https://dev.wix.com/docs/sdk/frontend-modules/window/introduction.md).

2. Check the current mode with [`viewMode()`](https://dev.wix.com/docs/sdk/frontend-modules/window/view-mode.md) before accessing the browser API:

    ```javascript
    import { window } from "@wix/site-window";

    if ((await window.viewMode()) === "Site") {
      const item = localStorage.getItem('myKey');
    } else {
      // Mock storage or modify your API usage accordingly
    }
    ```

### Option 2 | Create a reusable flag for multiple API calls

1. Import `window` from the [Site Window API](https://dev.wix.com/docs/sdk/frontend-modules/window/introduction.md).

2. Set a flag using [`viewMode()`](https://dev.wix.com/docs/sdk/frontend-modules/window/view-mode.md) to indicate if the current mode is site mode:

    ```javascript
    import { window } from "@wix/site-window";

    const viewMode = await window.viewMode();
    const isSiteMode = viewMode === "Site";
    ```

3. Use the flag before accessing browser APIs:

    ```javascript
    if (isSiteMode) {
      const item = localStorage.getItem('myKey');
    } else {
      // Mock storage or modify your API usage accordingly
    }
    ```

## CORS error

When hosting your site widget script on a 3rd-party server (such as Netlify), you can encounter a CORS error:

```curl
Access to script at 'https://example.com/assets/widget.js' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
```

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:

```toml
[[headers]]
  for = "/assets/*"
  [headers.values]
    Access-Control-Allow-Origin = "*"
    Access-Control-Allow-Methods = "GET, OPTIONS"
```

## See also

- [About Site Widget Extensions](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/site-widgets/about-site-widget-extensions.md)
- [About Site Plugin Extensions](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/site-plugins/about-site-plugin-extensions.md)
- [About the Site Window API](https://dev.wix.com/docs/sdk/frontend-modules/window/introduction.md)
- [`viewMode()`](https://dev.wix.com/docs/sdk/frontend-modules/window/view-mode.md)