XSS when hydrating component

[valterkraemer]

Elderjs newbie here. Not sure, but assume that this, or a similar approach is a realistic use-case. Where able to do an XSS injection by exploiting the hydration mechanism.

route.js

module.exports = {
  data: {
    test: "</script><script>alert('Yo!')</script>",
  },
  all: () => [],
  permalink: '/:slug/',
};

Blog.svelte

<script>
  import MyComponent from '../../components/MyComponent.svelte';
  export let data;
</script>

<MyComponent hydrate-client={{ data: data.test }} />

MyComponent.svelte

<script>
  export let data;
</script>

{data}

Loading the Blog page executes alert('Yo!').

Reported a similar issue in SvelteKit some months back sveltejs/kit#721

[nickreese]

@valterkraemer Yep, 100% an XSS issue. The docs include this warning:

Security Note: Whatever you pass to hydrate-client will get written to the HTML shipped to the browser via JSON.stringify. There are XSS and security considerations of passing data to the client, only hydrate content you trust.

I don't imagine it being too complex to escape it if we wanted to make that less of a concern.

[valterkraemer]

Oh okay, thanks @nickreese. Yeah, at least how they fixed it in SvelteKit seems to be pretty straight forward sveltejs/kit#769