feat: Parse/format HTML in `{@html}` on server-side

[adiguba]

Describe the problem

There no problem on client-side since the browser will fix the HTML code automatically, but using {@html} can be dangerous on server-side.

=> the HTML code will be written as is in the generated page, without any verification.
An invalid HTML can completely broke the result and cause strange behavior with hydration...

Example : https://www.sveltelab.dev/ba3rh3y3aek8ctc

Describe the proposed solution

Adding an HTML parser to Svelte would probably be disproportionate.

I think a better solution would be to add an htmlFormat option to the server-side render() function :

     htmlFormat?: (html: string) => string

When present, this function will be used by {@html} to render the HTML code on server-side.

And after that, SvelteKit could define a new server-hook for this.

// src/hooks.server.js

/**
 * @param {string} html
 * @returns {string}
 */
export function htmlFormat(html) {
    const parsed = // can use any HTML parser
    return parsed;
}

So the impact will be minimal, while allowing to have a full control over how the HTML will be formatted.

Importance

nice to have

[trueadm]

We've previously recommended users do this themselves before passing their value to @html, is that just the same as this except without adding even more API surface area?

[adiguba]

Yes, but the idea would be to have a unique way of defining it for the whole project, to avoid omissions.
But I understand the desire not to extend the API too much...

[Conduitry]

I'm -1 on adding an API for this. What is the source of this HTML that you're sure doesn't need sanitization but that does need repairing?

If you're asking for this to be added to Svelte's render() function, I'm assuming you already have a really custom setup, and aren't using SvelteKit to render these components - since options to render() wouldn't be visible inside SvelteKit apps. Knowing more about your setup would help. Since you're presumably already doing a lot of custom stuff, another possibility would be to write a pre-processor to update the {@html} tags by wrapping them in your function.

[adiguba]

I don't have any specific setup.
I'm just evaluating the features, and {@html} seem problematic for that on large apps.

=> it's easy to forget to validate a variable passed to {@html}, so I would prefer to have a way to define it globally.

But yes the preprocessor may be a solution.

PS : regarding SvelteKit, it could define a hook to pass the htmlFormat to render().

[Amm4r03]

hi! following on @Conduitry 's suggestion, i'd propose a svelte preprocessor that automatically wraps all content within {@html} tags with a formatting function.
so it would transform
{@html content} to {@html process_html(content)}
and we could implement the the process_html function as a server hook. Is this a viable solution as a PR or a plugin in itself?