-
Notifications
You must be signed in to change notification settings - Fork 29
/
ipfs-protocol-handler-support-tests.html
153 lines (139 loc) · 9.89 KB
/
ipfs-protocol-handler-support-tests.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/tachyons@4.11.1/css/tachyons.min.css" type="text/css">
<link rel="stylesheet" href="https://unpkg.com/ipfs-css@0.13.1/ipfs.css" type="text/css">
</head>
<body class='sans-serif bg-white'>
<header class='pv3 ph2 ph3-l bg-navy cf'>
<a href="https://ipfs.io/" title='ipfs.io'>
<img src="https://ipfs.io/images/ipfs-logo.svg" class='v-mid' style='height:50px' />
</a>
<h1 class='aqua fw2 montserrat dib ma0 pv2 ph1 v-mid fr f3 lh-copy'><code></code> protocol handler smoke-tests</h1>
</header>
<section class='pv4 pl2 pl5-l'>
<p class="charcoal-muted">
Below are checks for protocol handler support defined in <a class='charcoal-muted hover-teal link underline' href="https://github.com/ipfs/in-web-browsers/blob/master/ADDRESSING.md">IPFS Addressing Spec</a>.<br/>
Source: <a class='charcoal-muted hover-teal link underline' href="https://github.com/ipfs/in-web-browsers">ipfs/in-web-browsers</a>
</p>
<div class='pt4'>
<div class='db pb1 w-100 fw2 tracked ttu f3 teal-muted link'>
A HREF
</div>
<p>Clicking on each link should result in the same content loading as HTTP equivalent:</p>
<ol class='f4 ml5 pl0 list'>
<li class="lh-copy pv3">
<a class="link navy hover-teal link underline" href="ipfs://QmbWqxBEKC3P8tqsKc98xmWNzrzDtRLMiMPL8wBuTGsMnR">ipfs://QmbWqxBEKC3P8tqsKc98xmWNzrzDtRLMiMPL8wBuTGsMnR</a> (CIDv0)<br/>
→ <a class="link navy hover-teal link underline" href="https://ipfs.io/ipfs/QmbWqxBEKC3P8tqsKc98xmWNzrzDtRLMiMPL8wBuTGsMnR">https://ipfs.io/ipfs/QmbWqxBEKC3P8tqsKc98xmWNzrzDtRLMiMPL8wBuTGsMnR</a>
</li>
<li class="lh-copy pv3">
<a class="link navy hover-teal link underline" href="ipfs://bafybeigdyrzt5sfp7udm7hu76uh7y26nf3efuylqabf3oclgtqy55fbzdi">ipfs://bafybeigdyrzt5sfp7udm7hu76uh7y26nf3efuylqabf3oclgtqy55fbzdi</a> (CIDv1)<br/>
→ <a class="link navy hover-teal link underline" href="https://ipfs.io/ipfs/bafybeigdyrzt5sfp7udm7hu76uh7y26nf3efuylqabf3oclgtqy55fbzdi">https://ipfs.io/ipfs/bafybeigdyrzt5sfp7udm7hu76uh7y26nf3efuylqabf3oclgtqy55fbzdi</a>
</li>
<li class="lh-copy pv3">
<a class="link navy hover-teal link underline" href="ipfs://bafybeiemxf5abjwjbikoz4mc3a3dla6ual3jsgpdr4cjr3oz3evfyavhwq/wiki/Vincent_van_Gogh.html#Style_and_works">ipfs://bafybeiemxf5abjwjbikoz4mc3a3dla6ual3jsgpdr4cjr3oz3evfyavhwq/wiki/Vincent_van_Gogh.html#Style_and_works</a><br/>
→ <a class="link navy hover-teal link underline" href="https://ipfs.io/ipfs/bafybeiemxf5abjwjbikoz4mc3a3dla6ual3jsgpdr4cjr3oz3evfyavhwq/wiki/Vincent_van_Gogh.html#Style_and_works">https://ipfs.io/ipfs/bafybeiemxf5abjwjbikoz4mc3a3dla6ual3jsgpdr4cjr3oz3evfyavhwq/wiki/Vincent_van_Gogh.html#Style_and_works</a>
</li>
<li class="lh-copy pv3">
<a class="link navy hover-teal link underline" href="ipns://en.wikipedia-on-ipfs.org/wiki/Vincent_van_Gogh.html#Style_and_works">ipns://en.wikipedia-on-ipfs.org/wiki/Vincent_van_Gogh.html#Style_and_works</a><br/>
→ <a class="link navy hover-teal link underline" href="https://ipfs.io/ipns/en.wikipedia-on-ipfs.org/wiki/Vincent_van_Gogh.html#Style_and_works">https://ipfs.io/ipns/en.wikipedia-on-ipfs.org/wiki/Vincent_van_Gogh.html#Style_and_works</a>
</li>
</ol>
</div>
<div class='pt4'>
<div class='db pb1 w-100 fw2 tracked ttu f3 teal-muted link'>
ORIGIN ISOLATION
</div>
<p>Open diagnostic page at <a href="ipfs://bafkreifik2tbj5esf74sf2qwft2x3vuxaqmthwh3d2qx6abpcroirqpt7i" class="f4 link navy hover-teal link underline">ipfs://bafkreifik2tbj5esf74sf2qwft2x3vuxaqmthwh3d2qx6abpcroirqpt7i</a></p>
<p>It should self-report an unique Origin based on the URL authority component (<code>baf..</code>), as stated in <a href="https://tools.ietf.org/html/rfc2396#section-3.2" class="link navy hover-teal link underline">RFC 2396</a>.</p>
<p>This is prerequisite for secure sandbox provided by <a href="https://en.wikipedia.org/wiki/Same-origin_policy" class="link navy hover-teal link underline">same-origin policy</a></p>
</div>
<div class='pt5'>
<div class='db pb1 w-100 fw2 tracked ttu f3 teal-muted link'>
IMG SRC
</div>
<p>Embedding via<br/><code class="bg-snow charcoal"><img src="ipfs://QmbWqxBEKC3P8tqsKc98xmWNzrzDtRLMiMPL8wBuTGsMnR" /></code></p>
<img src="ipfs://QmbWqxBEKC3P8tqsKc98xmWNzrzDtRLMiMPL8wBuTGsMnR" class="dib ml5 bg-red" width="225px" height="150px" alt="→ if you see this ipfs:// failed"/>
<p>..should produce the same result as: <br/><code class="bg-snow charcoal"><img src="https://ipfs.io/ipfs/QmbWqxBEKC3P8tqsKc98xmWNzrzDtRLMiMPL8wBuTGsMnR" /></code></p>
<img src="https://ipfs.io/ipfs/QmbWqxBEKC3P8tqsKc98xmWNzrzDtRLMiMPL8wBuTGsMnR" class="dib ml5 bg-red" width="225px" height="150px" alt="→ if you see this http:// failed"/>
</div>
<div class='pt5'>
<div class='db pb1 w-100 fw2 tracked ttu f3 teal-muted link'>
VIDEO SRC
</div>
<p>Embedding via<br/><code class="bg-snow charcoal"><video src="ipfs://bafybeigwa5rlpq42cj3arbw27aprhjezhimhqkvhbb2kztjtdxyhjalr3q/big-buck-bunny_trailer.webm#t=5" ></code></p>
<video src="ipfs://bafybeigwa5rlpq42cj3arbw27aprhjezhimhqkvhbb2kztjtdxyhjalr3q/big-buck-bunny_trailer.webm#t=5" controls width="320px" height="180px" class="dib ml5 bg-red"></video>
<p>..should produce the same result as:<br/><code class="bg-snow charcoal"><video src="https://ipfs.io/ipfs/bafybeigwa5rlpq42cj3arbw27aprhjezhimhqkvhbb2kztjtdxyhjalr3q/big-buck-bunny_trailer.webm#t=5" ></code></p>
<video src="https://ipfs.io/ipfs/bafybeigwa5rlpq42cj3arbw27aprhjezhimhqkvhbb2kztjtdxyhjalr3q/big-buck-bunny_trailer.webm#t=5" controls width="320px" height="180px" class="dib ml5 bg-red"></video>
</div>
<!-- TODO: to avoid confusion when ipfs-companion is installed, disabled for now until https://github.com/ipfs-shipyard/ipfs-companion/issues/816 is fixed
<div class='pt4'>
<div class='db pb1 w-100 fw2 tracked ttu f3 teal-muted link'>
IFRAME SRC
</div>
<p>Embedding via<br/><code class="bg-snow charcoal"><iframe src="ipfs://bafybeiemxf5abjwjbikoz4mc3a3dla6ual3jsgpdr4cjr3oz3evfyavhwq/wiki/Vincent_van_Gogh.html" ></code></p>
<iframe sandbox src="ipfs://bafybeiemxf5abjwjbikoz4mc3a3dla6ual3jsgpdr4cjr3oz3evfyavhwq/wiki/Vincent_van_Gogh.html" width="320px" height="180px" class="dib bg-red"></iframe>
<p>Should work and produce the same result as<br/><code class="bg-snow charcoal"><iframe src="https://ipfs.io/ipfs/bafybeiemxf5abjwjbikoz4mc3a3dla6ual3jsgpdr4cjr3oz3evfyavhwq/wiki/Vincent_van_Gogh.html" ></code></p>
<iframe sandbox src="https://ipfs.io/ipfs/bafybeiemxf5abjwjbikoz4mc3a3dla6ual3jsgpdr4cjr3oz3evfyavhwq/wiki/Vincent_van_Gogh.html" width="320px" height="180px" class="dib bg-red"></iframe>
</div>
-->
<div class='pt5'>
<div class='db pb1 w-100 fw2 tracked ttu f3 teal-muted link'>
XHR (JS requests)
</div>
<p>Fetching data from <code class="bg-snow charcoal">ipfs://</code> via <code class="bg-snow charcoal">XMLHttpRequest</code>:</p>
<div id="xhrIpfs" class="ml5">(fetched data will appear here)</div>
<p>..should produce same result as <code class="bg-snow charcoal">XMLHttpRequest</code> to <code class="bg-snow charcoal">http://</code> gateway:</p>
<div id="xhrHttp" class="ml5">(fetched data will appear here)</div>
</div>
<div class='pt4'>
<div class='db pb1 w-100 fw2 tracked ttu f3 teal-muted link'>
fetch (JS requests)
</div>
<p>Fetching data from <code class="bg-snow charcoal">ipfs://</code> via <code class="bg-snow charcoal">fetch</code>:</p>
<div id="fetchIpfs" class="ml5">(fetched data will appear here)</div>
<p>..should produce same result as <code class="bg-snow charcoal">fetch</code> to a gateway over <code class="bg-snow charcoal">http://</code>:</p>
<div id="fetchHttp" class="ml5">(fetched data will appear here)</div>
</div>
</section>
<footer class='pv5 pl2 pl5-l'>
Source: <a class='charcoal-muted hover-teal link underline' href="https://github.com/ipfs/in-web-browsers">ipfs/in-web-browsers</a>
</footer>
<script type="text/javascript">
function init() {
async function xhrTest(uri, outputId) {
const xhrData = document.getElementById(outputId)
const xhr = new XMLHttpRequest()
xhr.onload = function () {
xhrData.innerText = "✅ OK! xhr.onload for " + uri
}
xhr.onerror = (err) => {
console.log('xhrTest failed', err);
xhrData.innerText = "💢 FAILED! xhr.onerror for " + uri + " (see error in Console) "
}
xhr.open('get', uri, true)
xhr.send()
}
xhrTest('ipfs://bafybeigdyrzt5sfp7udm7hu76uh7y26nf3efuylqabf3oclgtqy55fbzdi', 'xhrIpfs')
xhrTest('https://ipfs.io/ipfs/bafybeigdyrzt5sfp7udm7hu76uh7y26nf3efuylqabf3oclgtqy55fbzdi', 'xhrHttp')
async function fetchTest(uri, outputId) {
const fetchData = document.getElementById(outputId)
try {
const response = await fetch(uri)
fetchData.innerText = "✅ OK! successful fetch for " + uri
} catch (err) {
console.log('fetchTest failed', err);
fetchData.innerText = "💢 FAILED! error while fetch(" + uri + ") (see error in Console) "
}
}
fetchTest('ipfs://bafybeigdyrzt5sfp7udm7hu76uh7y26nf3efuylqabf3oclgtqy55fbzdi', 'fetchIpfs')
fetchTest('https://ipfs.io/ipfs/bafybeigdyrzt5sfp7udm7hu76uh7y26nf3efuylqabf3oclgtqy55fbzdi', 'fetchHttp')
}
if (document.addEventListener) document.addEventListener("DOMContentLoaded", init, false)
else if (document.attachEvent) document.attachEvent("onreadystatechange", init)
else window.onload = init
</script>
</body>
</html>