scripts/dataurl-escapes.html

<!DOCTYPE html>
<p>
  This script checks to see what characters need to be escaped in a data URL
  (in addition to % for percent-encoded hexadecimal escapes) for a browser to
  parse it correctly. This information is used to implement esbuild's
  <code>dataurl</code> loader. Here is what your current browser requires:
</p>
<pre id="result"></pre>
<p>
  The answer that works across Chrome, Firefox, and Safari appears to be:
  <br>
  <br>Always percent-encode these values: <code>0x09, 0x0A, 0x0D, 0x23</code>
  <br>Only percent-encode these values in the trailing position: <code>0x00 to 0x08, 0x0B, 0x0C, 0x0E to 0x20</code>
</p>
<script>

  function percentEncode(i) {
    if (i >= 0x80) return encodeURIComponent(String.fromCharCode(i))
    return '%' + (0x100 | i).toString(16).slice(-2)
  }

  async function urlDoesDecodeTo(url, to) {
    return to === await fetch(url).then(r => r.text())
  }

  async function check() {
    const shouldEncode = []

    for (let i = 0; i <= 0xFF; i++) {
      const ch = String.fromCharCode(i)
      const chPercent = percentEncode(i)

      if (!await urlDoesDecodeTo('data:text/plain,' + chPercent, ch)) {
        throw new Error('Assertion failed: Cannot decode ' + chPercent)
      }

      const leading = await urlDoesDecodeTo('data:text/plain,' + ch + 'foo', ch + 'foo')
      const trailing = await urlDoesDecodeTo('data:text/plain,foo' + ch, 'foo' + ch)
      const embedded = await urlDoesDecodeTo('data:text/plain,foo' + ch + 'foo', 'foo' + ch + 'foo')

      if (!leading && !trailing && !embedded) {
        shouldEncode.push('U+' + i.toString(16) + ' (' + ch + ')')
      } else {
        if (!leading) shouldEncode.push('U+' + i.toString(16) + ' (' + ch + ') leading')
        if (!trailing) shouldEncode.push('U+' + i.toString(16) + ' (' + ch + ') trailing')
        if (!embedded) shouldEncode.push('U+' + i.toString(16) + ' (' + ch + ') embedded')
      }
    }

    document.getElementById('result').textContent = 'shouldEncode = ' + JSON.stringify(shouldEncode, null, 2)
  }

  check()

</script>