Skip to content

add tabs to app #39

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

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

add tabs to app #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3215d2d
format document
Simon-Laux Mar 27, 2025
b11e0ad
make tabs
Simon-Laux Mar 27, 2025
757b1fe
split link card into multiple cards for the different tabs
Simon-Laux Mar 27, 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
262 changes: 161 additions & 101 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,133 +1,193 @@
<!DOCTYPE html>
<html>
<head>
<!-- Putting this inline and at the top level
<head>
<!-- Putting this inline and at the top level
so that it gets executed as early as possible.
Same in iframe-webrtc-test.html -->
<script>globalThis.__capturedWebRTCObj = RTCPeerConnection;</script>

<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="styles.css" />

<!-- debugging -->
<script src="js/eruda.min.js"></script>
<script>eruda.init();</script>

<script src="webxdc.js"></script>
<script src="js/utils.js"></script>
</head>
<body>
<script>
globalThis.__capturedWebRTCObj = RTCPeerConnection;
</script>

<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<link rel="stylesheet" href="styles.css" />

<!-- debugging -->
<script src="js/eruda.min.js"></script>
<script>
eruda.init();
</script>

<script src="webxdc.js"></script>
<script src="js/utils.js"></script>
</head>
<body>
<div class="pages">
<div class="page active" id="page-webxdc">
<div class="card" id="realtime-output"></div>
<script src="js/realtime.js"></script>

<div class="card" id="cookies-output"></div>
<script src="js/cookies.js"></script>

<div class="card" id="storage-output"></div>
<script src="js/storage.js"></script>

<div class="card" id="uploads-output"></div>
<script src="js/uploads.js"></script>

<div class="card" id="import-export-output"></div>
<script src="js/import-export.js"></script>
<div class="card" id="update-api-output"></div>
<script src="js/update-api.js"></script>

<div class="card">
<header class="container"><h2>Webxdc Status Update Tests</h2></header>
<div class="container">
<a href="./duplicated_updates_race.html">
Duplicated Status Updates Race Test
</a>
</div>
</div>

<div class="card" id="webxdc-notify-output"></div>
<script src="js/webxdc-notify.js"></script>

<div class="card" id="info-output"></div>
<script src="js/info.js"></script>
</div>
<div class="page" id="page-web-api">
<div class="card" id="storage-output"></div>
<script src="js/storage.js"></script>
<div class="card" id="unload-output"></div>
<script src="js/unload.js"></script>

<div class="card" id="navigator-output"></div>
<script src="js/navigator.js"></script>

<div class="card" id="update-api-output"></div>
<script src="js/update-api.js"></script>

<div class="card" id="races-output"></div>
<script src="js/races.js"></script>

<div class="card" id="wasm-output"></div>
<script src="js/wasm.js"></script>

<div class="card" id="links-output"></div>
<script src="js/links.js"></script>
</div>
<div class="page" id="page-sandbox">
<div class="card" id="cookies-output"></div>
<script src="js/cookies.js"></script>
<div class="card" id="camera-access"></div>
<script src="js/media-access.js"></script>

<iframe id="iframe-regular" style="display: none"></iframe>
<iframe id="iframe-allow-same-origin" sandbox="allow-same-origin" style="display: none"></iframe>
<iframe
id="iframe-allow-same-origin"
sandbox="allow-same-origin"
style="display: none"
></iframe>
<div class="card" id="webrtc-output"></div>
<script src="js/webrtc.js"></script>
<iframe src="./iframe-webrtc-test.html" sandbox="allow-scripts" width="100%" height="200"></iframe>

