The demo app does not work on Stackblitz

[geoffrich]

Describe the bug

The Sverdle demo app does not fully function on Stackblitz. Entering a guess and hitting Enter produces the following error:

Unexpected token 'C', "Cross-site"... is not valid JSON

This is because sverdle?/enter returns "Cross-site POST form submissions are forbidden"

Reproduction

Go to sveltekit.new, go to Sverdle, enter a guess, and hit enter. The error will be displayed.

Logs

No response

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.17.0 - /usr/local/bin/npm
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.83 
    @sveltejs/kit: next => 1.0.0-next.516 
    svelte: ^3.46.0 => 3.52.0 
    vite: ^3.1.0 => 3.1.8

Severity

serious, but I can work around it

Additional Information

In Discord, Rich suggested that maybe have a branch where CSRF protection is disabled specifically for the sveltekit.new demo. We want to keep it enabled in the normal demo case.

[eltigerchino]

After disabling kit.csrf.checkOrigin, the Sverdle game also doesn't seem to save submitted answers.
Perhaps there's a fix I'm unaware of? I'm unsure myself what's causing this behavior.
It's something to do with how StackBlitz stores cookies, and the preview page having a different URL origin. Not sure how to fix that.

https://stackblitz.com/edit/sveltejs-kit-template-default-dycjhr?file=svelte.config.js

[dominikg]

just remembered that launch-editor used by vite uses process.versions.webcontainer to sniff stackblitz env at runtime.
https://github.com./yyx990803/launch-editor/blob/master/packages/launch-editor/guess.js#L21

Would not recommend that for our default template, but the stackblitz specific fork could use it to guard against usage outside of stackblitz.

[Conduitry]

Is it going to be someone's responsibility to constantly be updating the StackBlitz fork? Can we instead somehow bake this change into the action that generates https://github.com./sveltejs/kit-template-default?

[dummdidumm]

The only way I could make this work is to not use cookies anymore. I therefore see three options:

1. Create a Stackblitz-template-only patch that replaces the cookie handling with a global variable and some comments why this is
2. Create a Stackblitz-template-only patch that removes the Sverdle completely
3. Use the skeleton template instead

I'm leaning towards 2. Having the Sverdle be present on Stackblitz is not a priority IMO, all other starter templates on there are pretty minimal.

[eltigerchino]

The only way I could make this work is to not use cookies anymore. I therefore see three options:

1. Create a Stackblitz-template-only patch that replaces the cookie handling with a global variable and some comments why this is
2. Create a Stackblitz-template-only patch that removes the Sverdle completely
3. Use the skeleton template instead

I'm leaning towards 2. Having the Sverdle be present on Stackblitz is not a priority IMO, all other starter templates on there are pretty minimal.

Agreed. I’ve started to really enjoy using stackblitz for issue reproductions and testing things. A stripped down version is welcome as I usually delete most of the pages to simplify it.

Also, is there a way to have a typescript template at the ready? I could not find a way to do it personally