index.html

<link rel="icon" href="/src/favicon.ico" />

<h2>Normal Import</h2>
<pre class="full"></pre>
<pre class="named"></pre>

<h2>Safe Fetch</h2>
<pre class="safe-fetch-status"></pre>
<pre class="safe-fetch"></pre>
<pre class="safe-fetch-query-status"></pre>
<pre class="safe-fetch-query"></pre>

<h2>Safe Fetch Subdirectory</h2>
<pre class="safe-fetch-subdir-status"></pre>
<pre class="safe-fetch-subdir"></pre>
<pre class="safe-fetch-subdir-special-characters-status"></pre>
<pre class="safe-fetch-subdir-special-characters"></pre>

<h2>Unsafe Fetch</h2>
<pre class="unsafe-fetch-status"></pre>
<pre class="unsafe-fetch"></pre>
<pre class="unsafe-fetch-8498-status"></pre>
<pre class="unsafe-fetch-8498"></pre>
<pre class="unsafe-fetch-8498-2-status"></pre>
<pre class="unsafe-fetch-8498-2"></pre>

<h2>Safe /@fs/ Fetch</h2>
<pre class="safe-fs-fetch-status"></pre>
<pre class="safe-fs-fetch"></pre>
<pre class="safe-fs-fetch-query-status"></pre>
<pre class="safe-fs-fetch-query"></pre>
<pre class="safe-fs-fetch-special-characters-status"></pre>
<pre class="safe-fs-fetch-special-characters"></pre>

<h2>Unsafe /@fs/ Fetch</h2>
<pre class="unsafe-fs-fetch-status"></pre>
<pre class="unsafe-fs-fetch"></pre>
<pre class="unsafe-fs-fetch-8498-status"></pre>
<pre class="unsafe-fs-fetch-8498"></pre>
<pre class="unsafe-fs-fetch-8498-2-status"></pre>
<pre class="unsafe-fs-fetch-8498-2"></pre>

<h2>Nested Entry</h2>
<pre class="nested-entry"></pre>

<h2>Denied</h2>
<pre class="unsafe-dotenv"></pre>

