Files
Sunscreen/sunscreen_docs/book/advanced/wasm.html
Rick Weber a323229243 WIP
2022-05-02 12:05:08 -07:00

305 lines
23 KiB
HTML

<!DOCTYPE HTML>
<html lang="en" class="sidebar-visible no-js light">
<head>
<!-- Book generated using mdBook -->
<meta charset="UTF-8">
<title>WASM support - Sunscreen Documentation</title>
<!-- Custom HTML head -->
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#ffffff" />
<link rel="icon" href="../favicon.svg">
<link rel="shortcut icon" href="../favicon.png">
<link rel="stylesheet" href="../css/variables.css">
<link rel="stylesheet" href="../css/general.css">
<link rel="stylesheet" href="../css/chrome.css">
<link rel="stylesheet" href="../css/print.css" media="print">
<!-- Fonts -->
<link rel="stylesheet" href="../FontAwesome/css/font-awesome.css">
<link rel="stylesheet" href="../fonts/fonts.css">
<!-- Highlight.js Stylesheets -->
<link rel="stylesheet" href="../highlight.css">
<link rel="stylesheet" href="../tomorrow-night.css">
<link rel="stylesheet" href="../ayu-highlight.css">
<!-- Custom theme stylesheets -->
<!-- MathJax -->
<script async type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
</head>
<body>
<!-- Provide site root to javascript -->
<script type="text/javascript">
var path_to_root = "../";
var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "navy" : "light";
</script>
<!-- Work around some values being stored in localStorage wrapped in quotes -->
<script type="text/javascript">
try {
var theme = localStorage.getItem('mdbook-theme');
var sidebar = localStorage.getItem('mdbook-sidebar');
if (theme.startsWith('"') && theme.endsWith('"')) {
localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
}
if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
}
} catch (e) { }
</script>
<!-- Set the theme before any content is loaded, prevents flash -->
<script type="text/javascript">
var theme;
try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
if (theme === null || theme === undefined) { theme = default_theme; }
var html = document.querySelector('html');
html.classList.remove('no-js')
html.classList.remove('light')
html.classList.add(theme);
html.classList.add('js');
</script>
<!-- Hide / unhide sidebar before it is displayed -->
<script type="text/javascript">
var html = document.querySelector('html');
var sidebar = 'hidden';
if (document.body.clientWidth >= 1080) {
try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
sidebar = sidebar || 'visible';
}
html.classList.remove('sidebar-visible');
html.classList.add("sidebar-" + sidebar);
</script>
<nav id="sidebar" class="sidebar" aria-label="Table of contents">
<div class="sidebar-scrollbox">
<ol class="chapter"><li class="chapter-item expanded "><a href="../intro/intro.html"><strong aria-hidden="true">1.</strong> Introduction</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../intro/prelim.html"><strong aria-hidden="true">1.1.</strong> Prerequisites</a></li><li class="chapter-item expanded "><a href="../intro/why.html"><strong aria-hidden="true">1.2.</strong> Why is a compiler needed for FHE?</a></li><li class="chapter-item expanded "><a href="../intro/compiler.html"><strong aria-hidden="true">1.3.</strong> Sunscreen's compiler</a></li></ol></li><li class="chapter-item expanded "><a href="../getting_started/getting_started.html"><strong aria-hidden="true">2.</strong> Getting started</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../getting_started/installation.html"><strong aria-hidden="true">2.1.</strong> Installation</a></li><li class="chapter-item expanded "><a href="../getting_started/example.html"><strong aria-hidden="true">2.2.</strong> My first FHE program</a></li></ol></li><li class="chapter-item expanded "><a href="../fhe_programs/fhe_programs.html"><strong aria-hidden="true">3.</strong> What's in an FHE program?</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../fhe_programs/types/types.html"><strong aria-hidden="true">3.1.</strong> Types</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../fhe_programs/types/signed.html"><strong aria-hidden="true">3.1.1.</strong> Signed</a></li><li class="chapter-item expanded "><a href="../fhe_programs/types/fractional.html"><strong aria-hidden="true">3.1.2.</strong> Fractional</a></li><li class="chapter-item expanded "><a href="../fhe_programs/types/rational.html"><strong aria-hidden="true">3.1.3.</strong> Rational</a></li></ol></li><li class="chapter-item expanded "><a href="../fhe_programs/writing_an_fhe_program/writing_an_fhe_program.html"><strong aria-hidden="true">3.2.</strong> How to write an FHE program</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../fhe_programs/factoring_fhe_programs.html"><strong aria-hidden="true">3.2.1.</strong> Factoring FHE programs</a></li><li class="chapter-item expanded "><a href="../fhe_programs/writing_an_fhe_program/limitations.html"><strong aria-hidden="true">3.2.2.</strong> Limitations</a></li></ol></li><li class="chapter-item expanded "><a href="../troubleshooting.html"><strong aria-hidden="true">3.3.</strong> Troubleshooting</a></li></ol></li><li class="chapter-item expanded "><a href="../fhe_programs/runtime/runtime.html"><strong aria-hidden="true">4.</strong> Runtime</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../fhe_programs/runtime/key_generation.html"><strong aria-hidden="true">4.1.</strong> Key generation</a></li><li class="chapter-item expanded "><a href="../fhe_programs/runtime/encryption.html"><strong aria-hidden="true">4.2.</strong> Encryption</a></li><li class="chapter-item expanded "><a href="../fhe_programs/runtime/running_fhe_programs.html"><strong aria-hidden="true">4.3.</strong> Running FHE programs</a></li><li class="chapter-item expanded "><a href="../fhe_programs/runtime/decryption.html"><strong aria-hidden="true">4.4.</strong> Decryption</a></li><li class="chapter-item expanded "><a href="../fhe_programs/runtime/serialization.html"><strong aria-hidden="true">4.5.</strong> Serialization</a></li></ol></li><li class="chapter-item expanded "><a href="../fhe_programs/apps.html"><strong aria-hidden="true">5.</strong> Applications</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../fhe_programs/example.html"><strong aria-hidden="true">5.1.</strong> AMMs &amp; private token swaps</a></li><li class="chapter-item expanded "><a href="../fhe_programs/pir_intro.html"><strong aria-hidden="true">5.2.</strong> Private information retrieval</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../fhe_programs/pir_simple.html"><strong aria-hidden="true">5.2.1.</strong> Take 1</a></li><li class="chapter-item expanded "><a href="../fhe_programs/pir_matrix.html"><strong aria-hidden="true">5.2.2.</strong> Take 2</a></li></ol></li><li class="chapter-item expanded "><div><strong aria-hidden="true">5.3.</strong> Genomics &amp; private tests</div></li></ol></li><li class="chapter-item expanded "><a href="../advanced/faq.html"><strong aria-hidden="true">6.</strong> FAQ</a></li><li class="chapter-item expanded "><a href="../advanced/advanced.html"><strong aria-hidden="true">7.</strong> Advanced topics</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../advanced/bfv.html"><strong aria-hidden="true">7.1.</strong> Why the BFV scheme?</a></li><li class="chapter-item expanded "><a href="../advanced/good_fhe_programs.html"><strong aria-hidden="true">7.2.</strong> Writing even better FHE programs</a></li><li><ol class="section"><li class="chapter-item expanded "><a href="../advanced/plain_modulus/plain_modulus.html"><strong aria-hidden="true">7.2.1.</strong> Plaintext modulus</a></li><li class="chapter-item expanded "><a href="../advanced/noise_margin.html"><strong aria-hidden="true">7.2.2.</strong> Noise</a></li><li class="chapter-item expanded "><a href="../advanced/pruning_keys.html"><strong aria-hidden="true">7.2.3.</strong> Pruning public keys</a></li></ol></li><li class="chapter-item expanded "><a href="../advanced/wasm.html" class="active"><strong aria-hidden="true">7.3.</strong> WASM support</a></li><li class="chapter-item expanded "><a href="../advanced/carryless_arithmetic.html"><strong aria-hidden="true">7.4.</strong> Funky math: carryless arithmetic</a></li><li class="chapter-item expanded "><div><strong aria-hidden="true">7.5.</strong> Batching</div></li></ol></li></ol>
</div>
<div id="sidebar-resize-handle" class="sidebar-resize-handle"></div>
</nav>
<div id="page-wrapper" class="page-wrapper">
<div class="page">
<div id="menu-bar-hover-placeholder"></div>
<div id="menu-bar" class="menu-bar sticky bordered">
<div class="left-buttons">
<button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
<i class="fa fa-bars"></i>
</button>
<button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
<i class="fa fa-paint-brush"></i>
</button>
<ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
<li role="none"><button role="menuitem" class="theme" id="light">Light (default)</button></li>
<li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
<li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
<li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
<li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
</ul>
<button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
<i class="fa fa-search"></i>
</button>
</div>
<h1 class="menu-title">Sunscreen Documentation</h1>
<div class="right-buttons">
<a href="../print.html" title="Print this book" aria-label="Print this book">
<i id="print-button" class="fa fa-print"></i>
</a>
</div>
</div>
<div id="search-wrapper" class="hidden">
<form id="searchbar-outer" class="searchbar-outer">
<input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
</form>
<div id="searchresults-outer" class="searchresults-outer hidden">
<div id="searchresults-header" class="searchresults-header"></div>
<ul id="searchresults">
</ul>
</div>
</div>
<!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
<script type="text/javascript">
document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
});
</script>
<div id="content" class="content">
<main>
<h1 id="wasm-support"><a class="header" href="#wasm-support">WASM support</a></h1>
<p>Need to run Sunscreen in your browser or NodeJS app? Simply build your app targeting WebAssembly (WASM).</p>
<p>WASM is an instruction set for a sandboxed virtual machine that allows you to safely run Rust and C++ code in your browser more efficiently than Javascript. This includes your Sunscreen app!</p>
<p>Rust features multiple targets for building WASM binaries, but Sunscreen currently only supports <code>wasm32-unknown-emscripten</code>. As the target's name suggests, this leverages <a href="https://emscripten.org/">emscripten</a>, which SEAL needs during compilation and runtime.</p>
<h2 id="setup"><a class="header" href="#setup">Setup</a></h2>
<h3 id="install-emscripten"><a class="header" href="#install-emscripten">Install emscripten</a></h3>
<pre><code class="language-sh">git clone https://github.com/emscripten-core/emsdk.git
emsdk/emsdk install 3.1.3
emsdk/emsdk activate
</code></pre>
<p>You can try installing other toolchain versions if you wish, but we've seen the compiler seg fault and other strange errors when building our examples 🙃.</p>
<h3 id="load-the-emscripten-environment"><a class="header" href="#load-the-emscripten-environment">Load the emscripten environment</a></h3>
<pre><code class="language-sh">source emsdk/emsdk_env.sh
</code></pre>
<p>Put this command in your shell's .rc file so you don't need to rerun it each time you launch a shell.</p>
<h3 id="add-the-wasm32-unknown-emscripten-target-to-rust"><a class="header" href="#add-the-wasm32-unknown-emscripten-target-to-rust">Add the <code>wasm32-unknown-emscripten</code> target to Rust</a></h3>
<pre><code class="language-sh">rustup target add wasm32-unknown-emscripten
</code></pre>
<h2 id="building"><a class="header" href="#building">Building</a></h2>
<p>To compile your program with Rust+emscripten, you'll need to do a few extra things.</p>
<h3 id="required-emscripten-features"><a class="header" href="#required-emscripten-features">Required emscripten features</a></h3>
<p>Add the following lines to your <code>.cargo/config.toml</code><sup class="footnote-reference"><a href="#1">1</a></sup>:</p>
<pre><code class="language-toml">[env]
EMCC_CFLAGS = &quot;-sERROR_ON_UNDEFINED_SYMBOLS=0 -sDISABLE_EXCEPTION_CATCHING=0 -sALLOW_MEMORY_GROWTH&quot;
</code></pre>
<p><code>ERROR_ON_UNDEFINED_SYMBOLS=0</code> works around a <a href="https://github.com/rust-lang/rust/pull/95950">known issue</a> when Rust's panic handling is set to <code>unwind</code> (the default). Alternatively, you can <a href="https://doc.rust-lang.org/rustc/codegen-options/index.html#panic">set the handling mode to <code>abort</code></a> when building for WASM.</p>
<p><code>DISABLE_EXCEPTION_CATCHING=0</code> allows C++ code to catch exceptions. Without this, you'll get an error complaining that Rust can't catch foreign exceptions and your application will terminate via <code>abort()</code>.</p>
<p>Finally, <code>ALLOW_MEMORY_GROWTH</code> allows the heap to resize. Without this, your app will quickly run out of memory and seg fault.</p>
<div class="footnote-definition" id="1"><sup class="footnote-definition-label">1</sup>
<p>This is <em>not</em> your <code>Cargo.toml</code> file! Put the <code>.cargo</code> directory at the root of your git repository and commit it.</p>
</div>
<h2 id="building-your-app"><a class="header" href="#building-your-app">Building your app</a></h2>
<p>Simply run:</p>
<pre><code class="language-sh">cargo build --bin myapp --release --target wasm32-unknown-emscripten
</code></pre>
<p>where <code>myapp</code> is the name of your executable.</p>
<p>On success, you should see the following files:</p>
<pre><code class="language-ignore">target/wasm32-unknown-emscripten/release/myapp.js
target/wasm32-unknown-emscripten/release/myapp.wasm
</code></pre>
<h3 id="running-with-node"><a class="header" href="#running-with-node">Running with node</a></h3>
<pre><code class="language-sh">node target/wasm32-unknown-emscripten/release/myapp.js
</code></pre>
<h3 id="running-in-browser"><a class="header" href="#running-in-browser">Running in browser</a></h3>
<p>Put <code>myapp.js</code> in a script tag in an <code>index.html</code> file:</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script src=&quot;myapp.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>and serve the <code>index.html</code>, <code>myapp.js</code>, and <code>myapp.wasm</code> files on a web server. Your app will run when the user loads the page in their browser.</p>
<p>Alternatively, you can bundle your <code>.js</code> and <code>.wasm</code> into a larger application with <code>webpack</code>.</p>
<h3 id="running-with-wasmerwasmtime"><a class="header" href="#running-with-wasmerwasmtime">Running with wasmer/wasmtime</a></h3>
<p>Unfortunately, these scenarios are currently unsupported 😞.</p>
<h2 id="running-tests"><a class="header" href="#running-tests">Running tests</a></h2>
<p>Build your tests with:</p>
<pre><code class="language-sh">cargo test --no-run --release --target wasm32-unknown-emscripten
</code></pre>
<p>You'll find your tests' entry points in <code>target/wasm32-unknown-emscripten/release/deps/*.js</code>. Simply select the desired test and run:</p>
<pre><code class="language-sh">node target/wasm32-unknown-emscripten/release/mytest-xxxx.js
</code></pre>
<h2 id="debugging"><a class="header" href="#debugging">Debugging</a></h2>
<p>Debugging WASM is challenging. If possible, you should debug issues running your app natively. For debugging WASM-specific issues, emscripten can emit both DWARF symbols and traditional source maps. While DWARF symbols are more useful, browser support at this stage is terrible.</p>
<h3 id="build-in-debug-mode"><a class="header" href="#build-in-debug-mode">Build in debug mode</a></h3>
<p>To use source maps, simply build in debug mode<sup class="footnote-reference"><a href="#2">2</a></sup>:</p>
<pre><code class="language-sh">cargo build --bin myapp --target wasm32-unknown-emscripten
</code></pre>
<p>where <code>myapp</code> is the name of your executable.</p>
<div class="footnote-definition" id="2"><sup class="footnote-definition-label">2</sup>
<p>You may wish to add <code>-O3</code> to <code>EMCC_CFLAGS</code> to speed up your app.</p>
</div>
<h3 id="make-a-webpage"><a class="header" href="#make-a-webpage">Make a webpage</a></h3>
<p>In our experiments debugging with <code>node --inspect-brk</code>, the Chrome debugger failed to find the source maps. Debugging raw WASM is unpleasant, so we recommend an alternative — make a simple webpage that hosts your app.</p>
<p>Make an <code>index.html</code> with the following contents in the root of your git repository:</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script src=&quot;./target/wasm32-unknown-emscripten/debug/myapp.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<h3 id="serve-your-page"><a class="header" href="#serve-your-page">Serve your page</a></h3>
<p>In another terminal, run:</p>
<pre><code class="language-sh">npm install -g http-server
node http-server /git/repo/root/dir
</code></pre>
<h3 id="debug-your-program-on-the-website"><a class="header" href="#debug-your-program-on-the-website">Debug your program on the website</a></h3>
<p>Open Chrome and navigate to <code>http://localhost:8080/index.html</code>. Hit F12 to open the debugger. Chrome should find your source maps allowing you to navigate the stack, set breakpoints, step, continue, etc. all with real source code. Unfortunately, you can't see variables.</p>
<p>You can also use the <code>log</code> crate to print information to the debug console. If you go this route, use <code>simple-logger</code> as the logger backend; don't use a WASM-specific crate (e.g. <code>wasm-logger</code>) for this because emscripten already routes stdout and stderr to the console.</p>
</main>
<nav class="nav-wrapper" aria-label="Page navigation">
<!-- Mobile navigation buttons -->
<a rel="prev" href="../advanced/pruning_keys.html" class="mobile-nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
<i class="fa fa-angle-left"></i>
</a>
<a rel="next" href="../advanced/carryless_arithmetic.html" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
<i class="fa fa-angle-right"></i>
</a>
<div style="clear: both"></div>
</nav>
</div>
</div>
<nav class="nav-wide-wrapper" aria-label="Page navigation">
<a rel="prev" href="../advanced/pruning_keys.html" class="nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
<i class="fa fa-angle-left"></i>
</a>
<a rel="next" href="../advanced/carryless_arithmetic.html" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
<i class="fa fa-angle-right"></i>
</a>
</nav>
</div>
<!-- Livereload script (if served using the cli tool) -->
<script type="text/javascript">
var socket = new WebSocket("ws://localhost:3000/__livereload");
socket.onmessage = function (event) {
if (event.data === "reload") {
socket.close();
location.reload();
}
};
window.onbeforeunload = function() {
socket.close();
}
</script>
<script type="text/javascript">
window.playground_copyable = true;
</script>
<script src="../elasticlunr.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../mark.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../searcher.js" type="text/javascript" charset="utf-8"></script>
<script src="../clipboard.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../highlight.js" type="text/javascript" charset="utf-8"></script>
<script src="../book.js" type="text/javascript" charset="utf-8"></script>
<!-- Custom JS scripts -->
</body>
</html>