JavaScript

2451 readers
1 users here now

founded 2 years ago
MODERATORS
1
 
 

Decentralized Architecture: https://positive-intentions.com/blog/decentralised-architecture

While my approach here could be considered overly complicated (because, well, it is), I'm trying something new, and it's entirely possible this strategy won't be viable long-term. My philosophy is "there's only one way to find out." I'm not necessarily recommending this approach, just sharing my journey and what I'm doing.

Potential Benefits

I've identified some interesting benefits to this approach:

While I often see module federation and microfrontends discouraged in online discussions, I believe they're a good fit for my specific approach. I'm optimistic about the benefits and wanted to share the details.

When serving the federated modules, I can also host the Storybook statics. I think this could be an excellent way to document the modules in isolation.

Modules and Applications

Here are some examples of the modules and how they're being used:

This setup allows me to create microfrontends that consume these modules, enabling me to share functionality between different applications. The following applications, which have distinct codebases (and a distinction between open and closed source), would be able to leverage this:

Sharing these dependencies should make it easier to roll out updates to core mechanics across these diverse applications.

Furthermore, this functionality also works when I create an Android build with Tauri. This could streamline the process of creating new applications that utilize these established modules.

Considerations and Future

I'm sure there will be some distinct testing and maintenance overhead with this architecture. However, depending on how it's implemented, I believe it could work and make it easier to improve upon the current functionality.

It's important to note that everything about this project is far from finished. Some might view this as an overly complicated way to achieve what npm already does. However, I think this approach offers greater flexibility by allowing for the separation of open and closed-source code for the web. Of course, being JavaScript, the "source code" will always be accessible, especially in the age of AI where reverse-engineering is more possible than ever before.

2
 
 

Watched this a while back throughout enjoyed it and thought i might share this here.

3
4
5
6
 
 
7
8
 
 

cross-posted from: https://lemmy.world/post/31859998

Please see the cross-post as it is updated.

As a security-conscious user, I've used NoScript since Firefox's early days, but its restrictive nature has become frustrating. I'm often forced to go unprotected just to access websites with multiple scripts running on different domains, which defeats the purpose of using NoScript and balances security and usability that it once provided.

Is there a way to block browser JavaScript from executing commands that retrieve sensitive information from my local machine, while still allowing JavaScript that is only used for rendering web pages?

greatly appreciate any insight

cross-posted from: https://lemmy.world/post/31859998

Please see the cross-post as it is updated.

9
10
11
6
submitted 1 month ago* (last edited 2 weeks ago) by KaKi87@jlai.lu to c/javascript@programming.dev
12
13
14
15
16
17
 
 

Introducing Dim – a new framework that brings React-like functional JSX-syntax with JS. Check it out here:

🔗 Project: https://github.com/positive-intentions/dim

🔗 Website: https://dim.positive-intentions.com/

My journey with web components started with Lit, and while I appreciated its native browser support (less tooling!), coming from ReactJS, the class components felt like a step backward. The functional approach in React significantly improved my developer experience and debugging flow.

So, I set out to build a thin, functional wrapper around Lit, and Dim is the result! It's a proof-of-concept right now, with "main" hooks similar to React, plus some custom ones like useStore for encryption-at-rest. (Note: state management for encryption-at-rest is still unstable and currently uses a hardcoded password while I explore passwordless options like WebAuthn/Passkeys).

You can dive deeper into the documentation and see how it works here:

📚 Dim Docs: https://positive-intentions.com/docs/category/dim

This project is still in its early stages and very unstable, so expect breaking changes. I've already received valuable feedback on some functions regarding security, and I'm actively investigating those. I'm genuinely open to all feedback as I continue to develop it!

18
 
 

How would one include a passphrase when using the web crypto API when working with asymmetric encryption. I was able to figure out how to do asymmetric encryption without a passphrase using the web crypto API and was able to figure out how to do asymmetric encryption using the crypto library in NodeJS.

Asymmetric encryption using Web Crypto API (No Passphrase)

import { webcrypto } from 'crypto';

const MY_TEXT = 'My Text';

(async function () {
	const { publicKey, privateKey } = await webcrypto.subtle.generateKey(
		{
			name: 'rsa-Oaep',
			modulusLength: 2048,
			publicExponent: new Uint8Array([1, 0, 1]),
			hash: 'sha-256',
		},
		true,
		['encrypt', 'decrypt']
	);

	const encryptedTextArrayBuffer = await webcrypto.subtle.encrypt(
		{
			name: 'rsa-Oaep',
		},
		publicKey,
		new TextEncoder().encode(MY_TEXT)
	);

	let encryptedTextUint8Array = new Uint8Array(encryptedTextArrayBuffer);
	const ENCRYPTED_TEXT = convertUint8ArrayToBase64String(encryptedTextUint8Array);

	console.log(ENCRYPTED_TEXT);

	encryptedTextUint8Array = convertBase64StringToUint8Array(ENCRYPTED_TEXT);

	const decryptedArrayBuffer = await webcrypto.subtle.decrypt(
		{
			name: 'rsa-Oaep',
		},
		privateKey,
		encryptedTextUint8Array.buffer
	);

	console.log(new TextDecoder().decode(decryptedArrayBuffer));
})();

function convertUint8ArrayToBase64String(uint8Array) {
	const CHARACTER_CODES = String.fromCharCode(...uint8Array);
	return btoa(CHARACTER_CODES);
}

function convertBase64StringToUint8Array(base64String) {
	const CHARACTER_CODES = atob(base64String);

	const uint8Array = new Uint8Array(CHARACTER_CODES.length);
	uint8Array.set(
		new Uint8Array(
			[...CHARACTER_CODES].map(function (currentCharacterCode) {
				return currentCharacterCode.charCodeAt(0);
			})
))}
19
20
21
22
23
 
 

I stumbled on the exact same issue described at the end of the "The same issue, but with web platform functions" section today, thought it might be worth sharing that article here.

24
25
view more: next ›