XSS when hydrating component

valterkraemer commented 2 years ago

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 https://github.com/sveltejs/kit/issues/721

nickreese commented 2 years ago

@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 commented 2 years ago

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

Elderjs / elderjs

XSS when hydrating component #225