feat: Support for building ImHex for the web (#1328)

Co-authored-by: WerWolv <werwolv98@gmail.com>
Co-authored-by: AnnsAnn <git@annsann.eu>

dist/web/Dockerfile

@@ -0,0 +1,76 @@
+FROM emscripten/emsdk:latest as build
+
+# Used to invalidate layer cache but not mount cache
+# See https://github.com/moby/moby/issues/41715#issuecomment-733976493
+ARG UNIQUEKEY 1
+
+RUN apt update
+RUN apt install -y git ccache autoconf automake libtool cmake pkg-config
+
+# Install vcpkg
+# Note: we are using my fork of the repository with a libmagic patch
+RUN git clone https://github.com/iTrooz/vcpkg --branch libmagic /vcpkg
+RUN /vcpkg/bootstrap-vcpkg.sh
+
+# Patch vcpkg build instructions to add -pthread
+RUN <<EOF
+set -xe
+
+echo '
+set(CMAKE_C_FLAGS "${CMAKE_C_FLAGS} -pthread")
+set(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} -pthread")
+' >> /emsdk/upstream/emscripten/cmake/Modules/Platform/Emscripten.cmake
+EOF
+
+# Install dependencies with vcpkg
+RUN /vcpkg/vcpkg install --triplet=wasm32-emscripten libmagic
+RUN /vcpkg/vcpkg install --triplet=wasm32-emscripten freetype
+RUN /vcpkg/vcpkg install --triplet=wasm32-emscripten josuttis-jthread
+RUN /vcpkg/vcpkg install --triplet=wasm32-emscripten mbedtls
+
+# Build ImHex
+ARG JOBS=4
+ENV CCACHE_DIR /cache/ccache
+
+RUN mkdir /build
+WORKDIR /build
+RUN --mount=type=cache,target=/cache \
+    --mount=type=bind,source=.,target=/imhex <<EOF
+
+set -xe
+ccache -zs
+
+cmake /imhex                                                                                            \
+    -DIMHEX_OFFLINE_BUILD=ON                                                                            \
+    -DIMHEX_STATIC_LINK_PLUGINS=ON                                                                      \
+    -DNATIVE_CMAKE_C_COMPILER=gcc                                                                       \
+    -DNATIVE_CMAKE_CXX_COMPILER=g++                                                                     \
+    -DCMAKE_C_COMPILER_LAUNCHER=ccache                                                                  \
+    -DCMAKE_CXX_COMPILER_LAUNCHER=ccache                                                                \
+    -DCMAKE_TOOLCHAIN_FILE=/vcpkg/scripts/buildsystems/vcpkg.cmake                                      \
+    -DVCPKG_CHAINLOAD_TOOLCHAIN_FILE=/emsdk/upstream/emscripten/cmake/Modules/Platform/Emscripten.cmake \
+    -DCMAKE_BUILD_TYPE=Release
+
+make -j $JOBS
+
+cp /imhex/dist/web/source/* /build
+ccache -s
+EOF
+
+FROM scratch
+COPY --from=build [             \
+    # ImHex                     \
+    "/build/imhex.wasm",        \
+    "/build/imhex.js",          \
+    "/build/imhex.worker.js",   \
+                                \
+    # Static files              \
+    "/build/index.html",        \
+    "/build/style.css",         \
+    "/build/wasm-config.js",    \
+    "/build/enable-threads.js", \
+    "/build/favicon.ico",       \
+                                \
+    # Destination               \
+    "./"                        \
+]

dist/web/plugin-bundle.cpp.in

@@ -0,0 +1,11 @@
+#include <hex/helpers/logger.hpp>
+
+extern "C" void forceLinkPlugin_@IMHEX_PLUGIN_NAME@();
+
+struct StaticLoad {
+    StaticLoad() {
+        forceLinkPlugin_@IMHEX_PLUGIN_NAME@();
+    }
+};
+
+static StaticLoad staticLoad;

dist/web/serve.py

@@ -0,0 +1,14 @@
+import http.server
+import os
+
+class MyHttpRequestHandler(http.server.SimpleHTTPRequestHandler):
+
+    def end_headers(self):
+        self.send_header("Cross-Origin-Embedder-Policy", "require-corp")
+        self.send_header("Cross-Origin-Opener-Policy", "same-origin")
+        http.server.SimpleHTTPRequestHandler.end_headers(self)
+
+if __name__ == '__main__':
+    os.chdir(".")
+    httpd = http.server.HTTPServer(("", 9090), MyHttpRequestHandler)
+    httpd.serve_forever()

dist/web/source/enable-threads.js

@@ -0,0 +1,75 @@
+// NOTE: This file creates a service worker that cross-origin-isolates the page (read more here: https://web.dev/coop-coep/) which allows us to use wasm threads.
+// Normally you would set the COOP and COEP headers on the server to do this, but Github Pages doesn't allow this, so this is a hack to do that.
+
+/* Edited version of: coi-serviceworker v0.1.6 - Guido Zuidhof, licensed under MIT */
+// From here: https://github.com/gzuidhof/coi-serviceworker
+if(typeof window === 'undefined') {
+    self.addEventListener("install", () => self.skipWaiting());
+    self.addEventListener("activate", e => e.waitUntil(self.clients.claim()));
+
+    async function handleFetch(request) {
+        if(request.cache === "only-if-cached" && request.mode !== "same-origin") {
+            return;
+        }
+
+        if(request.mode === "no-cors") { // We need to set `credentials` to "omit" for no-cors requests, per this comment: https://bugs.chromium.org/p/chromium/issues/detail?id=1309901#c7
+            request = new Request(request.url, {
+                cache: request.cache,
+                credentials: "omit",
+                headers: request.headers,
+                integrity: request.integrity,
+                destination: request.destination,
+                keepalive: request.keepalive,
+                method: request.method,
+                mode: request.mode,
+                redirect: request.redirect,
+                referrer: request.referrer,
+                referrerPolicy: request.referrerPolicy,
+                signal: request.signal,
+            });
+        }
+
+        let r = await fetch(request).catch(e => console.error(e));
+
+        if(r.status === 0) {
+            return r;
+        }
+
+        const headers = new Headers(r.headers);
+        headers.set("Cross-Origin-Embedder-Policy", "require-corp"); // or: require-corp
+        headers.set("Cross-Origin-Opener-Policy", "same-origin");
+
+        return new Response(r.body, { status: r.status, statusText: r.statusText, headers });
+    }
+
+    self.addEventListener("fetch", function(e) {
+        e.respondWith(handleFetch(e.request)); // respondWith must be executed synchonously (but can be passed a Promise)
+    });
+
+} else {
+    (async function() {
+        if(window.crossOriginIsolated !== false) return;
+
+        let registration = await navigator.serviceWorker.register(window.document.currentScript.src).catch(e => console.error("COOP/COEP Service Worker failed to register:", e));
+        if(registration) {
+            console.log("COOP/COEP Service Worker registered", registration.scope);
+
+            registration.addEventListener("updatefound", () => {
+                console.log("Reloading page to make use of updated COOP/COEP Service Worker.");
+                window.location.reload();
+            });
+
+            // If the registration is active, but it's not controlling the page
+            if(registration.active && !navigator.serviceWorker.controller) {
+                console.log("Reloading page to make use of COOP/COEP Service Worker.");
+                window.location.reload();
+            }
+        }
+    })();
+}
+
+// Code to deregister:
+// let registrations = await navigator.serviceWorker.getRegistrations();
+// for(let registration of registrations) {
+//   await registration.unregister();
+// }

dist/web/source/index.html

@@ -0,0 +1,73 @@
+<!doctype html>
+<html lang="en-us">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+
+    <!-- Primary Meta Tags -->
+    <title>ImHex - Hex Editor</title>
+    <meta name="title" content="ImHex">
+    <meta name="description" content="A Hex Editor for Reverse Engineers, Programmers and people who value their retinas when working at 3 AM.">
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
+
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://imhex.werwolv.net/">
+    <meta property="og:title" content="ImHex Web">
+    <meta property="og:description">
+    <meta name="description" content="A Hex Editor for Reverse Engineers, Programmers and people who value their retinas when working at 3 AM.">
+    <meta property="og:image" content="https://imhex.werwolv.net/assets/splash_wasm.png">
+
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image">
+    <meta property="twitter:url" content="https://imhex.werwolv.net/">
+    <meta property="twitter:title" content="ImHex Web">
+    <meta property="twitter:description"
+          content="A Hex Editor for Reverse Engineers, Programmers and people who value their retinas when working at 3 AM.">
+    <meta property="twitter:image" content="https://imhex.werwolv.net/assets/splash_wasm.png">
+
+    <meta name="viewport" content="width=device-width">
+
+    <link rel="stylesheet" type="text/css" href="style.css" />
+
+    <script type="application/ld+json">
+        {
+            "@context": "https://schema.org",
+            "@type": "Organization",
+            "alumni": "WerWolv",
+            "email": "hey@werwolv.net",
+            "founder": "WerWolv",
+            "slogan": "A Hex Editor for Reverse Engineers, Programmers and people who value their retinas when working at 3 AM.",
+            "url": "https://imhex.werwolv.net",
+            "logo": "https://imhex.werwolv.net/assets/logos/logo.png"
+        }
+    </script>
+
+    <script type="application/ld+json">
+        {
+            "@context": "https://schema.org",
+            "@type": "SoftwareApplication",
+            "name": "ImHex",
+            "operatingSystem": "Windows, MacOS, Linux",
+            "applicationCategory": "DeveloperApplication",
+            "offers": {
+                "@type": "Offer",
+                "price": "0",
+                "priceCurrency": "USD"
+            }
+        }
+    </script>
+
+    <title>ImHex Web</title>
+    <script src="enable-threads.js"></script>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <p id="loading_text">ImHex is loading...</p>
+    <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" style="display: none; image-rendering: crisp-edges"></canvas>
+
+    <script type="text/javascript" src="wasm-config.js"></script>
+    <script async type="text/javascript" src="imhex.js"></script>
+</body>
+</html>

dist/web/source/style.css

@@ -0,0 +1,28 @@
+html, body {
+    height: 100%;
+    margin: 0px;
+    user-select: none;
+}
+
+body {
+    display: flex;
+    align-items: center;
+    background-color: #121212;
+    overflow: hidden;
+}
+
+.emscripten {
+    padding-right: 0;
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+    border: 0px none;
+}
+
+#loading_text {
+    color: #F0F0F0;
+    font-size: 30px;
+    font-family: monospace;
+    width: 100%;
+    text-align: center;
+}

