在 svete 中，使用什么代替 @html 来避免 xss 攻击？

Question

i'm creating a little chat for a website, the front is in svelte.

when users enter their prompt inside the text field (in my case, it is a contenteditable div), I grab it and do two things: I send it to the backend with a websocket, to display it on other users' windows, and i print it directly on the sender chat window, without going through the server

here my question is specifically about the security of the text that is taken from the div and printed directly in the other div (the chat display). It's not because i already figured out the best secure way of treating the text server side, but because I'm not even there;)

I do that, inserting the user's input on the chat display, by using the {@html} svelte property, because it's the only way I found, using svelte capacities, to keep the newlines.

But in the doc, it's specified to be careful about xss attacks: https://svelte.dev/tutorial/html-tags

And on this discussion, https://github.com/sveltejs/svelte/issues/7253 , some people that seems to know a lot more than me what is good svelte and good security practice, say that maybe we shouldn't even use this feature {@html} . I wonder what I can do at least to increase security, they mention using 'DOMPurify'. But, what else should I do, instead of using {@html} ? I tried to use bind:textContent to grab the text, instead of bind:innerHTML , but I loose the newlines, which is not ok

here is a simplified example of my code:

Item.svelte

<p style="border: 1px solid black;">
    <slot></slot>
</p>

App.svelte

<script>
  import Item from './Item.svelte';
  let items = [];
  let text = "";

  function add() {
    items = [...items, { inner: text }];
  }
</script>

<div bind:innerHTML={text} contenteditable=true></div>
<button on:click={add}>add</button>
<div>
  {#each items as item}
    <Item>{@html item.inner}</Item>
  {/each}
</div>

and here is the REPL of this simplify version, with a little more options to test innerHTML or textContent , with css white-space: pre-wrap; for exemple (which do nothing) https://svelte.dev/repl/f2095dd2195543eabb00068c1cb1e6e6?version=3.55.0

as you can see; if you try to put a text with newlines, the only option that save the newlines is to grab the text with bind:innerHTML and to print it with {@html text}

so what should I do? What is the alternative to not use @html , that they are talking about in this github page? should i leave the svelte approach for this element and do a vanilla js createElement() and appendChild() and all that stuff? Is it preferable? Or using a library to sanitize the text is a good option?

Answer 1

Sveltekit becoming the defacto standard to deploy svelte apps, you may go with {@html} block directive and just carefully configure the Content Security Policies as stated in the documentation

To paraphrase said docs, in your svelte.config.js file, you should add, at least, the following stuff:

    const config = {
      kit: {
        csp: {
          directives: {
            'script-src': ['self']
          },
          reportOnly: {
            'script-src': ['self']
          }
        }
      }