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);