Skip to content

feat: ipfs-check can be embedded as iframe #102

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Sep 13, 2025
Merged

feat: ipfs-check can be embedded as iframe #102

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e65ede2
feat: ipfs-check can be embedded as iframe
SgtPooki Sep 9, 2025
a2b6359
feat(web): improve iframe integration and UX
lidel Sep 11, 2025
747d675
feat(web): enhance UI and bundle fonts locally
lidel Sep 12, 2025
48c6eac
feat(web): add Inter font and use as default
lidel Sep 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added web/fonts/Inter-Regular-latin.woff2
View file
Open in desktop
Binary file not shown.
Binary file added web/fonts/Montserrat-Light-latin.woff2
View file
Open in desktop
Binary file not shown.
170 changes: 100 additions & 70 deletions web/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,53 +2,74 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IPFS Check</title>
<meta name="description" content="Test IPFS content retrievability and diagnose connectivity issues. Check if your CID can be retrieved from the IPFS network and identify working providers.">
<meta name="keywords" content="IPFS, CID, content retrieval, IPFS check, IPFS diagnostic, IPFS debugging, DHT, Amino DHT, IPNI, Bitswap, peer connectivity, IPFS troubleshooting">
<meta name="author" content="IPFS Project">
<title>IPFS Retrieval Check</title>
<script>
// Detect iframe immediately to prevent header flash
if (window.self !== window.top) {
document.documentElement.classList.add('in-iframe');
}
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="output.css">
<link rel="canonical" href="https://check.ipfs.network/">
<link rel="icon shortcut" href="data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlo89/56ZQ/8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACUjDu1lo89/6mhTP+zrVP/nplD/5+aRK8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHNiIS6Wjz3/ubFY/761W/+vp1D/urRZ/8vDZf/GvmH/nplD/1BNIm8AAAAAAAAAAAAAAAAAAAAAAAAAAJaPPf+knEj/vrVb/761W/++tVv/r6dQ/7q0Wf/Lw2X/y8Nl/8vDZf+tpk7/nplD/wAAAAAAAAAAAAAAAJaPPf+2rVX/vrVb/761W/++tVv/vrVb/6+nUP+6tFn/y8Nl/8vDZf/Lw2X/y8Nl/8G6Xv+emUP/AAAAAAAAAACWjz3/vrVb/761W/++tVv/vrVb/761W/+vp1D/urRZ/8vDZf/Lw2X/y8Nl/8vDZf/Lw2X/nplD/wAAAAAAAAAAlo89/761W/++tVv/vrVb/761W/++tVv/r6dQ/7q0Wf/Lw2X/y8Nl/8vDZf/Lw2X/y8Nl/56ZQ/8AAAAAAAAAAJaPPf++tVv/vrVb/761W/++tVv/vbRa/5aPPf+emUP/y8Nl/8vDZf/Lw2X/y8Nl/8vDZf+emUP/AAAAAAAAAACWjz3/vrVb/761W/++tVv/vrVb/5qTQP+inkb/op5G/6KdRv/Lw2X/y8Nl/8vDZf/Lw2X/nplD/wAAAAAAAAAAlo89/761W/++tVv/sqlS/56ZQ//LxWb/0Mlp/9DJaf/Kw2X/oJtE/7+3XP/Lw2X/y8Nl/56ZQ/8AAAAAAAAAAJaPPf+9tFr/mJE+/7GsUv/Rymr/0cpq/9HKav/Rymr/0cpq/9HKav+xrFL/nplD/8vDZf+emUP/AAAAAAAAAACWjz3/op5G/9HKav/Rymr/0cpq/9HKav/Rymr/0cpq/9HKav/Rymr/0cpq/9HKav+inkb/nplD/wAAAAAAAAAAAAAAAKKeRv+3slb/0cpq/9HKav/Rymr/0cpq/9HKav/Rymr/0cpq/9HKav+1sFX/op5G/wAAAAAAAAAAAAAAAAAAAAAAAAAAop5GUKKeRv/Nxmf/0cpq/9HKav/Rymr/0cpq/83GZ/+inkb/op5GSAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAop5G16KeRv/LxWb/y8Vm/6KeRv+inkaPAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAop5G/6KeRtcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/n8AAPgfAADwDwAAwAMAAIABAACAAQAAgAEAAIABAACAAQAAgAEAAIABAACAAQAAwAMAAPAPAAD4HwAA/n8AAA==">
<script src="script.js" defer></script>
<script defer data-domain="check.ipfs.network" src="https://plausible.io/js/script.tagged-events.js"></script>
</head>
<body class="font-sans bg-gray-50 text-gray-900 m-0">
<header>
<h1 class="inline-block px-3 py-3 m-0 leading-tight">
<a class="no-underline block text-lg font-bold text-gray-900" href="https://ipfs.io">IPFS <span class="text-ipfs-teal-500 font-semibold">Check</span></a>
<span class="block text-xs font-semibold text-gray-600">Have you seen my CID?</span>
</h1>
<body class="inter bg-white text-gray-900 m-0">
<header id="app-header" class="flex items-center justify-between p-4 mb-6" style="background-color: #0B3A53; border-bottom: 0.5rem solid #69c4cd;">
<div class="flex items-center gap-3">
<!-- IPFS Logo from cid.ipfs.tech -->
<a href="https://ipfs.tech" target="_blank" rel="noopener noreferrer" class="flex-shrink-0">
<img src="https://cid.ipfs.tech/ipfs_logo.9a9820f5.svg" style="height:50px">
</a>
<!-- App Name -->
<h1 class="montserrat m-0 px-2 font-light tracking-wider" style="color: #69c4cd; font-size: 1.5rem; text-transform: uppercase;">Retrieval Check</h1>
</div>
<!-- GitHub Link from cid.ipfs.tech -->
<a href="https://github.com/ipfs/ipfs-check" target="_blank" rel="noopener noreferrer" class="hover:opacity-80">
<svg height="24" viewBox="0 0 32.58 31.77"><path fill="#7f8491" d="M16.29 0a16.29 16.29 0 0 0-5.15 31.75c.82.15 1.11-.36 1.11-.79v-2.77C7.7 29.18 6.74 26 6.74 26a4.36 4.36 0 0 0-1.81-2.39c-1.47-1 .12-1 .12-1a3.43 3.43 0 0 1 2.49 1.68 3.48 3.48 0 0 0 4.74 1.36 3.46 3.46 0 0 1 1-2.18c-3.62-.41-7.42-1.81-7.42-8a6.3 6.3 0 0 1 1.67-4.37 5.94 5.94 0 0 1 .16-4.31s1.37-.44 4.48 1.67a15.41 15.41 0 0 1 8.16 0c3.11-2.11 4.47-1.67 4.47-1.67a5.91 5.91 0 0 1 .2 4.28 6.3 6.3 0 0 1 1.67 4.37c0 6.26-3.81 7.63-7.44 8a3.85 3.85 0 0 1 1.11 3v4.47c0 .53.29.94 1.12.78A16.29 16.29 0 0 0 16.29 0z"/></svg>
</a>
</header>
<main>
<section class="max-w-3xl mx-auto leading-relaxed text-gray-800 px-2 pb-8">
<h2 class="m-0 py-0 px-2 text-xl font-bold">
Check the retrievability of data by CID
</h2>
<p class="m-0 py-0 mt-2 px-2 text-lg font-normal">
Paste in a Content ID and the multiaddr (optional) of a host to check if it is expected to be retrievable
</p>
<section id="app-description" class="bg-white">
<div class="max-w-4xl mx-auto px-2 md:px-8">
<h2 class="text-lg font-bold text-gray-800">
Test IPFS Content Retrieval
</h2>
<p class="mt-2 text-base text-gray-600">
Verify if a CID can be retrieved from the IPFS network.
Optionally test a specific peer by providing its Multiaddr.
</p>
</div>
</section>
<section class="bg-white">
<form id="queryForm" class="max-w-4xl mx-auto leading-relaxed text-gray-800 rounded-lg py-8 px-2 md:px-8">
<label class="block mt-3 text-xs font-bold" for="cid">CID or multihash</label>
<label class="block mt-3 text-sm pb-2 tracking-wider uppercase w-full" style="color: var(--color-ipfs-teal-500);" for="cid">CID (or Multihash)</label>
<input class="block w-full p-2 border border-gray-300 rounded" type="text" id="cid" name="cid" required>
<label class="block mt-3 text-xs font-bold" for="ma">Multiaddr (optional)</label>
<label class="block mt-3 text-sm pb-2 tracking-wider uppercase w-full" style="color: var(--color-ipfs-teal-500);" for="ma">Multiaddr (optional)</label>
<input class="block w-full p-2 border border-gray-300 rounded" type="text" id="multiaddr" name="multiaddr" placeholder="/p2p/12D3Koo..." />
<details class="mt-3">
<summary class="text-xs font-bold">Backend Config</summary>
<label class="block mt-3 text-xs font-bold" for="backendURL">Backend URL</label>
<summary class="text-xs font-bold cursor-pointer">Backend Config</summary>
<label class="block mt-3 text-sm pb-2 tracking-wider uppercase w-full" style="color: var(--color-ipfs-teal-500);" for="backendURL">Backend URL</label>
<input class="block w-full p-2 border border-gray-300 rounded" type="url" id="backendURL" name="backendURL" value="https://ipfs-check-backend.ipfs.io" placeholder="https://ipfs-check-backend.ipfs.io" list="defaultBackendURLs" required>
<datalist id="defaultBackendURLs">
<option value="https://ipfs-check-backend.ipfs.io">
</datalist>
<label class="block mt-3 text-xs font-bold" for="ipniIndexer">IPNI Indexer</label>
<label class="block mt-3 text-sm pb-2 tracking-wider uppercase w-full" style="color: var(--color-ipfs-teal-500);" for="ipniIndexer">IPNI Indexer</label>
<input class="block w-full p-2 border border-gray-300 rounded" type="url" id="ipniIndexer" name="ipniIndexer" value="https://cid.contact" placeholder="https://cid.contact" list="defaultIndexers" required>
<datalist id="defaultIndexers">
<option value="https://cid.contact">
</datalist>
<div class="mt-3">
<label class="block text-xs font-bold" for="timeoutSeconds">Check Timeout (seconds)</label>
<input class="block w-full mt-2" type="range" id="timeoutSeconds" name="timeoutSeconds" min="5" max="300" value="60" step="1">
<output class="block font-bold text-xs" for="timeoutSeconds" id="timeoutValue">60</output>
<label class="block text-sm pb-2 tracking-wider uppercase w-full" style="color: var(--color-ipfs-teal-500);" for="timeoutSeconds">Check Timeout (seconds)</label>
<input class="block w-full mt-2" style="accent-color: var(--color-ipfs-teal-500);" type="range" id="timeoutSeconds" name="timeoutSeconds" min="5" max="300" value="30" step="1">
<output class="block font-bold text-xs" for="timeoutSeconds" id="timeoutValue">30</output>
</div>
<label class="inline-block mt-3 mr-3 text-xs font-bold" for="httpRetrieval">Check HTTP retrieval</label>
<label class="inline-block mt-3 mr-3 text-sm tracking-wider uppercase" style="color: var(--color-ipfs-teal-500);" for="httpRetrieval">Check HTTP retrieval</label>
<input class="inline-block p-2" type="checkbox" id="httpRetrieval" name="httpRetrieval" checked>
</details>
<div class="block my-6">
Expand All @@ -57,69 +78,77 @@ <h2 class="m-0 py-0 px-2 text-xl font-bold">
<circle class="opacity-20" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-80" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
Run Test
<span id="button-text">Run Test</span>
</button>
</div>
<div id="output" class="leading-relaxed font-medium"></div>
<details class="mt-3">
<details class="mt-3" style="display: none;">
<summary class="text-xs font-bold">Raw Output</summary>
<div class="bg-gray-900 text-green-200 rounded p-4 overflow-x-auto mt-2">
<pre style="white-space:pre;" class="leading-relaxed font-medium language-json"><code id="raw-output"></code></pre>
</div>
</details>
</form>
</section>
<section class="max-w-4xl mx-auto leading-relaxed text-gray-800 py-8 px-2 md:px-8">
<h2 class="text-xl font-bold">Where do I find my multiaddr?</h2>
<ul class="list-disc ml-6">
<li class="pb-2">
<strong>Using IPFS Desktop or IPFS WebUI</strong>
<section id="app-help" class="max-w-4xl mx-auto leading-relaxed text-gray-800 py-8 px-2 md:px-8">
<h2 class="text-xl font-bold mb-6">FAQ</h2>