<!-- DNS prefetch check, originally developed by Cure53
and distributed as "Cure53 Test App - DNS checker" app.
See https://delta.chat/en/2023-05-22-webxdc-security#dns-prefetching-marks-another-exploit. -->
<div class="dns-prefetch-output">
<header class="container">
<h2>DNS Prefetch</h2>
</header>
<div class="container">
<section>
<p>Usage instructions:</p>
<ol>
<li>
Navigate to
<a href="https://dig.pm/">https://dig.pm/</a>
and click Get Sub Domain.
</li>
<li>Input the subdomain from Step 1.</li>
<li>Click all 3 of the buttons.</li>
<li>Click Get Results on https://dig.pm/.</li>
<li>Observe the DNS lookup record.</li>
</ol>
<p>
Also see
<a href="https://public.opentech.fund/documents/XDC-01-report_2_1.pdf">the audit</a>
and
<a href="https://delta.chat/en/2023-05-22-webxdc-security">the blog post</a>.
</p>
</section>
<p>You can also utilize Wireshark, then https://dig.pm/ is not needed.</p>
<input
id="dns-prefetch-domain-input"
type="text"
placeholder="abc.example.com"
required
/>
<br>
<button
type="button"
onclick="dnsPrefetchUpdateLocation()"
>Update top.location</button>
<br>
<button
type="button"
onclick="dnsPrefetchAddIframe()"
>Add iframe</button>
<br>
<button
type="button"
onclick="dnsPrefetchAddPrefetch()"
>Add &lt;link dns-prefetch&gt;</button>
<br>
<iframe id="dns-prefetch-frame"></iframe>
</div>
</div>
<script src="js/dns-prefetch.js"></script>

<div class="card">
<header class="container"><h2>Webxdc Status Update Tests</h2></header>
<div class="container">
<a href="./duplicated_updates_race.html">
Duplicated Status Updates Race Test
</a>
</div>
<header class="container">
<h2>webrtc-sidechannel iframe</h2>
</header>
<script src="js/webrtc.js"></script>
<iframe
src="./iframe-webrtc-test.html"
sandbox="allow-scripts"
width="100%"
height="200"
></iframe>
</div>

<div class="card" id="links-output"></div>
<script src="js/links.js"></script>
<div class="card" id="iframe-output"></div>
<script src="js/iframe.js"></script>

