recommanded way to purify html

Ennoriel commented 2 years ago

Hi! The library looks amazing!

I am using this library for rendering markdown written by users. In this use case, I would like to purify the HTML generated. What do you consider the best solution?

From what I read, svelte-markdown uses marked internally who recommands DOMPurify. Is there a way to use it as a middleware?

Should this information be written in the readme?

Thanks :)

Ennoriel commented 2 years ago

I found a way: override the Html component to not use @html.

MihinMUD commented 1 year ago

@Ennoriel Hey, Can you tell me exactly how you did it? I am also looking for a solution to prevent users from using html tags.

Ennoriel commented 1 year ago

Hi @MihinMUD

You can override the renderer components:

<script lang="ts">
    import Code from '$lib/components/atom/MarkdownCode.svelte';
    import Text from '$lib/components/atom/MarkdownText.svelte';
    import SvelteMarkdown from 'svelte-markdown';

    export let source: string;
</script>

<SvelteMarkdown {source} renderers={{ html: Text, code: Code }} />

<!-- MarkdownText.svelte -->
<script lang="ts">
    export let text: string;
</script>

{text}

<!-- MarkdownCode.svelte -->
<script lang="ts">
    import Prism from 'prismjs';
    import 'prism-svelte';

    export let lang: string;
    export let text: string;

    $: highlighted = Prism.highlight(text, Prism.languages.svelte, 'svelte');
</script>

<pre class="language-{lang}"><code>{@html highlighted}</code></pre>

pablo-abc / svelte-markdown

recommanded way to purify html #58