innerHTMLでalertが表示されてしまうサンプル

<h1>innerHTMLでalertが表示されてしまうサンプル</h1>
<script type="module">
import DOMPurify from 'https://cdn.jsdelivr.net/npm/dompurify/dist/purify.es.mjs'

if (!Element.prototype.setHTML) {
  Object.defineProperty(Element.prototype, 'setHTML', {
    configurable: true,
    writable: true,
    value: function setHTML(html) {
      const input = String(html ?? '')
      const config = {
        USE_PROFILES: { html: true },
      }
      const sanitized = DOMPurify.sanitize(input, config)
      this.innerHTML = sanitized
    },
  })
}

const h1 = document.querySelector('h1')
h1.setHTML('TEST:<img src=x onerror=alert(1)>')
</script>

元記事を表示する