<div class="card" id="info-output"></div>
<script src="js/info.js"></script>
</body>
<!-- DNS prefetch check, originally developed by Cure53
and distributed as "Cure53 Test App - DNS checker" app.
See https://delta.chat/en/2023-05-22-webxdc-security#dns-prefetching-marks-another-exploit. -->
<div class="card dns-prefetch-output">
<header class="container">
<h2>DNS Prefetch</h2>
</header>
<div class="container">
<section>
<p>Usage instructions:</p>
<ol>
<li>
Navigate to
<a href="https://dig.pm/">https://dig.pm/</a>
and click Get Sub Domain.
</li>
<li>Input the subdomain from Step 1.</li>
<li>Click all 3 of the buttons.</li>
<li>Click Get Results on https://dig.pm/.</li>
<li>Observe the DNS lookup record.</li>
</ol>
<p>
Also see
<a
href="https://public.opentech.fund/documents/XDC-01-report_2_1.pdf"
>the audit</a
>
and
<a href="https://delta.chat/en/2023-05-22-webxdc-security"
>the blog post</a
>.
</p>
</section>
<p>
You can also utilize Wireshark, then https://dig.pm/ is not
needed.
</p>
<input
id="dns-prefetch-domain-input"
type="text"
placeholder="abc.example.com"
required
/>
<br />
<button type="button" onclick="dnsPrefetchUpdateLocation()">
Update top.location
</button>
<br />
<button type="button" onclick="dnsPrefetchAddIframe()">
Add iframe
</button>
<br />
<button type="button" onclick="dnsPrefetchAddPrefetch()">
Add &lt;link dns-prefetch&gt;
</button>
<br />
<iframe id="dns-prefetch-frame"></iframe>
</div>
</div>
<script src="js/dns-prefetch.js"></script>
</div>
</div>
<div class="tabs">
<div class="tab active" id="tab-webxdc">Webxdc</div>
<div class="tab" id="tab-web-api">Web API</div>
<div class="tab" id="tab-sandbox">Sandboxing</div>
</div>
<script>
var tabs = [
{
page: document.getElementById("page-webxdc"),
tab: document.getElementById("tab-webxdc"),
},
{
page: document.getElementById("page-web-api"),
tab: document.getElementById("tab-web-api"),
},
{
page: document.getElementById("page-sandbox"),
tab: document.getElementById("tab-sandbox"),
},
];
for (const { page, tab } of tabs) {
tab.onclick = () => {
tabs.forEach(({ page, tab }) => {
page.classList.remove("active");
tab.classList.remove("active");
});
page.classList.add("active");
tab.classList.add("active");
};
}
</script>
</body>
</html>
17 changes: 17 additions & 0 deletions js/iframe.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
window.addEventListener("load", () => {
const ifrmExplain = h(
"p",
{},
"iframe: should be blocked and not load https://delta.chat from Internet:"
);
const ifrm = h("iframe", { src: "https://delta.chat" });
ifrm.style.width = "100%";
ifrm.style.height = "auto";

document
.getElementById("iframe-output")
.append(
createHeader("Loading website in iframe"),
h("div", { class: "container" }, ifrmExplain, ifrm)
);
});
4 changes: 2 additions & 2 deletions js/info.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ window.addEventListener("load", () => {
let container = h("div", {class: "container"});

// background is set to spot leading/trailing spaces errors
container.append(h("div", {}, "webxdc.selfName: ", h("span", {style: "background:#DDD;"}, webxdc.selfName)))
container.append(h("div", {}, "webxdc.selfAddr: ", h("span", {style: "background:#DDD;"}, webxdc.selfAddr)))
container.append(h("div", {}, "webxdc.selfName: ", h("span", {style: "background:#DDD;word-wrap: break-word;"}, webxdc.selfName)))
container.append(h("div", {}, "webxdc.selfAddr: ", h("span", {style: "background:#DDD;word-wrap: break-word;"}, webxdc.selfAddr)))

container.append(h("div", {}, "webxdc.sendUpdateInterval: " + webxdc.sendUpdateInterval))
container.append(h("div", {}, "webxdc.sendUpdateMaxSize: " + webxdc.sendUpdateMaxSize))
Expand Down
25 changes: 1 addition & 24 deletions js/links.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,30 +9,7 @@ window.addEventListener("load", () => {
h("li", {}, h("a", {href: "chrome://crash"}, "chrome://crash")),
);

let btn1 = h("button", {}, "info with deep-link to internal page, no notify");
btn1.onclick = () => {
window.webxdc.sendUpdate({ payload: "", info: "open page.html", href: "page.html" }, "");
};
ul.append(h("li", {}, btn1));

let btn2 = h("button", {}, "info and notify all with deep-link to internal page");
btn2.onclick = () => {
window.webxdc.sendUpdate({ payload: "", info: "open page.html", href: "page.html", notify: {"*": "notify page.html"} }, "");
};
ul.append(h("li", {}, btn2));

let btn3 = h("button", {}, "info and notify all with deep-link to #links-output section");
btn3.onclick = () => {
window.webxdc.sendUpdate({ payload: "", info: "open #links-output", href: "index.html#links-output", notify: {"*": "notify #links-output"} }, "");
};
ul.append(h("li", {}, btn3));

const ifrmExplain = h("p", {}, "iframe: should be blocked and not load https://delta.chat from Internet:");
const ifrm = h("iframe", {src: "https://delta.chat"});
ifrm.style.width = "100%";
ifrm.style.height = "auto";

document.getElementById("links-output").append(
createHeader("Links"), h("div", {class: "container"}, ul, ifrmExplain, ifrm)
createHeader("Links"), h("div", {class: "container"}, ul)
);
});
25 changes: 25 additions & 0 deletions js/webxdc-notify.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
window.addEventListener("load", () => {
let ul = h("ul");

let btn1 = h("button", {}, "info with deep-link to internal page, no notify");
btn1.onclick = () => {
window.webxdc.sendUpdate({ payload: "", info: "open page.html", href: "page.html" }, "");
};
ul.append(h("li", {}, btn1));

let btn2 = h("button", {}, "info and notify all with deep-link to internal page");
btn2.onclick = () => {
window.webxdc.sendUpdate({ payload: "", info: "open page.html", href: "page.html", notify: {"*": "notify page.html"} }, "");
};
ul.append(h("li", {}, btn2));

let btn3 = h("button", {}, "info and notify all with deep-link to #links-output section");
btn3.onclick = () => {
window.webxdc.sendUpdate({ payload: "", info: "open #links-output", href: "index.html#links-output", notify: {"*": "notify #links-output"} }, "");
};
ul.append(h("li", {}, btn3));

document.getElementById("webxdc-notify-output").append(
createHeader("Webxdc Notify"), h("div", {class: "container"}, ul)
);
});
Loading