Giter Club home page Giter Club logo

ciphereditor's Introduction

MIT license Standard Code Style

Your playground for cryptography, coding & data

ciphereditor is a web app for cryptography, coding, and data encouraging beginners and pros alike to explore new operations and build own workflows – ciphereditor.com

Repository structure

As a monorepo this repository contains multiple packages that share common dependencies or depend on each other. All packages listed below share the same version.

Packages

The following packages contain the logic necessary to build the app itself (excl. operations).

  • app-web - Core web app built on React and Redux Toolkit (requires processor and library)
  • app-desktop - Desktop application source built on app-web and Electron
  • website - Official ciphereditor.com website app-web is embedded in (closed source)
  • processor - JavaScript sandbox and “runtime environment” for extensions
  • library - Logic, schemas and types shared between the app and extensions

Extensions

Extensions provide operations, the nodes or methods you can use on the ciphereditor canvas. They run in the environment created by the app packages listed above.

  • codepages - Operations related to character encodings
  • dictionary - Operations related to dictionary-based translations
  • essentials - Essential operations
  • forge - Operations related to algorithms offered by the forge package
  • hash - Operations related to cryptographic hash functions
  • pgp - Operations related to the OpenPGP protocol

Development setup

Make sure you have Node.js installed and use the same version as written in .nvmrc.

To build the project on your own machine download a release or clone the entire repository using Git by issuing the following command in your terminal:

git clone [email protected]:wierkstudio/ciphereditor.git

Install the dependencies for all packages within the repository root folder using the following command. You need to repeat this step every time package-lock.json changes.

npm install

Environment variables used during development can be set in .env.local. Create it from the example file and fill in the blanks as needed:

cp .env.local.example .env.local

(Re-)build the processor package from source like so:

npm run processor-build

As some of the browser features the web app depends on require a secure HTTPS connection to the server, we recommend you to generate a self-signed certificate to be used during development. To do this, run the following OpenSSL command in the repository root folder:

openssl req -x509 -newkey rsa:4096 -keyout assets/localhost.key -out assets/localhost.crt -sha256 -days 365 -nodes -subj '/CN=localhost'

It will create a new certificate and place the necessary files at assets/localhost.key and assets/localhost.crt that will automatically be used by the web app dev server.

Finally, start the web app dev server using this command:

npm run app-web-start

It will make the app available at https://localhost:3010. As the certificate in use is self-signed you will get a nasty warning by the browser which you can ignore. To stop the server, press Ctrl+C.

Find the full list of available project commands in the root package.json.

License

The source code in this repository is published under the MIT license. See LICENSE.txt.

Contributing

If you consider contributing to this project, please read this first.

Acknowledgements

Use of Open Source fonts

We use fonts licensed under the SIL Open Font License, 1.1:

Use of Iconic Pro icons

We use Iconic Pro icons in this project.

Copyright (c) Iconic

Iconic Pro icons are copyrighted. Redistribution is not permitted. Use in source and binary forms, with or without modification, is allowed if you own an Iconic Pro license.


This is a project by Wierk and contributors.

ciphereditor's People

Contributors

anderium avatar deedeeen avatar ffraenz avatar heysteets avatar robigan avatar schllng avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

ciphereditor's Issues

Bug: Breaks on chromeOS

Describe the current behavior

When I try to place an operation, like the viginere cipher operation, the ui disappears and I cannot use the website

Describe the expected behavior

The operation gets placed and the ui remains on the screen

Steps to reproduce the bug

  1. Get a chromebook or similar
  2. Navigate to ciphereditor.com.
  3. Try to place an operation «EDIT: also happens when exiting a program operation»

Version, Environment, Platform

  • ciphereditor version: I cannot find where it says the version
  • Browser and browser version (if applicable): Google Chrome 107.0.5304.110 x64
  • Operating system: chromeOS

Logic:

I know it might sound stupid, but, how do i run it on Windows 10?
I have WSL and other extras in order to run these types of thing but i can't find the exe

Any type of help will be appreciated

Feature: Decode Text to Binary

Describe your feature or enhancement suggestion

Currently it's only possible to encode Binary to Text not the other way.

Describe a concrete use case

