Bishwas-py
commented
3 days ago A daily svelte / svelte5 user, but +1 to "i cannot use svelte without it".
Open AlbertMarashi opened 2 weeks ago
Bishwas-py
commented
3 days ago A daily svelte / svelte5 user, but +1 to "i cannot use svelte without it".
Describe the problem
Related Issue/Discussion
Currently, server-side requests leak state during SSR re-renders, leading to potential security risks from novice developers, or simple oversight and mistakes. This is currently the most upvoted issue/discussion in SvelteKit.
Describe the proposed solution
By providing a unique globally accessible request symbol for each server-side rendering context, we can provide globally unique, and globally accessible state.
By wrapping
$stateproxies in a proxy that clones the underlying initial object value, we should be able to safely mutate global$stateI have built a proof of concept library that achieves some of the behavior here. I believe this might be best suited to be included directly into Svelte's core, which enables far more capabilities for when we want to safely utilize global state in Svelte.
Implementation notes
non-primitive exports only
This would only apply to non-primitive objects as they are the only values which can be proxied, which is already an existing limitation since we cannot reassign to
export const foo = "baz"values in JS modules afaik.So I do not expect this to be a major problem.
$stateidentification for hydrationstructuredCloneor anonymous functionWe could perform a
structuredCloneof the underlying initial value during server-side rendering, however this creates and poses some challenges, as the state needs to consist ofstructuredClone-able objects.Instead, it might be preferable to wrap the data initialization process inside of an anonymous function, either by:
$state({ baz: true})into something like$state(() => ({ baz: true})$state.isolated(() => ({ baz: true })rune.Proxy or no proxy
It is possible to avoid the need to wrap the object in a proxy, by instead providing a
getterandsetterwith an inner value on the value returned by the rune, ie: the function signature could function like:Serialisation
We would only want to transfer objects that can be properly serialised, or objects that implement a certain method on classes, such as
serialiseandunserialise. These could be symbols exported by svelte for inclusion in classes, and will enable developers to reinitialize a class or non-pojo object for client-side hydration.This functionality could help solve the data teleportation issue
AsyncLocalStorageImplementation code example
Details
`import { getRequestSymbol } from "$app"` ```ts /** * A store that returns the current ongoing request's symbol via the `getRequestSymbol()` method. */ export default { /** * Returns the current async context's request symbol. * * This is safe to call only after the svelte has initialised the symbol, and only during server-side rendering **/ getRequestSymbol(): symbol { throw new Error("AsyncLocalStorage has not been initialized") } } ``` This should technically be done more inside of the svelte's server-side rendering function, but I've used SvelteKit as an example ```ts import type { MaybePromise, RequestEvent, ResolveOptions } from "@sveltejs/kit" import { AsyncLocalStorage } from "node:async_hooks" import app from "./$app" /// Create a new AsyncLocalStorage for to isolate requests const async_local_storage = new AsyncLocalStorage()
/// override the request symbol on the server-side (client-side will remain as-is, so that code can safely import the symbol without importing `node:async_hooks`)
app.current = () => {
const symbol = async_local_storage.getStore()
if (symbol === undefined) {
throw new Error("Request symbol has not been initialized")
}
return symbol
}
/**
* Wraps the hooks.server.ts `handle` function to with a middleware that
* creates a new AsyncLocalStorage store for each request.
*
* This allows us to access the current request symbol via the `safe_ssr_store.request_symbol()` method.
* which can be later used to store isolated data for each request in
* a WeakMap (which is garbage collected after the request is complete).
*
* @example
* import { sequence } from '@sveltejs/kit/hooks';
*
* export const handle = sequence(
* // ... other hooks
* safe_request_wrapper,
* // ... other hooks (after this point, the request symbol is available)
* );
*/
export async function safe_request_wrapper({
event,
resolve
}: {
event: RequestEvent;
resolve(event: RequestEvent, opts?: ResolveOptions): MaybePromise;
}): Promise {
return async_local_storage.run(Symbol(), () => resolve(event))
}
```
```ts
import { browser } from "$app/environment"
import { uneval } from "devalue"
// this is safe to import in client-side, but not safe to call.
import { getRequestSymbol } from "$app"
const request_stores: WeakMap> = new WeakMap()
export function serialise_state(): string {
const map = get_or_init()
const entries = Array.from(map).map(([key, value]) => [uneval(key), uneval(value)])
return ``
}
function get_or_init() {
const sym = request_symbol.current()
return request_stores.get(sym) ?? request_stores.set(sym, new Map()).get(sym)!
}
/**
* @param key -The key to associate the unique store with. This is required during client-side in order to
* figure out which store to retrieve from the window.__SAFE_SSR_STATE__ map. It must be unique
* @param initial - the initial value.
*
* Behaviour:
* - On the server, the initial value is cloned with [`structuredClone`](https://developer.mozilla.org/en-US/docs/Web/API/structuredClone) for every
* request, and stored in a WeakMap (which is garbage collected after the request is complete, as long as
* the request symbol is no longer in scope).
* - On the client, we will first look to see if the server has already stored the state in the `window.__SAFE_SSR_STATE__` state
* that we have serialized with the `SerialiseClientState` component, otherwise we will return the initial value.
*/
export function safe_state(key: string, initial: T): { inner: T } {
if (browser) {
// since only the client-side has reactivity, we use the $state rune
// to get the reactive state
const state = $state(get_client_state(key, initial))
return { get inner() { return state } }
}
return {
get inner() {
// no reactivity needed in SSR
const map = get_or_init()
// get the state from the map, or clone the initial value if it doesn't exist
return (map.get(key) ?? map.set(key, structuredClone(initial)).get(key)!) as T
}
}
}
declare global {
interface Window {
__SAFE_SSR_STATE__?: Map
}
}
function get_client_state(key: string, initial: T) {
const state = window.__SAFE_SSR_STATE__?.get(key)
if (state) return state as T
return initial
}
```
Importance
i cannot use svelte without it