<script type="module">
  import '../../entry'
  import json, { msg } from '../../safe.json'

  function joinUrlSegments(a, b) {
    if (!a || !b) {
      return a || b || ''
    }
    if (a[a.length - 1] === '/') {
      a = a.substring(0, a.length - 1)
    }
    if (b[0] !== '/') {
      b = '/' + b
    }
    return a + b
  }

  text('.full', JSON.stringify(json))
  text('.named', msg)

  const base = typeof BASE !== 'undefined' ? BASE : ''

  // inside allowed dir, safe fetch
  fetch(joinUrlSegments(base, '/src/safe.txt'))
    .then((r) => {
      text('.safe-fetch-status', r.status)
      return r.text()
    })
    .then((data) => {
      text('.safe-fetch', JSON.stringify(data))
    })

  // inside allowed dir with query, safe fetch
  fetch(joinUrlSegments(base, '/src/safe.txt?query'))
    .then((r) => {
      text('.safe-fetch-query-status', r.status)
      return r.text()
    })
    .then((data) => {
      text('.safe-fetch-query', JSON.stringify(data))
    })

  // inside allowed dir, safe fetch
  fetch(joinUrlSegments(base, '/src/subdir/safe.txt'))
    .then((r) => {
      text('.safe-fetch-subdir-status', r.status)
      return r.text()
    })
    .then((data) => {
      text('.safe-fetch-subdir', JSON.stringify(data))
    })

  // inside allowed dir, with special characters, safe fetch
  fetch(
    joinUrlSegments(
      base,
      '/src/special%20characters%20%C3%A5%C3%A4%C3%B6/safe.txt',
    ),
  )
    .then((r) => {
      text('.safe-fetch-subdir-special-characters-status', r.status)
      return r.text()
    })
    .then((data) => {
      text('.safe-fetch-subdir-special-characters', JSON.stringify(data))
    })

  // outside of allowed dir, treated as unsafe
  fetch(joinUrlSegments(base, '/unsafe.txt'))
    .then((r) => {
      text('.unsafe-fetch-status', r.status)
      return r.text()
    })
    .then((data) => {
      text('.unsafe-fetch', data)
    })
    .catch((e) => {
      console.error(e)
    })

  // outside of allowed dir with special characters #8498
  fetch(joinUrlSegments(base, '/src/%2e%2e%2funsafe%2etxt'))
    .then((r) => {
      text('.unsafe-fetch-8498-status', r.status)
      return r.text()
    })
    .then((data) => {
      text('.unsafe-fetch-8498', data)
    })
    .catch((e) => {
      console.error(e)
    })

  // outside of allowed dir with special characters 2 #8498
  fetch(joinUrlSegments(base, '/src/%252e%252e%252funsafe%252etxt'))
    .then((r) => {
      text('.unsafe-fetch-8498-2-status', r.status)
      return r.text()
    })
    .then((data) => {
      text('.unsafe-fetch-8498-2', data)
    })
    .catch((e) => {
      console.error(e)
    })

  // imported before, should be treated as safe
  fetch(joinUrlSegments(base, joinUrlSegments('/@fs/', ROOT) + '/safe.json'))
    .then((r) => {
      text('.safe-fs-fetch-status', r.status)
      return r.json()
    })
    .then((data) => {
      text('.safe-fs-fetch', JSON.stringify(data))
    })

  // imported before with query, should be treated as safe
  fetch(
    joinUrlSegments(base, joinUrlSegments('/@fs/', ROOT) + '/safe.json?query'),
  )
    .then((r) => {
      text('.safe-fs-fetch-query-status', r.status)
      return r.json()
    })
    .then((data) => {
      text('.safe-fs-fetch-query', JSON.stringify(data))
    })

  // not imported before, outside of root, treated as unsafe
  fetch(joinUrlSegments(base, joinUrlSegments('/@fs/', ROOT) + '/unsafe.json'))
    .then((r) => {
      text('.unsafe-fs-fetch-status', r.status)
      return r.json()
    })
    .then((data) => {
      text('.unsafe-fs-fetch', JSON.stringify(data))
    })
    .catch((e) => {
      console.error(e)
    })

  // outside root with special characters #8498
  fetch(
    joinUrlSegments(
      base,
      joinUrlSegments('/@fs/', ROOT) +
        '/root/src/%2e%2e%2f%2e%2e%2funsafe%2ejson',
    ),
  )
    .then((r) => {
      text('.unsafe-fs-fetch-8498-status', r.status)
      return r.json()
    })
    .then((data) => {
      text('.unsafe-fs-fetch-8498', JSON.stringify(data))
    })

  // outside root with special characters 2 #8498
  fetch(
    joinUrlSegments(
      base,
      joinUrlSegments('/@fs/', ROOT) +
        '/root/src/%252e%252e%252f%252e%252e%252funsafe%252ejson',
    ),
  )
    .then((r) => {
      text('.unsafe-fs-fetch-8498-2-status', r.status)
      return r.json()
    })
    .then((data) => {
      text('.unsafe-fs-fetch-8498-2', JSON.stringify(data))
    })

  // not imported before, inside root with special characters, treated as safe
  fetch(
    joinUrlSegments(
      base,
      joinUrlSegments('/@fs/', ROOT) +
        '/root/src/special%20characters%20%C3%A5%C3%A4%C3%B6/safe.json',
    ),
  )
    .then((r) => {
      text('.safe-fs-fetch-special-characters-status', r.status)
      return r.json()
    })
    .then((data) => {
      text('.safe-fs-fetch-special-characters', JSON.stringify(data))
    })

  // .env, denied by default
  fetch(joinUrlSegments(base, joinUrlSegments('/@fs/', ROOT) + '/root/.env'))
    .then((r) => {
      text('.unsafe-dotenv', r.status)
    })
    .catch((e) => {
      console.error(e)
    })

  function text(sel, text) {
    document.querySelector(sel).textContent = text
  }
</script>