Analyze .onion addresses, since they are base32 encoded and contain public key and checksum.

Bug: chromeOS cannot move operations

CONTINUATION OF #17

Describe the current behavior

When I try to drag an operation, it does not move

Describe the expected behavior

The operation moves when I try to drag it

Steps to reproduce the bug

  1. Get a chromebook or similar
  2. Navigate to ciphereditor.com.
  3. Place an operation
  4. Try to move the operation by dragging it

Version, Environment, Platform

  • ciphereditor version: I still do not know where to find this
  • Browser and browser version (if applicable): Google chrome 107.0.5304.110 x64
  • Operating system: chromeOS

InputTextView: Autoresize makes input field larger than necessary

Describe the expected behavior

A text input field should resize such that it fits the text it contains. If there's a trailing newline, the last line should be blank.

Describe the current behavior

  • In Firefox 104.0.2 on macOS there's 1 extra line
  • In Safari 16.0 on macOS there are 8 extra lines

Steps to reproduce the bug

Navigate to the app, add an empty control to the blueprint, expand it and paste the following text (incl. trailing newline) into the input field:

-----BEGIN PGP PUBLIC KEY BLOCK-----

xjMEYytk0BYJKwYBBAHaRw8BAQdAUbTKABzw2YfLZi2UKQJiSvM71CtDvvNm
dshe4WzHeEHNAMKMBBAWCgA+BQJjK2TQBAsJBwgJEDBqIN1bHSv+AxUICgQW
AAIBAhkBAhsDAh4BFiEEo8UNyJJCRcVl8Z58MGog3VsdK/4AAP7uAP9Qk2aL
HkwcOv4rWh+UYV9ZbyDC6pMweQLR8fXEHOZEzQD/X3lwrqc8SaKCkX5sqAuI
mQGU5KvOS1M8XMCXMw9+mwPOOARjK2TQEgorBgEEAZdVAQUBAQdAXrEuB1jH
SheUlAwt4jLmMeMM0IXlM915XJjMPvcwsB0DAQgHwngEGBYIACoFAmMrZNAJ
EDBqIN1bHSv+AhsMFiEEo8UNyJJCRcVl8Z58MGog3VsdK/4AALaKAQDLkbnp
8iHPpp7OL77MZ/UOgIXMdnZ2O0Y43L2hrjSVogEA5ydV84hz/rREHBQ30i2m
t02VbA35HHSxKiDl805VQQc=
=f4Hw
-----END PGP PUBLIC KEY BLOCK-----

Describe a possible solution

Currently the textarea resizes to the same height as the ::after pseudo sibling element that obtains the same value through an attribute and CSS magic. The textarea and pseudo element receive the same font and layout properties. However, the content in the pseudo element wraps differently from the content in the textarea (especially at the / char). You can see this when you disable the visibility: hidden; CSS rule on .input-text__field::after.

I already checked the following properties without any luck:

overflow-wrap: break-word;
text-rendering: optimizelegibility;
vertical-align: text-bottom;
line-break: normal;
-moz-padding-end: 0px;
-moz-padding-start: 0px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

Bug: AES padding scheme ignored when decrypting

Describe the current behavior

AES decryption function takes the last byte of the plain text and if it is between 0x00 and 0x3F, it removes the corresponding number of bytes from the end of the plaintext (assumes it is the padding) otherwise is returns an error.

Describe the expected behavior

CBC and ECB modes use a padding scheme and the padding bytes can only take values between 0x01 and 0x10 (AES block size is 16 bytes). Further, the padding byte is repeated from the end of the message until the end of the block (or for one full block if the message length is divisible by 16 i.e. 0x10101010101010101010101010101010). For example 0xFFFFFFFFFFFFFFFFFFFFFF0505050505 is valid padding but 0xFFFFFFFFFFFFFFFFFFFFFF0000000005 is not, however, currently both are accepted as valid.

Bug: RC4 cipher is broken

Describe the current behavior

Modifying any of the inputs for the RC4 causes it to error with "Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'https://localhost:3010/extensions/essentials/extension.js' failed to load."

Describe the expected behavior

A successful output without an error

Steps to reproduce the bug

  1. Navigate to ciphereditor.com.
  2. Change any of the RC4 parameters

