---
updatedAt: 2026-04-30T13:36:14.000Z
agentTools:
  projectIndex: https://developer.ixon.cloud/llms.txt
---

# Sanitization

The <Anchor label="`sanitizeHtml`" target="_blank" href="https://cdn.ixon.cloud/custom-widgets/interfaces/ComponentContext.ComponentContext.html#sanitizehtml">`sanitizeHtml`</Anchor> method on the `ComponentContext` 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!

```Text Vue
<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>
```
```Text Svelte
<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>
```
```Text Plain JS
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);
```