Embbeded Webcontainer doesnt work

[sevenzing]

Describe the bug

Having this error in embedded project

Unable to run Embedded Project
Looks like this project is being embedded without proper isolation headers.

[Read more about browser support for embedded projects](https://developer.stackblitz.com/platform/webcontainers/browser-support#embedding)

We tried to add headers like credentialless of cross-origin isolation but it didnt work.

Issue also ocures locally

Link to the blitz that caused the error

https://ensnode.io/docs/integrate/integration-options/enskit/example

https://stackblitz.com/edit/w4ozjb2k?file=src%2FApp.tsx

Steps to reproduce

Simply go to url and see the error

Expected behavior

Previously we have this example worked fine

Parity with Local

• I have run the project in my local machine and I could not reproduce the issue.

Screenshots

Platform

• OS: macOS
• Browser: Chrome, Brave
• Version: "@stackblitz/sdk": "^1.11.0",

Additional context

No response

[github-actions]

We noticed that you did not provide a StackBlitz or Bolt reproduction link. Please update the issue and add a link to a public project.

[bolt-new-by-stackblitz]

Start a new pull request in StackBlitz Codeflow.

• w4ozjb2k (Open reproduction)

[sevenzing]

probably related issue: #2045

[sevenzing]

@SamVerschueren could you please take a look?

[SamVerschueren]

Hi @sevenzing! Thanks for reporting. A Google origin trial token has expired and we need to renew it. I flagged this internally as I'm not able to do this myself and will hopefully be fixed later today. I'll keep you posted.

[sevenzing]

@SamVerschueren thanks a lot! The issue is still present, maybe it's possible to fix it before weekends? 👀

[SamVerschueren]

Sorry, I forget to reach out again. The problem is... it looks like we are not able to solve this on our end.

So for embeds, we relied on the UnrestrictedSharedArrayBuffer origin trial from Chrome to allow usage of SharedArrayBuffer. This allowed anyone who embedded a WebContainer project to just run it without having to jump all the hoops to get cross origin isolation working. You can read more about what it is and in a blogpost I write a couple years ago.

HOWEVER, since the 18th of May they apparently stopped the origin trial which means we cannot used SharedArrayBuffer anymore without proper cross origin isolation.

I might need to digg a bit deeper to see if there's a way to solve this without jumping through all the hoops because that would mean it's up to the embedder to do all the hard work.

[sevenzing]

@SamVerschueren
Can we somehow quickfix it on our end? For example send some header? I already tried it locally but did not succeed. Temp dirty solution is OK for us

[sevenzing]

hey @SamVerschueren ! sorry for annoying pings 🥲

As I understood this issue wont have a quick fix on your side since Chrome dropped origin trial 😠 Does it mean that there is no way to fix it and embedded window simply wont work anymore?

Maybe there a way to quickly solve it on our end? As I said we can implement temp dirty solution 🙏

[ddubrava]

Hey! Thanks for digging into this. I experience the same issue here - https://ddubrava.github.io/angular-yandex-maps/#/v3/components/YMapComponent

[SamVerschueren]

No update on my side yet. I was out for a couple of days and now discussing internally on how to proceed here. Sorry for the delays but I'm trying to push for a solution.

[SamVerschueren]

I looked at it again and actually it might already work if you want.

The StackBlitz SDK supports the option crossOriginIsolated: true starting from version 1.11.0. This serves the page with 3 extra headers

• cross-origin-embedder-policy: credentialless
• cross-origin-opener-policy: same-origin

This means that you also need to set the following headers on the top level page

• cross-origin-embedder-policy: credentialless
• cross-origin-opener-policy: same-origin

If you don't use the SDK but just embedding with the embed url, you can just add corp=1 to the embed URL.

• https://stackblitz.com/edit/create-a-map-v3?embed=1&view=preview&corp=1

You also need to allow cross origin isolation in the iframe

<iframe src="https://stackblitz.com/edit/create-a-map-v3?embed=1&view=preview&corp=1" allow="cross-origin-isolated">

Please test this out and let me know.

[EDIT]: You should make sure to upgrade the SDK to version 1.11.1.