Version, Environment, Platform

  • ciphereditor version: dev.ciphereditor.com & ciphereditor.com
  • Browser and browser version (if applicable): Chrome 108.0.5359.71
  • Operating system: macOS monterey

Feature: Delete object button

Describe your feature or enhancement suggestion

A button to delete objects, such as operations and pathways
To be honest, I'm not sure why it isn't in the program.

Describe a concrete use case

Initial observations

Before I start, I am glad to see Cryptii evolving, and into a node-based editor no less.

That said, here is some observations from playing around with the current at the time version of ciphereditor:
General:

  1. Nodes seem to have the option to get input from and output to variables, however actually knowing where those variables are coming from is not clear unless you've directly created them and noted the name of them. Having a list of these variables available somewhere would make things easier, especially if that list updates the values with the Graph, and if clicking on those variables took us to or highlighted the place they originate from. Alternatively, or in combination, having the variable name appear as a label next to the Node output could also help.
  2. The blue button that brings up the Description of a node feels a little unnecessary. The Up/Down arrow on the button implies that it will shift things in reverse or something, but it only seems to bring up a Description box. If that's all it's intended to do, then I believe having the name of the node at the top of the Node would be nicer overall, and more clear as to what each node is doing. This could also go a long way in making Nodes easier to click without making something shrink or expand, which just feels kinda clunky.
  3. The right-hand sidebar feels rather large when open, but the button to hide it also makes things feel odd to me. Perhaps having that button still be there, but supplemented by a bar on the edge of the side menu allowing manual resizing could help bridge that?
  4. Zooming. I know you mention using the built-in Zoom functionality of the browser, but that's less than ideal in a number of situations. A dedicated ability to zoom, either with a scroll or with +/- buttons on the UI, would not go unappreciated.
  5. Node input/output path collision. This is definitely less of an important thing than others, but it's still worth mentioning, if a Node is placed on top of a path between inputs/outputs, the path ignores it and continues as if it wasn't there. This could make more complex nodes a little less manageable. A tried to use Empty Control nodes as a sort of "relay" node, but that didn't seem to work as I expected.
  6. When two Paths overlap each other, it can be confusing where data is actually going to/coming from. I know there's a dark outline around them that helps a little, but separating the two lines when they overlap may come in handy in certain situations.
  7. Drag-to-Remove Paths. This is a feature I rather enjoy in some other node-based editors. It's not initially clear that you can click on a Path and then press Delete to remove it. I guess that could just come down to a future tutorial of sorts on how to use ciphereditor
  8. While testing further, I seem to have accidentally had the sidebar display button disappear. I am not sure what caused this, but I had to refresh the page for it to return.
  9. A dedicated right-click menu could also be nice. More so if it was similar to ones like Amplify Shader Editor for Unity, where you can right-click and start typing to quickly find desired nodes. Not so important now, but as more nodes and features get added... It may help in the long-term.

Specific Nodes:

  1. On the Binary/Text encoding node, it seems rather unclear on how to flip the operation around (from text to binary, instead of the default binary to text). The "Alphabet" name for the setting in that Node doesn't really feel like it conveys a sort of "encoding mode" of sorts.
  2. On the Word Counter node, the Character Count, Word Count and Line Count values seem somewhat inconsistent in the way they can be used. I assume this is down to the Type of the value.
  3. The Case Transform Node has (and I assume others have) the ability to output their mode of sorts as a string for use in other nodes. However, the string they output does not match with the string we see in their relevant dropdown menu, instead using camelCase strings or other raw values. This alone is fine, but perhaps a preview of what it would output could be handy.
  4. The OR, NOT and AND Nodes may be benefited by allowing other nodes to enter them (other than the other logical operator nodes). For example, if a Word Counter node's input results in an output of Word Count 1, that should be readable by the logical nodes. This could also work in tandem with:
  5. A Switch/IF node. Changing the output path of data based on incoming conditions, such as "value greater than" or "string contains" or what have you can lead to deeper interactions between the nodes and more freedom overall.

I hope this didn't come across as too nit-picky or something!
I just really like node-based editors, and this would be a great application to see thrive going forward.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.