Effortless symmetric AES encryption straight from your browser

I have been tasked with developing a basic encryption add-on for a simple knowledge base/article application. The goal is to implement straightforward symmetric encryption without any complex features or a multitude of options.

While searching for JavaScript libraries or examples to help me achieve this, I have been surprised by the lack of available resources. Most search results seem to focus on criticizing browser encryption instead of providing practical solutions. Can you recommend a straightforward library or related resource for me to explore?

In the meantime, I have found that the Web Cryptography API offers a simple and accessible solution. After some experimentation, I have come up with the following code:

(code snippet here)

While this code works, it does feel somewhat convoluted. I am sure there must be a cleaner and more straightforward approach available. The nested layers of "thenables" do not appear very clean to me.

One final question I have is regarding the best method for storing the resulting cipher text and vector in MongoDB. Currently, I am outputting them as an array, which MongoDB interprets as an array of long integers. If I output them as a Typed Array, MongoDB sees them as an Object rather than an Array. Additionally, if I attempt to save them as "text," decryption no longer works properly.

How do others typically handle this? What is the best way to store these values in a database? If storing as "text," what is the optimal method for "armoring" a Typed Array to ensure secure storage and retrieval for decryption purposes?

Answer №1

Check out the crypto-js library for a powerful AES implementation that can be used in the browser.

My usual approach involves converting the cipher and vector to strings, and then encrypting that string using an asymmetric algorithm before storing it in the database.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize JavaScript to extract content from a text file and showcase it in a Bootstrap modal pop-up through knockout binding

I'm currently working on a function that reads data from a .txt file (located in the website's root directory) and then displays it in a modal dialog box. I believe I've made progress as the file is recognized during debugging, but unfortuna ...

Executing javascript whenever a page is updated

Looking for a solution to ensure that my userscript runs every time an AJAX call modifies any page it is attached to. Is there a way to listen for XMLHttpRequests and trigger the script accordingly? ...

What is the best way to create a carousel component with this particular design?

`I want to enhance my static HTML CSS website by incorporating a slider feature using JavaScript. Looking for guidance on the best approach. Here is the layout. I've attempted various tutorials but they weren't compatible with my layout or reli ...

Testing actual HTTP requests in unit and integration tests with AngularJS

Attempting a request that was not mocked using $httpBackend.when in an Angular 1.x unit/integration test will lead to an error: Error: Unexpected request: GET /real-request Is there a way to perform actual HTTP requests with ngMock and the Karma+Jasmin ...

Designing a book-style layout using jQuery

I am currently working on a web application that needs to display its data in a book-like format. The structure of the data is as follows: Menu{ String menuName; List<String> subMenu; } To achieve this, I utilized jQuery to dynamically generate ...

Multer's re.file function is returning an undefined value

I am seeking assistance with my coding project. I have a setup that uses React on the front end, Node.js on the backend, and MySQL as the database. The issue I am facing is related to file transfer using Multer in Node.js. When trying to transfer files, Mu ...

Encountering the message "Error: Unable to access undefined properties (reading 'username')" while making my POST request

My POST request isn't functioning correctly and it's failing to update. The specific error message I'm encountering is: TypeError: Cannot read properties of undefined (reading 'username') app.post('/create-user', functio ...

How do I specify the default checked value for a checkbox in Redux Form?

Within our Redux Form 5.3 application (not version 6.x), the goal is to display an <input type="checkbox" /> in this manner: // Sometimes, fieldHelper.checked starts off as undefined. When a checkbox is // clicked by the user, fieldHelper.checked is ...

The form inputs within the modal are unresponsive to clicks

I recently began using bootstrap modals and had a separate register/login page from the index. I thought incorporating the login/register form into modals would be a good idea. However, inside the modal, all the inputs are not clickable - only accessible v ...

Is it Possible for Angular Layout Components to Render Content Correctly even with Deeply Nested ng-container Elements?

Within my Angular application, I have designed a layout component featuring two columns using CSS. Within this setup, placeholders for the aside and main content are defined utilizing ng-content. The data for both the aside and main sections is fetched fr ...

The art of selecting elements and attaching event listeners in a React environment

Currently, I am working on my portfolio website using Gatsby. The layout includes a sidebar on the left with navigational links (Home, About, Work, etc.), and the main content is displayed as one long strip of sections on the right. When a user clicks on a ...

Is it common practice to include a variable in a function with the same name as the function itself?

Is it common practice to use a variable with the same name as the function within the function itself? const sum = function(arr) { let sum = 0; for(let i = 0; i < arr.length; i++) sum += arr[i]; return sum; }; Although this code runs s ...

Create static HTML web pages using information from a text file

Exploring a new concept of a random joke generator that loads a unique html page with a quirky joke every time. Currently, the main index page is structured like this: <!DOCTYPE html> <html> <head><title>Jokes</title> ...

"Scotchy McScotchface's to-do list application powered

How is the index.html (frontend Angular) being triggered? The tutorial mentioned that by including one of the following routes in route.js, the frontend gets called app.get('*', function(req, res) { res.sendfile('./public/index.html&ap ...

Transforming Lines with ThreeJS

I have created a rotating cube in ThreeJS that is made up of multiple particles. These particles belong to an array called 'particles' and are part of a group named 'group' which rotates around the origin on all axes (x, y, z). My goal ...

Using sinon.js version 1.10, jQuery version 2.1, and making synchronous requests

I have been attempting to simulate a server using sinon.js and calling it with jQuery.ajax, but I am facing issues getting it to work. Here is the code snippet: $(function() { var server = sinon.fakeServer.create(); server.respondWith('POST&apo ...

Execute the laravel {{action(Controller@method}} by sending a parameter from a vue.js array

Within my view created using Blade templates, I have a link with an href attribute that directly calls a Controller method. Here is an example: <a id="@{{user.id}}" href="{{action('Controller@method')}}">>update</a> Everything wo ...

Leveraging CamanJS for canvas filtering

These are my HTML elements: <div class="wrapper"> <nav class="navbar navbar-transparent"> <div class="container-fluid"> <div class="navbar-header"> <span class="btn btn-white btn-file"> ...

tips for replacing multiple route parameters in Angular using the replace function

I am facing an issue when trying to replace multiple parameters using the angular replace function. The problem is that the function only detects the first parameter. For example, if I have this route admin/management/{type}/card/{id}, and use the route.r ...

Searching for the closest jQuery value associated with a label input

As a beginner in JQuery, I am looking to locate an inputted value within multiple labels by using a Find button. Below is the HTML snippet. Check out the screenshot here. The JQuery code I've attempted doesn't seem to give me the desired output, ...