OpenSSL Webterm
2 |
3 | User-friendly web app to use OpenSSL, based on WebAssembly. OpenSSL v3 has been compiled with Emscripten to run in a terminal/tty emulator in the browser. See the [Live Demo](https://www.cryptool.org/cto/openssl). You could also [host this on your own machine](#installation).
4 |
5 | We then built a graphical user interface (GUI) on top of that, so it's easy for newbies to operate. Your actions in the GUI are transformed to original OpenSSL commands on the command line, so you easily can learn their syntax.
6 |
7 | > **Disclaimer**: This tool is intended for teaching and educational purposes. It was developed in 2021 by the [CrypTool project](https://www.cryptool.org) in order to run OpenSSL v3 in a browser. You can also look at [its predecessor](https://github.com/janeumnn/openssl-webapp).
8 |
9 | 
10 |
11 |
12 | ## Installation
13 |
14 | First, [install Node.js and npm](https://nodejs.org). Then clone this project and install its dependencies:
15 |
16 | ```shell
17 | $ git clone https://github.com/cryptool-org/openssl-webterm.git
18 | $ cd openssl-webterm
19 | $ npm install
20 | ```
21 |
22 | Then start a Webpack development server:
23 |
24 | ```shell
25 | $ npm run serve
26 | ```
27 |
28 | You can now view the OpenSSL Webterm at https://localhost:4200.
29 |
30 |
31 | ## Internal workings
32 |
33 | The React GUI just builds commands (as strings). These are then called upon the terminal, which is an instance of [wasm-webterm](https://github.com/cryptool-org/wasm-webterm). If your browser supports WebWorkers (including SharedArrayBuffers and Atomics), a new Worker thread is spawned and the WebAssembly binary ([`openssl.wasm`](/emscr/binary/openssl.wasm)) is ran there. Otherwise, it is executed on the main browser thread using a fallback (which can freeze the tab).
34 |
35 | The WebAssembly binary is executed using the (auto generated) Emscripten JS runtime contained in [`openssl.js`](/emscr/binary/openssl.js). It initializes a virtual memory filesystem and handles input/output calls.
36 |
37 | If the binary asks for input (reads from `/dev/stdin`), the thread will be paused until the user entered something. If the binary prints to `/dev/stdout` or `/dev/stderr`, it will be shown on the [xterm.js](https://github.com/xtermjs/xterm.js) web terminal.
38 |
39 | After each command, the files in the memory filesystem are gathered and passed to the React GUI.
40 |
41 |
42 | ## Compiling OpenSSL
43 |
44 | You can compile the OpenSSL WebAssembly binary by calling one the following commands. Note that this is not neccessary, as [it's already compiled](/emscr/binary).
45 |
46 | Both call the script in [`emscr/builds/openssl/build.sh`](/emscr/builds/openssl/build.sh). It fetches and extracts the OpenSSL sources as a `.tar.gz` archive from https://www.openssl.org/source. It then compiles them with Emscripten by calling `emconfigure` and `emmake` (both with specific flags).
47 |
48 | The created files `openssl.wasm` and `openssl.js` are then copied into `emscr/binary`, where the webpack server will deliver them from.
49 |
50 | ### Option 1: Using Docker
51 |
52 | First, [install and start Docker](https://docs.docker.com/get-docker). Then run the following command:
53 |
54 | ```shell
55 | $ npm run build:openssl:docker
56 | ```
57 |
58 | This will fetch Emscripten's Docker image [`emscripten/emsdk`](https://hub.docker.com/r/emscripten/emsdk) and run the build script.
59 |
60 | > This option should work cross-platform.
61 |
62 | ### Option 2: Manually (without Docker)
63 |
64 | First, [install the Emscripten SDK](https://emscripten.org/docs/getting_started/downloads.html). Then run the following command:
65 |
66 | ```shell
67 | $ npm run build:openssl
68 | ```
69 |
70 | > This option may only work using Linux. It failed for us on macOS and we therefore recommend [Option 1: Using Docker](#option-1-using-docker).
71 |
72 |
73 | ## Running this project with Docker
74 |
75 | The source code contains a [`Dockerfile`](/Dockerfile) which allows you to create ready-to-run [Docker](https://www.docker.com) images. These are comparable to snapshots in virtual machines.
76 |
77 | First, [install and start Docker](https://docs.docker.com/get-docker). Then create a Docker image:
78 |
79 | ```shell
80 | $ docker build -t openssl-webterm .
81 | ```
82 |
83 | > This installs [Alpine Linux](https://www.alpinelinux.org) with Node.js (v16.3) and [nginx](https://github.com/nginx/nginx) into a virtual image, builds the OpenSSL Webterm sources, and copies the built files into nginx's web server directory.
84 |
85 | You can then instanciate this image into a Docker container:
86 |
87 | ```shell
88 | $ docker run --rm -it -p 4300:80 -d openssl-webterm
89 | ```
90 |
91 | > This runs the nginx web server.
92 |
93 | You should now be able to view the OpenSSL Webterm at http://localhost:4300
94 |
95 |
96 | ## Contributing
97 |
98 | Any contributions are greatly appreciated. If you have a suggestion that would make this better, please open an issue or fork the repository and create a pull request.
99 |
100 | ## License
101 |
102 | [Apache License v2](http://www.apache.org/licenses/)
103 | This mainly requests to keep the name of the original authors and give according credit to them if you change or redistribute the sources.
104 |
--------------------------------------------------------------------------------
/emscr/binary/openssl.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | var EmscrJSR_openssl = (() => {
3 | var _scriptDir = typeof document !== 'undefined' && document.currentScript ? document.currentScript.src : undefined;
4 |
5 | return (
6 | function(EmscrJSR_openssl) {
7 | EmscrJSR_openssl = EmscrJSR_openssl || {};
8 |
9 | var Module=typeof EmscrJSR_openssl!="undefined"?EmscrJSR_openssl:{};var readyPromiseResolve,readyPromiseReject;Module["ready"]=new Promise(function(resolve,reject){readyPromiseResolve=resolve;readyPromiseReject=reject});var moduleOverrides=Object.assign({},Module);var arguments_=[];var thisProgram="./this.program";var quit_=(status,toThrow)=>{throw toThrow};var ENVIRONMENT_IS_WEB=true;var ENVIRONMENT_IS_WORKER=false;var ENVIRONMENT_IS_NODE=false;var scriptDirectory="";function locateFile(path){if(Module["locateFile"]){return Module["locateFile"](path,scriptDirectory)}return scriptDirectory+path}var read_,readAsync,readBinary,setWindowTitle;if(ENVIRONMENT_IS_WEB||ENVIRONMENT_IS_WORKER){if(ENVIRONMENT_IS_WORKER){scriptDirectory=self.location.href}else if(typeof document!="undefined"&&document.currentScript){scriptDirectory=document.currentScript.src}if(_scriptDir){scriptDirectory=_scriptDir}if(scriptDirectory.indexOf("blob:")!==0){scriptDirectory=scriptDirectory.substr(0,scriptDirectory.replace(/[?#].*/,"").lastIndexOf("/")+1)}else{scriptDirectory=""}{read_=url=>{var xhr=new XMLHttpRequest;xhr.open("GET",url,false);xhr.send(null);return xhr.responseText};if(ENVIRONMENT_IS_WORKER){readBinary=url=>{var xhr=new XMLHttpRequest;xhr.open("GET",url,false);xhr.responseType="arraybuffer";xhr.send(null);return new Uint8Array(xhr.response)}}readAsync=(url,onload,onerror)=>{var xhr=new XMLHttpRequest;xhr.open("GET",url,true);xhr.responseType="arraybuffer";xhr.onload=()=>{if(xhr.status==200||xhr.status==0&&xhr.response){onload(xhr.response);return}onerror()};xhr.onerror=onerror;xhr.send(null)}}setWindowTitle=title=>document.title=title}else{}var out=Module["print"]||console.log.bind(console);var err=Module["printErr"]||console.warn.bind(console);Object.assign(Module,moduleOverrides);moduleOverrides=null;if(Module["arguments"])arguments_=Module["arguments"];if(Module["thisProgram"])thisProgram=Module["thisProgram"];if(Module["quit"])quit_=Module["quit"];var wasmBinary;if(Module["wasmBinary"])wasmBinary=Module["wasmBinary"];var noExitRuntime=Module["noExitRuntime"]||false;if(typeof WebAssembly!="object"){abort("no native wasm support detected")}var wasmMemory;var ABORT=false;var EXITSTATUS;function assert(condition,text){if(!condition){abort(text)}}var UTF8Decoder=typeof TextDecoder!="undefined"?new TextDecoder("utf8"):undefined;function UTF8ArrayToString(heapOrArray,idx,maxBytesToRead){var endIdx=idx+maxBytesToRead;var endPtr=idx;while(heapOrArray[endPtr]&&!(endPtr>=endIdx))++endPtr;if(endPtr-idx>16&&heapOrArray.buffer&&UTF8Decoder){return UTF8Decoder.decode(heapOrArray.subarray(idx,endPtr))}var str="";while(idx| {file.name} | 43 |{(new Date(file.timestamp)).toUTCString()} | 44 |{this._formatBytes(file.bytes.byteLength)} | 45 |
46 | |
57 |
| - | - | - | - |