| {file.name} | 43 |{(new Date(file.timestamp)).toUTCString()} | 44 |{this._formatBytes(file.bytes.byteLength)} | 45 |
46 | |
57 |
| - | - | - | - |
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 |
--------------------------------------------------------------------------------
/sources/openssl-gui/OpenSSL_GUI.js:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import { Trans } from "react-i18next"
3 |
4 | import Badge from "react-bootstrap/Badge"
5 | import Card from "react-bootstrap/Card"
6 | import Nav from "react-bootstrap/Nav"
7 | import Tab from "react-bootstrap/Tab"
8 |
9 | import EncryptionTab from "./tabs/EncryptionTab"
10 | import FilesTab from "./tabs/FilesTab"
11 | import GenKeysTab from "./tabs/GenKeysTab"
12 | import SignVerifyTab from "./tabs/SignVerifyTab"
13 | import HashesTab from "./tabs/HashesTab"
14 | import WelcomeTabContent from "./tabs/WelcomeTab"
15 |
16 | class OpenSSLGUI extends React.Component {
17 |
18 | state = { filesdirty: false }
19 |
20 | shouldComponentUpdate(nextProps, nextState) {
21 |
22 | // checks if files have changed
23 |
24 | const prevPropsFileList = this.props.files.map(file => file.name)
25 | const nextPropsFileList = nextProps.files.map(file => file.name)
26 |
27 | const combinedFileList = prevPropsFileList.concat(nextPropsFileList
28 | .filter(file => prevPropsFileList.indexOf(file) < 0))
29 |
30 | for(const filename of combinedFileList) {
31 |
32 | if(!prevPropsFileList.includes(filename)) {
33 | console.log("file " + filename + " was newly created")
34 | nextState.filesdirty = true
35 | break
36 | }
37 |
38 | else if(!nextPropsFileList.includes(filename)) {
39 | console.log("file " + filename + " was deleted")
40 | nextState.filesdirty = true
41 | break
42 | }
43 |
44 | else {
45 | const prevFile = this.props.files.find(file => file.name == filename)
46 | const nextFile = nextProps.files.find(file => file.name == filename)
47 |
48 | if(prevFile.bytes.length != nextFile.bytes.length) {
49 | console.log("contents of " + filename + " have changed")
50 | nextState.filesdirty = true
51 | break
52 | }
53 | }
54 | }
55 |
56 | // todo: show in files tab which files have changed?
57 |
58 | return true // update anyway
59 | }
60 |
61 | render() {
62 |
63 | return (
64 |
129 |
130 | this.setFiles(files)}
144 | fullscreen={this.state.fullscreen} exitFullscreen={() => this.exitFullscreen()}
145 | runCommand={line => this.runCommandFromOpenSSLGUI(line)} cipherList={this.state.openSSL.cipherList}
146 | curvesList={this.state.openSSL.curvesList} hashfunList={this.state.openSSL.hashfunList} />
147 |
148 | {!this.state.fullscreen &&
162 | )
163 | }
164 |
165 | componentDidUpdate(prevProps, prevState) {
166 |
167 | // resize on fullscreen mode change
168 | if(this.state.fullscreen != prevState.fullscreen)
169 | this.wasmTerm._xtermFitAddon.fit()
170 |
171 | return true // render anyway
172 | }
173 |
174 |
175 | setLoading(value, callback) { // value is string or boolean
176 | if(value) this.setState({ loading: value }, callback)
177 | else this.setState({ loading: false }, callback)
178 | }
179 |
180 | setFiles(files) {
181 | this.wasmTerm._wasmFsFiles = files
182 | this.setState(() => ({ files: this.wasmTerm._wasmFsFiles }))
183 | // state is passed as a function to use latest reference to wasmFsFiles
184 | }
185 |
186 |
187 | async runCommandFromOpenSSLGUI(line) {
188 |
189 | // only run one command at a time
190 | if(this.wasmTerm._isRunningCommand) return
191 |
192 | // show command on terminal
193 | this.wasmTerm._xterm.write(line + "\r\n")
194 |
195 | // abort current repl
196 | this.wasmTerm._xtermEcho.abortRead("Everything is fine, running command from GUI")
197 |
198 | // add command to history
199 | this.wasmTerm._xtermEcho.history.push(line)
200 |
201 | // show loading animation
202 | await this.wasmTerm.onBeforeCommandRun()
203 |
204 | // execute line of commands
205 | await this.wasmTerm.runLine(line)
206 |
207 | // print newline after
208 | this.wasmTerm._xterm.write("\r\n")
209 |
210 | // hide loading animation
211 | await this.wasmTerm.onCommandRunFinish()
212 |
213 | // restart repl
214 | this.wasmTerm.repl()
215 |
216 | }
217 |
218 | _onFullscreenResize(e) {
219 | const x = e.clientX, y = e.clientY
220 | const parentElem = e.target.parentNode
221 | const leftElem = e.target.previousElementSibling
222 | const leftWidth = leftElem.getBoundingClientRect().width
223 | document.onmousemove = (e) => {
224 | const dx = e.clientX - x, dy = e.clientY - y
225 | const newLeftWidth = ((leftWidth + dx) * 100) / parentElem.getBoundingClientRect().width
226 | leftElem.style.width = newLeftWidth + "%"
227 | this.wasmTerm._xtermFitAddon.fit()
228 | }
229 | document.onmouseup = () => document.onmousemove = document.onmouseup = null
230 | }
231 |
232 | enterFullscreen() {
233 | this.setState({ fullscreen: true })
234 | document.getElementsByTagName("html")[0].style.overflow = "hidden"
235 | }
236 |
237 | exitFullscreen() {
238 | this.setState({ fullscreen: false })
239 | document.getElementsByTagName("html")[0].style.overflow = ""
240 | }
241 |
242 | }
243 |
244 | export default CommandLine
245 |
--------------------------------------------------------------------------------
/sources/openssl-gui/tabs/EncryptionTab.js:
--------------------------------------------------------------------------------
1 | import React from "react"
2 |
3 | import { Trans } from "react-i18next"
4 | import i18next from "../../translations"
5 |
6 | import Button from "react-bootstrap/Button"
7 | import Col from "react-bootstrap/Col"
8 | import Form from "react-bootstrap/Form"
9 | import Row from "react-bootstrap/Row"
10 |
11 | import CommandField from "../CommandField"
12 | import Helpers from "../Helpers"
13 |
14 | class EncryptionTab extends React.Component {
15 |
16 | // should get props: files, cipherList, runCommand
17 |
18 | constructor(props) {
19 | super(props)
20 |
21 | this.state = {
22 |
23 | /* default values */
24 | mode: "encrypt",
25 | inputtype: "text",
26 | inputtext: i18next.t("Hello world"),
27 | method: "cipher",
28 | cipher: "aes-256-cbc",
29 | passphrasetype: "text",
30 | outputfile: "encrypted.data",
31 | pbkdf2: "true",
32 | salt: "true",
33 | base64: "true"
34 |
35 | }
36 |
37 | // save initial state for reset (copy - no reference)
38 | this._initialState = JSON.parse(JSON.stringify(this.state))
39 | }
40 |
41 | render() {
42 |
43 | // filter files for private or public keys
44 | const keyfiles = (this.state.mode == "encrypt")
45 | ? Helpers.getPublicKeysFilenamesFromFiles(this.props.files)
46 | : Helpers.getPrivateKeysFilenamesFromFiles(this.props.files)
47 |
48 | // check if last selected key file is still available
49 | if(this.state.key != 0 && !keyfiles.includes(this.state.key))
50 | this.state.key = undefined
51 |
52 | // set default key file (on files update)
53 | if(this.state.key == undefined && keyfiles.length > 0)
54 | this.state.key = keyfiles[0]
55 |
56 | // check if selected private key is encrypted
57 | if(this.state.method == "key" && this.state.mode == "decrypt" && this.state.key != "") {
58 | let privateKey = this.props.files.find(file => file.name == this.state.key)
59 | this.isPrivateKeyEncrypted = privateKey ? Helpers.isKeyEncrypted(privateKey) : undefined
60 | } else this.isPrivateKeyEncrypted = undefined
61 |
62 | // validate fields and build command
63 | const whatsValid = this._validateFields()
64 | const command = this._buildCommand(whatsValid)
65 |
66 | return
218 | }
219 |
220 |
221 | onChange(e) {
222 | let fields = { ...this.state, [e.target.name]: e.target.value }
223 |
224 | // special case: replace output filename on mode change (for unchanged values)
225 | if(e.target.name == "mode") {
226 | const encryptOriginalValue = this._initialState.outputfile.replace("decrypt", "encrypt")
227 | const decryptOriginalValue = this._initialState.outputfile.replace("encrypt", "decrypt")
228 | if(fields.outputfile == encryptOriginalValue) fields.outputfile = decryptOriginalValue
229 | else if(fields.outputfile == decryptOriginalValue) fields.outputfile = encryptOriginalValue
230 | }
231 |
232 | this.setState(fields)
233 | }
234 |
235 | _validateFields() {
236 |
237 | let whatsValid = {}
238 |
239 | // check if input text is valid
240 | if(this.state.inputtype == "text")
241 | whatsValid.inputtext = !(!this.state.inputtext)
242 |
243 | // check if input file is valid
244 | if(this.state.inputtype == "file")
245 | whatsValid.inputfile = !(!this.state.inputfile)
246 |
247 | // check if cipher was selected
248 | if(this.state.method == "cipher")
249 | whatsValid.cipher = this.props.cipherList.includes(this.state.cipher)
250 |
251 | // check if key was selected
252 | if(this.state.method == "key")
253 | whatsValid.key = !(!this.state.key)
254 |
255 | // only use passphrase for ciphers and decryption with encrypted private keys
256 | if(this.state.method == "cipher" || (this.state.mode == "decrypt" && this.isPrivateKeyEncrypted)) {
257 |
258 | // check if passphrase text is valid
259 | if(this.state.passphrasetype == "text")
260 | whatsValid.passphrasetext = !(!this.state.passphrasetext)
261 |
262 | // check if passphrase file is valid
263 | if(this.state.passphrasetype == "file")
264 | whatsValid.passphrasefile = !(!this.state.passphrasefile)
265 |
266 | }
267 |
268 | // check if output file is valid
269 | if(this.state.useoutputfile == "true")
270 | whatsValid.outputfile = !(!(this.state.outputfile || "").trim())
271 |
272 | return whatsValid
273 |
274 | }
275 |
276 | _buildCommand(whatsValid = {}) {
277 |
278 | if(Object.values(whatsValid).includes(false)) return i18next.t("Please fill in all fields")
279 |
280 | let command = "openssl"
281 |
282 | if(this.state.method == "cipher") {
283 | command += " enc -" + this.state.cipher
284 | if(this.state.mode == "encrypt") command += " -e"
285 | if(this.state.mode == "decrypt") command += " -d"
286 | }
287 |
288 | if(this.state.method == "key") {
289 | command += " pkeyutl"
290 |
291 | if(this.state.mode == "encrypt") {
292 | command += " --encrypt"
293 | command += " -pubin -inkey " + this.state.key
294 | }
295 |
296 | if(this.state.mode == "decrypt") {
297 | command += " --decrypt"
298 | command += " -inkey " + this.state.key
299 |
300 | if(this.isPrivateKeyEncrypted) {
301 |
302 | if(this.state.passphrasetype == "text")
303 | command += " -passin pass:" + this.state.passphrasetext
304 |
305 | if(this.state.passphrasetype == "file")
306 | command += " -passin file:" + this.state.passphrasefile
307 | }
308 | }
309 | }
310 |
311 | if(this.state.inputtype == "text")
312 | command = "echo " + this.state.inputtext + " | " + command
313 |
314 | if(this.state.inputtype == "file")
315 | command += " -in " + this.state.inputfile
316 |
317 | if(this.state.method == "cipher") {
318 |
319 | if(this.state.passphrasetype == "text")
320 | command += " -k " + this.state.passphrasetext
321 |
322 | if(this.state.passphrasetype == "file")
323 | command += " -kfile " + this.state.passphrasefile
324 |
325 | if(this.state.pbkdf2 == "true")
326 | command += " -pbkdf2"
327 |
328 | if(this.state.salt != "true")
329 | command += " -nosalt"
330 |
331 | if(this.state.base64 == "true")
332 | command += " -a"
333 |
334 | }
335 |
336 | if(this.state.useoutputfile == "true")
337 | command += " -out " + this.state.outputfile
338 |
339 | return command
340 |
341 | }
342 |
343 | _resetFields() {
344 | // overwrite current state with initial state (including undefined)
345 | this.setState(prevState => Object.fromEntries(Object.entries(prevState)
346 | .map(([key, value]) => [key, this._initialState[key]])))
347 | }
348 |
349 | _isInvalid(value) {
350 | // make undefined not mean false
351 | if(value == undefined) return undefined
352 | else return !value
353 | }
354 |
355 | }
356 |
357 | export default EncryptionTab
358 |
--------------------------------------------------------------------------------
/sources/openssl-gui/tabs/SignVerifyTab.js:
--------------------------------------------------------------------------------
1 | import React from "react"
2 |
3 | import { Trans } from "react-i18next"
4 | import i18next from "../../translations"
5 |
6 | import Button from "react-bootstrap/Button"
7 | import Card from "react-bootstrap/Card"
8 | import Col from "react-bootstrap/Col"
9 | import Form from "react-bootstrap/Form"
10 | import Row from "react-bootstrap/Row"
11 |
12 | import CommandField from "../CommandField"
13 | import Helpers from "../Helpers"
14 |
15 | class SignVerifyTab extends React.Component {
16 |
17 | // should get props: files, runCommand
18 |
19 | constructor(props) {
20 | super(props)
21 |
22 | this.state = {
23 |
24 | /* default values */
25 |
26 | signingFields: {
27 | inputtype: "text",
28 | inputtext: i18next.t("Hello world"),
29 | passphrasetype: "text",
30 | outputfile: "signed.data"
31 | },
32 |
33 | verifyFields: {
34 | inputtype: "text",
35 | inputtext: i18next.t("Hello world")
36 | }
37 |
38 | }
39 |
40 | // save initial state for reset (copy - no reference)
41 | this._initialState = JSON.parse(JSON.stringify(this.state))
42 | }
43 |
44 | render() {
45 |
46 | // filter files for private and public keys
47 | this.privateKeys = Helpers.getPrivateKeysFilenamesFromFiles(this.props.files)
48 | this.publicKeys = Helpers.getPublicKeysFilenamesFromFiles(this.props.files)
49 |
50 | // check if last selected privkey is still available
51 | if(this.state.signingFields.privkey != "" // "" means "Select file"
52 | && !this.privateKeys.includes(this.state.signingFields.privkey))
53 | this.state.signingFields.privkey = undefined
54 |
55 | // check if last selected pubkey is still available
56 | if(this.state.verifyFields.pubkey != "" // "" means "Select file"
57 | && !this.publicKeys.includes(this.state.verifyFields.pubkey))
58 | this.state.verifyFields.pubkey = undefined
59 |
60 | // check if last selected sigfile is still available
61 | if(this.state.verifyFields.sigfile != "" // "" means "Select file"
62 | && !this.props.files.some(f => f.name == this.state.verifyFields.sigfile))
63 | this.state.verifyFields.sigfile = undefined
64 |
65 | // set default privkey file (on files update)
66 | if(this.state.signingFields.privkey == undefined && this.privateKeys.length > 0)
67 | this.state.signingFields.privkey = this.privateKeys[0]
68 |
69 | // set default pubkey file (on files update)
70 | if(this.state.verifyFields.pubkey == undefined && this.publicKeys.length > 0)
71 | this.state.verifyFields.pubkey = this.publicKeys[0]
72 |
73 | // check if selected privkey is encrypted
74 | if(this.state.signingFields.privkey != "") {
75 | let privkeyFile = this.props.files.find(file => file.name == this.state.signingFields.privkey)
76 | this.isPrivateKeyEncrypted = privkeyFile ? Helpers.isKeyEncrypted(privkeyFile) : undefined
77 | } else this.isPrivateKeyEncrypted = undefined
78 |
79 | // validate fields and build command for signing
80 | const whatsValidSign = this._validateSigningFields()
81 | const signingCommand = this._buildSigningCommand(whatsValidSign)
82 |
83 | // validate fields and build command for verify
84 | const whatsValidVery = this._validateVerifyFields()
85 | const verifyCommand = this._buildVerifyCommand(whatsValidVery)
86 |
87 | return <>
88 |
89 |
131 |
132 |
139 |
140 | {this.state.fullscreen &&
135 |
136 |
}
138 | {this.state.loading}
137 | this._onFullscreenResize(e)}>
}
142 |
143 |
149 |
150 |
153 |
154 | {typeof CTO_Globals == "undefined" &&
155 |
156 | {(window.lang == "en") ? "Deutsch" : "English"}
157 | }
158 |
159 |
}
160 |
161 | 198 |
273 |