<details class="mb-4 border border-gray-200 rounded-lg p-4">
<summary class="text-lg font-bold cursor-pointer hover:text-gray-600">Where do I find my Multiaddr?</summary>
<div class="mt-4">
<ul class="list-disc ml-6">
<li>Open the IPFS WebUI "Status" page via the IPFS Desktop menu or by visiting "http://127.0.0.1:5001/webui" (when using the default config settings)</li>
<li>If you want to test your peerID rather than a particular address enter <code class="bg-gray-100 px-1 rounded">/p2p/{YourPeerID}</code></li>
<li>If you want to test a particular address then click the "Advanced" dropdown to see the node's addresses</li>
<li class="pb-2">
<strong>Using <a href="https://docs.ipfs.tech/install/ipfs-desktop/" target="_blank" rel="noopener noreferrer">IPFS Desktop</a> or IPFS WebUI</strong>
<ul class="list-disc ml-6">
<li>Open the IPFS WebUI "Status" page via the IPFS Desktop menu or by visiting <code class="bg-gray-100 px-1 rounded">http://127.0.0.1:5001/webui</code> (when using the default config settings)</li>
<li>If you want to test your PeerID rather than a particular address enter <code class="bg-gray-100 px-1 rounded">/p2p/{YourPeerID}</code></li>
<li>If you want to test a particular address then click the "Advanced" dropdown to see the node's addresses</li>
</ul>
</li>
<li class="pb-2">
<strong>Using the <a href="https://docs.ipfs.tech/install/command-line/" target="_blank" rel="noopener noreferrer">Kubo CLI</a></strong>
<ul class="list-disc ml-6">
<li>If you want to test your PeerID rather than a particular address run <code class="bg-gray-100 px-1 rounded">ipfs id</code> and enter <code class="bg-gray-100 px-1 rounded">/p2p/{YourPeerID}</code></li>
<li>If you want to test a particular address then choose an entry from the list of addresses output by <code class="bg-gray-100 px-1 rounded">ipfs id</code></li>
</ul>
</li>
</ul>
</li>
<li class="pb-2">
<strong>Using the kubo CLI</strong>
</div>
</details>