dist/web/source/wasm-config.js

@@ -0,0 +1,68 @@
+function glfwSetCursorCustom(wnd, shape) {
+    let body = document.getElementsByTagName("body")[0]
+    switch (shape) {
+        case 0x00036001: // GLFW_ARROW_CURSOR
+            body.style.cursor = "default";
+            break;
+        case 0x00036002: // GLFW_IBEAM_CURSOR
+            body.style.cursor = "text";
+            break;
+        case 0x00036003: // GLFW_CROSSHAIR_CURSOR
+            body.style.cursor = "crosshair";
+            break;
+        case 0x00036004: // GLFW_HAND_CURSOR
+            body.style.cursor = "pointer";
+            break;
+        case 0x00036005: // GLFW_HRESIZE_CURSOR
+            body.style.cursor = "ew-resize";
+            break;
+        case 0x00036006: // GLFW_VRESIZE_CURSOR
+            body.style.cursor = "ns-resize";
+            break;
+        default:
+            body.style.cursor = "default";
+            break;
+    }
+
+}
+
+function glfwCreateStandardCursorCustom(shape) {
+    return shape
+}
+
+var Module = {
+    preRun:  [],
+    postRun: [],
+    onRuntimeInitialized: function() {
+        // Triggered when the wasm module is loaded and ready to use.
+        document.getElementById("loading_text").style.display = "none"
+        document.getElementById("canvas").style.display = "initial"
+    },
+    print:   (function() { })(),
+    printErr: function(text) { },
+    canvas: (function() {
+        let canvas = document.getElementById('canvas');
+        // As a default initial behavior, pop up an alert when webgl context is lost. To make your
+        // application robust, you may want to override this behavior before shipping!
+        // See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
+        canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
+
+        return canvas;
+    })(),
+    setStatus: function(text) { },
+    totalDependencies: 0,
+    monitorRunDependencies: function(left) { },
+    instantiateWasm: function(imports, successCallback) {
+        imports.env.glfwSetCursor = glfwSetCursorCustom
+        imports.env.glfwCreateStandardCursor = glfwCreateStandardCursorCustom
+        instantiateAsync(wasmBinary, wasmBinaryFile, imports, (result) => successCallback(result.instance, result.module));
+    }
+};
+
+
+window.addEventListener('resize', js_resizeCanvas, false);
+function js_resizeCanvas() {
+    let canvas = document.getElementById('canvas');
+    canvas.width  = window.innerWidth;
+    canvas.height = window.innerHeight;
+}