Sanitization
The sanitizeHtml
method on the component context helps preventing Cross Site Scripting Security bugs (XSS) by sanitizing the passed HTML, removing any potentially unsafe content.
For example, when binding a URL in a <a [href]="someValue">
hyperlink, someValue will be sanitized so that an attacker cannot inject e.g. a javascript:
URL that would execute code on the website.
Extraordinary care must be taken to avoid creating a Cross Site Scripting (XSS) security bug!
<template>
<div @html="html"></div>
</template>
<script>
export default {
name: 'hello-world',
props: ['context'],
data() {
return { html: '' };
},
created() {
const hmtlString = "<div>All html <span>string</span</div>";
this.html = this.context.sanitizeHtml(htmlString);
}
};
</script>
<style scoped></style>
<script>
import { onMount } from 'svelte';
export let context;
let html = '';
const hmtlString = "<div>All html <span>string</span</div>";
onMount(() => {
html = context.sanitizeHtml(htmlString);
});
</script>
<div bind:this={html}></div>
<style></style>
const template = document.createElement('template');
template.innerHTML = `<div id="html"></div>`;
class HelloWorld extends HTMLElement {
hmtlString = "<div>All html <span>string</span</div>";
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
this.shadowRoot.appendChild(template.content.cloneNode(true));
this.shadowRoot.getElementById('html').innerHTML = this.context.sanitizeHtml(htmlString);
}
}
customElements.define('hello-world', HelloWorld);
Updated 25 days ago