Skip to content

Latest commit

 

History

History
158 lines (139 loc) · 2.81 KB

catch-potential-xss-vue.md

File metadata and controls

158 lines (139 loc) · 2.81 KB
Raw

Enforce the use of dompurify when using dangerouslySetInnerHtml

Fail

<template>
    <div v-html="message" />
</template>

<script>
  const rawHtmlInput = '<a onmouseover=\"alert(document.cookie)\">Hover me!</a>';
  export default {
      data () {
          return {
              message: rawHtmlInput
          }
      }
  }
</script>
<template>
    <div v-html="message" />
</template>

<script>
  const rawHtmlObject = { rawHtml: '<a onmouseover=\"alert(document.cookie)\">Hover me!</a>' };
  export default {
      data () {
          return {
              message: rawHtmlObject[rawHtml]
          }
      }
  }
</script>
<template>
    <div v-html="'message'" />
</template>
<template>
    <div v-html="message" />
</template>

<script>
  let futureRawHtml = '';
  futureRawHtml = '<a onmouseover=\"alert(document.cookie)\">Hover me!</a>';
  export default {
      data () {
          return {
              message: futureRawHtml
          }
      }
  }
</script>

Pass

<template>
    <div v-html="message"></div>
</template>

<script>
  import DOMPurify from 'dompurify';
  const sanitizedInput = DOMPurify.sanitize('<a onmouseover=\"alert(document.cookie)\">Hover me!</a>');
  export default {
    data () {
      return {
        message: sanitizedInput,
      }
    }
  }
</script>
<template>
  <div v-html="message"></div>
</template>

<script>
  import DOMPurify from 'dompurify';
  const rawHtml = '<a onmouseover=\"alert(document.cookie)\">Hover me!</a>';
  const sanitizedInput = DOMPurify.sanitize(rawHtml);
  export default {
    data () {
      return {
        message: sanitizedInput,
      }
    }
  }
</script>
<template>
    <div v-html="message"></div>
</template>

<script>
  import DOMPurify from 'dompurify';
  const rawHtml = '<a onmouseover=\"alert(document.cookie)\">Hover me!</a>';
  const sanitizedInput = { html: DOMPurify.sanitize(rawHtml) };
  export default {
    data () {
      return {
        message: sanitizedInput[html],
      }
    }
  }
</script>
<template>
    <div v-html="message"></div>
</template>

<script>
  import DOMPurify from 'dompurify';
  const rawHtml = '<a onmouseover=\"alert(document.cookie)\">Hover me!</a>';
  const sanitizedInput = { html: DOMPurify.sanitize(rawHtml) };
  export default {
    data () {
      return {
        message: sanitizedInput[html],
      }
    }
  }
</script>
<template>
  <div v-html="message"></div>
</template>

<script>
  import DOMPurify from 'dompurify';
  const rawHtml = '<a onmouseover=\"alert(document.cookie)\">Hover me!</a>';
  const sanitizedHtml = DOMPurify.sanitize(rawHtml);
  const sanitizedInput = { html: sanitizedHtml };
  export default {
    data () {
      return {
        message: sanitizedInput[html],
      }
    }
  }
</script>