<details class="mb-4 border border-gray-200 rounded-lg p-4">
<summary class="text-lg font-bold cursor-pointer hover:text-gray-600">What does it mean if I get an error?</summary>
<div class="mt-4">
<ul class="list-disc ml-6">
<li>If you want to test your peerID rather than a particular address run <code class="bg-gray-100 px-1 rounded">ipfs id</code> and enter <code class="bg-gray-100 px-1 rounded">/p2p/{YourPeerID}</code></li>
<li>If you want to test a particular address then choose an entry from the list of addresses output by <code class="bg-gray-100 px-1 rounded">ipfs id</code></li>
<li class="pb-2">
<strong>Could not connect to the Multiaddr</strong>. Machines on the internet cannot talk to your machine.
Fix your firewall, add port forwarding, or use a relay.
</li>
<li class="pb-2">
<strong>Could not find address in the DHT</strong>. Your machine is either not connected to the IPFS Public DHT (Amino DHT)
(even as a client), or is not advertising the address that you are testing with. As a result no one will be
able to contact you on that address if they only learn about your PeerID, as is the case for content
advertised in the DHT.
</li>
<li class="pb-2">
<strong>Multihash not advertised in the DHT</strong>. Your machine has not advertised that it has the given content in the
IPFS Public DHT (Amino DHT). This means that other machines will have to discover that you have the content in some other
way (e.g. pre-connecting to you optimistically, pre-connecting to you since related content is already
advertised by you, some rendezvous service, being on the same LAN, etc.). If using Kubo consider enabling the
<a href="https://github.com/ipfs/kubo/blob/master/docs/config.md#routingaccelerateddhtclient" target="_blank" rel="noopener noreferrer">Accelerated DHT Client</a>,
which will advertise content faster and in particular should enable you to continue to republish your advertisements every 24hrs as
required by the network.
</li>
<li class="pb-2">
<strong>Peer has not responded that it has the CID</strong>. Your node does not think it has the data you think it does,
or it took too long to respond. Until this is resolved, other machines will be unable to download that
content from you.
</li>
</ul>
</li>
</ul>
<h2 class="text-xl font-bold mt-8">What does it mean if I get an error?</h2>
<ul class="list-disc ml-6">
<li class="pb-2">
<strong>Could not connect to the multiaddr</strong>. Machines on the internet cannot talk to your machine.
Fix your firewall, add port forwarding, or use a relay.
</li>
<li class="pb-2">
<strong>Could not find address in the dht</strong>. Your machine is either not connected to the IPFS Public DHT
(even as a client), or is not advertising the address that you are testing with. As a result no one will be
able to contact you on that address if they only learn about your peerID, as is the case for content
advertised in the IPFS Public DHT
</li>
<li class="pb-2">
<strong>Multihash not advertised in the dht</strong>. Your machine has not advertised that it has the given content in the
IPFS Public DHT. This means that other machines will have to discover that you have the content in some other
way (e.g. pre-connecting to you optimistically, pre-connecting to you since related content is already
advertised by you, some rendezvous service, being on the same LAN, etc.). If using kubo consider enabling the
<a class="text-blue-600 underline" href="https://github.com/ipfs/kubo/blob/master/docs/experimental-features.md#accelerated-dht-client">Accelerated DHT Client</a>,
which will advertise content faster and in particular should enable you to continue to republish your advertisements every 24hrs as
required by the network.
</li>
<li class="pb-2">
<strong>Peer has not responded that it has the CID</strong>. Your node does not think it has the data you think it does,
or it took too long to respond. Until this is resolved other machines will be unable to download that
content from you.
</li>
</ul>
</div>
</details>
</section>
</main>
<footer class="text-center py-3">
<a class="text-blue-600 underline" href="https://github.com/ipfs/ipfs-check">Github</a>
</footer>
<style>
.animate-spin { animation: spin 2s linear infinite }

Expand All @@ -135,5 +164,6 @@ <h2 class="text-xl font-bold mt-8">What does it mean if I get an error?</h2>
opacity: 50% !important;
}
</style>
<div id="__iframe_sentinel" aria-hidden="true"></div>
</body>
</html>
Loading
Loading