CodePen Embed - Resolving and Fetching a DNSLink with @helia/verified-fetch and custom DoH endpoint example

<div id="app">
  <div>
    <h1>@helia/verified-fetch DNSLink & ENS Example</h1>
    <div class="card">
    </div>
    <p id="output" class="output"></p>
  </div>
</div>

import { createVerifiedFetch } from 'https://esm.sh/@helia/verified-fetch@1.5.0?bundle-deps'
import { dnsJsonOverHttps } from 'https://esm.sh/@multiformats/dns/resolvers?bundle-deps'
const output = document.getElementById('output')

const verifiedFetch = await createVerifiedFetch({
  dnsResolvers: {
    'eth.': dnsJsonOverHttps('https://dns.eth.limo/dns-query'),
    '.': dnsJsonOverHttps('https://cloudflare-dns.com/dns-query')
  },
})

const resp = await verifiedFetch('ipns://vitalik.eth/images/scaling-files/cryptokitties.png')
const blob = await resp.blob()
const imgEl = document.createElement('img')
imgEl.setAttribute('src', URL.createObjectURL(blob))
output.appendChild(imgEl)

This Pen is owned by Daniel Norman on CodePen.

See more by @2color on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.