Configuring your browser to run WebContainers

While all supported browsers can run WebContainers, some browser options can stop WebContainers from running correctly.

You can work around those issues by adding exceptions for Yotako domains in your browser’s settings. Here’s how.

Why do I need to add exceptions for Yotako?

WebContainers use a combination of browser technologies, such as Service Worker and WebAssembly, across several domains. Each running project has its own domain and needs to install a Service Worker for that domain to work properly.

In some browsers, this feature is blocked by “third-party cookie” or “third-party storage” restrictions. These are legitimate restrictions when the third-party domain is an ad server or a tracking server, but in the case of WebContainers, the third-party domain is where your project code runs.

Chrome: enabling Service Workers

If you use the “Block Third Party Cookies” option in Chrome, you will need to add exceptions for Yotako projects.

To allow all Yotako projects to use Service Workers, go to your browser’s cookie preferences, and add exceptions for the following URL patterns:

https://[*.]yotako.iohttps://[*.]yotako.com

For instance, in Chrome, go to chrome://settings/cookies and add those exceptions in the “Sites that can always use cookies” section.

image

image

image

Firefox: enabling Service Workers

When Firefox’s Enhanced Tracking Protection is configured in “Custom” mode with the cookie blocking option set to “All cross-site cookies,” Firefox will block the Service Workers used by WebContainers.

You can work around this issue in a couple of ways:

  1. Use the “Strict” mode instead of “Custom” mode. It’s important to note that it's slightly more permissive than “Custom” mode with very strict options. If this is not something you'd like to allow, you can...

  2. Add exceptions to cookie blocking for the domains used to run Yotako projects.

To do so, visit about:preferences#privacy to check what your current settings look like.

image

To add exceptions for Yotako, scroll down to the “Cookies and Site Data” section, click on “Manage Exceptions…,” and add exceptions for the following sites:

https://yotako.iohttps://yotako.comhttps://dashboard.yotako.io

image

Don’t forget to click “Save Changes”. Then you should be able to reload the tab with your Yotako project, and hopefully, everything should work!

Brave: enabling Service Workers

By default, Brave’s “Shields” feature blocks ~~Service Workers~~ and cookies from third-party domains.

To allow WebContainers to run in Brave, you will need to add an exception for Yotako:

  1. Visit a WebContainers-based project, for instance https://Yotako.io. The project’s boot sequence might stay stuck on the “Running start command” step:

image

  1. Click on the “Shields” icon at the right of the address bar, then click on “Advanced View”.

image

  1. In the advanced view, change the “Cross-site cookies blocked” option to “All cookies allowed”.

image

Brave will reload the page, and you should get a working project:

image

Edge: enabling WebAssembly

Microsoft Edge disables the usage of WebAssembly when you set its “Enhance your security on the web” option to “Strict”.

To allow Y projects to run, either set this option to “Balanced” or add exceptions for a couple of domains used by Yotako projects.

  1. Go to edge://settings/privacy → “Enhance your security on the web”.

image

  1. Then click “Exceptions” and add exceptions for the following domains:
https://[*.]yotako.iohttps://[*.]yotako.com

image