javascript encrypted persistance
im working on a javascript UI framework for personal projects and im trying to create something like a React-hook that handles "encrypted at rest".
the react-hook is described in more detail here. id like to extend its functionality to have encrypted persistant data. my approach is the following and it would be great if you could follow along and let me know if im doing something wrong. all advice is apprciated.
im using indexedDB to store the data. i created some basic functionality to automatically persist and rehydrate data. im now investigating password-encrypting the data with javascript using the browser cryptography api.
i have a PR here you can test out on codespaces or clone, but tldr: i encrypt before saving and decrypt when loading. this seems to be working as expected. i will also encrypt/decrypt the event listeners im using and this should keep it safe from anything like browser extensions from listening to events.
the password is something the user will have to put in themselves at part of some init() process. i havent created an input for this yet, so its hardcoded. this is then used to encrypt/decrypt the data.
i would persist the unencrypted salt to indexedDB because this is then used to generate the key.
i think i am almost done with this functionality, but id like advice on anything ive overlooked or things too keep-in-mind. id like to make the storage as secure as possible.
javascript encrypted persistance
im working on a javascript UI framework for personal projects and im trying to create something like a React-hook that handles "encrypted at rest".
the react-hook is described in more detail here. id like to extend its functionality to have encrypted persistant data. my approach is the following and it would be great if you could follow along and let me know if im doing something wrong. all advice is apprciated.
im using indexedDB to store the data. i created some basic functionality to automatically persist and rehydrate data. im now investigating password-encrypting the data with javascript using the browser cryptography api.
i have a PR here you can test out on codespaces or clone, but tldr: i encrypt before saving and decrypt when loading. this seems to be working as expected. i will also encrypt/decrypt the event listeners im using and this should keep it safe from anything like browser extensions from listening to events.
the password is something the user will have to put in themselves at part of some init() process. i havent created an input for this yet, so its hardcoded. this is then used to encrypt/decrypt the data.
i would persist the unencrypted salt to indexedDB because this is then used to generate the key.
i think i am almost done with this functionality, but id like advice on anything ive overlooked or things too keep-in-mind. id like to make the storage as secure as possible.
Async Javascript State Management
I'm working on creating something I can call "functional web components".
Async Javascript State Management
I'm working on creating something I can call "functional web components".
Async Javascript State Management
I'm working on creating something I can call "functional web components".
Creating QR Codes with Javascript to use as a Data Channel
Explore the new "File Sharing by QR Code" feature in our decentralized chat app. Learn how we use JavaScript-based QR technology for offline data exchange and the innovative potential of this experimental approach.
https://positive-intentions.com/blog/qr-codes-as-a%20data-channel
QR Codes as a Data Channel
the demo in the blog article is a bit cluncky. here is a better link for it: https://chat.positive-intentions.com/#/qr
Creating QR Codes with Javascript to use as a Data Channel
Explore the new "File Sharing by QR Code" feature in our decentralized chat app. Learn how we use JavaScript-based QR technology for offline data exchange and the innovative potential of this experimental approach.
https://positive-intentions.com/blog/qr-codes-as-a%20data-channel
QR Codes as a Data Channel
the demo in the blog article is a bit cluncky. here is a better link for it: https://chat.positive-intentions.com/#/qr
thanks!
when i started, the attempt was to try to create this functionality without using any dependencies (including Lit). the Lit html function is well done and makes things very convenient for handling things like the lifecycle methods and caching states.
i would like to revisit that attempt, but i found that Lit does it very well and for me to create something from scratch would take much more consideration and i expect i would overlook some nuanced detail. i'll see what i can make of it in future changes.
while im sure Lit users could benefit from this, as for contributing to the Lit ecosystem, im not really sure what steps to take for this. similarly, React 19 also introduces "support" for web components.
no. it isnt better or more stable than React. its all an experimental proof-of-concept.
its an idea im trying out. i thought maybe others might find it interesting.
im aiming to see if i can get something that looks and behaves like React, but works natively in a browser without the need to build or transpile. i think in theory it could work.
React-Like Functional Web Components
I'm working on creating something I can call "functional web components".
Functional Web Components
https://positive-intentions.com/blog/dim-todo-list
Github: https://github.com/positive-intentions/dim
Demo: https://dim.positive-intentions.com
React-Like Functional Web Components
I'm working on creating something I can call "functional web components".
Functional Web Components
https://positive-intentions.com/blog/dim-todo-list
Github: https://github.com/positive-intentions/dim
Demo: https://dim.positive-intentions.com
React-Like Functional Web Components
I'm working on creating something I can call "functional web components".
Functional Web Components
https://positive-intentions.com/blog/dim-todo-list
Github: https://github.com/positive-intentions/dim
Demo: https://dim.positive-intentions.com
Am i using Google Keyword planner correctly?
ive only just discovered google keyword planner (GKP), but i dont know about blogging in general. for my "intro blog", GKP suggest the words to use as seen in this GKP export.
im making an attempt to integrate some of those suggestions in my blog. this is what i have so far.
am i doing this right? as for picking the words, im not sure what column i should filter/sort by to choose the words that get me the most clicks to my blog?
the page in questions is this: https://positive-intentions.com/blog/introducing-decentralized-chat
thanks for the info. i'll take a look later, it sounds like an interesting idea.
How to create functional webcomponents
https://positive-intentions.com/blog/dim-functional-webcomponents/
im investigating an idea i have about functional webcomponents after some experience with Lit.
Lit is a nice lightweight UI framework, but i didnt like that it was using class-based components.
Vue has a nice approach but i like working with the syntax that React used and i wondered if with webcomponents i could create a functional UI framework that didnt need to be transpiled.
i think the article is already quite long, so i think i will create a separate one as a tutorial for it.
note: im not trying to push "yet another ui framework", this is an investigation to see what is possible. this article is intended as educational.
How to create functional webcomponents
https://positive-intentions.com/blog/dim-functional-webcomponents/
im investigating an idea i have about functional webcomponents after some experience with Lit.
Lit is a nice lightweight UI framework, but i didnt like that it was using class-based components.
Vue has a nice approach but i like working with the syntax that React used and i wondered if with webcomponents i could create a functional UI framework that didnt need to be transpiled.
i think the article is already quite long, so i think i will create a separate one as a tutorial for it.
note: im not trying to push "yet another ui framework", this is an investigation to see what is possible. this article is intended as educational.
How to create functional webcomponents
https://positive-intentions.com/blog/dim-functional-webcomponents/
im investigating an idea i have about functional webcomponents after some experience with Lit.
Lit is a nice lightweight UI framework, but i didnt like that it was using class-based components.
Vue has a nice approach but i like working with the syntax that React used and i wondered if with webcomponents i could create a functional UI framework that didnt need to be transpiled.
i think the article is already quite long, so i think i will create a separate one as a tutorial for it.
note: im not trying to push "yet another ui framework", this is an investigation to see what is possible. this article is intended as educational.
thanks for the tip!
can i just copy-paste that into the blog for free? if you want, and if you have github, i could list you as one of the authors.
ive tried hacker news (a prev post). its been mentioned before that its good for technical discussions. to me it seems pretty dry and unappealing to maintain a presence there (similar case for mastodon and discord). im faily new to lemmy and so far seems to yield the "most useful" feedback.
thanks for the tip. i think its to hard to find the balance. im banking on it improving with practice.
i'll try make an update for better intros to articles. i think i go in a bit too technical from the start.
im faily new to blogging. that was added for setting up google ads. can you tell me what you mean by your comment?
I created a blog for my app. Roast my blog.
https://positive-intentions.com/blog
https://www.reddit.com/r/positive\_intentions/
i normally use reddit for what people normally do with a blog. this is because i dont know enough to drive traffic to my site. i recently created a Docusaurus blog for my app and id like to see more traffic go there when i set up ads. the amount of traffic i have right now is barely anything (about 30 per day), compared to the number of "views on reddit".
i regurgitated old reddit posts into articles. im not much of a writer and im sure the content can be improved to "flow better".
i created some images on my phone... i justify it as "it matches the theme"... its actually the best i can do without using some AI or an actual artist.
id like to set up some kind of ads on it when its looks like its in a better state and i can attract traffic.
let me know what you think i could/should do to make it better.
I created a blog for my app. Roast my blog.
https://positive-intentions.com/blog
https://www.reddit.com/r/positive\_intentions/
i normally use reddit for what people normally do with a blog. this is because i dont know enough to drive traffic to my site. i recently created a Docusaurus blog for my app and id like to see more traffic go there when i set up ads. the amount of traffic i have right now is barely anything (about 30 per day), compared to the number of "views on reddit".
i regurgitated old reddit posts into articles. im not much of a writer and im sure the content can be improved to "flow better".
i created some images on my phone... i justify it as "it matches the theme"... its actually the best i can do without using some AI or an actual artist.
id like to set up some kind of ads on it when its looks like its in a better state and i can attract traffic.
let me know what you think i could/should do to make it better.
Shared VR space over P2P
https://github.com/positive-intentions/chat
the code related to the video is a faily basic implementation using BabylonJS. it can be found here.
id like to see if i can get handpose-estimation to work well enough to be able to add to the BabylonJS render engine.
im working on something i hope will work like the 8thwall demo here. i couldnt find an open-source alternative to this so i thought id have a crack at it myself. my progress so far is as described here. i dont have much experience in creating games or graphics, so any guidance/help/advice is appriciated.
FAQ:
- why should i use it? - its a proof-of-concept app. for testing and demo purposes only.
- why create it? - it is a hobby project and i can be creative with the approach. its fun to work on.
- what is it? - maybe this article helps.
Shared VR space over P2P
https://github.com/positive-intentions/chat
the code related to the video is a faily basic implementation using BabylonJS. it can be found here.
id like to see if i can get handpose-estimation to work well enough to be able to add to the BabylonJS render engine.
im working on something i hope will work like the 8thwall demo here. i couldnt find an open-source alternative to this so i thought id have a crack at it myself. my progress so far is as described here. i dont have much experience in creating games or graphics, so any guidance/help/advice is appriciated.
FAQ:
- why should i use it? - its a proof-of-concept app. for testing and demo purposes only.
- why create it? - it is a hobby project and i can be creative with the approach. its fun to work on.
- what is it? - maybe this article helps.
“connect to expressvpn and run the test”… is that actually what you were doing?
i tried with a different VPN provider but yeah. understandable for people to not go to an unknown websites like the demo i posted, so a link to the code on github is provided.
IMO you simply can’t do anything reasonably useful here
i agree... im stretching the definition of what is "reasonable". id settle some something clunky likes a popup for the user to remind them to be on VPN. its important to understand im putting efforts in determining what the safest and securest way is to use my app. i think it has the potential to be a private and secure chat app. the app works with webrtc, the key attack-surface is individuals and their peers not applying good security practices.
in traditional centralized chat system the central server will typically take responsibility for proxying request and consequently, the personal IP addresses are not needed to be shared. so having something like a toggle for "enforce VPN" might do nothing more than remind the user to turn on their VPN. but sometimes a reminder is what someone needs to use good security practices.
WebRTC IP Leaking
i want to understand more about WebRTC security when using vpn. id like to know if it is more secure with VPN than without... or even if its recommended to use WebRTC with VPN.
i created a webrtc demo: https://chat.positive-intentions.com/#/webrtc (the corresponding code its created with: https://github.com/positive-intentions/chat/blob/staging/src/components/pages/webrtc/WebRTC.jsx)
if i generate a "WebRTC offer" then i see a bunch of information including my IP address.
if i do the same with VPN, i see that my ip address isnt in that payload.
following the information here: https://thehackernews.com/2015/02/webrtc-leaks-vpn-ip-address.html?m=1
and using the demo here: https://ipleak.net/
it seems even with vpn, the local ISP ip seems detected.
a recurring concern ive had on reddit about the security of my app is that webrtc exposes ip addresses. im investigating using the app with vpn. it seems to work like normal.
in the example details given above, i see while the local ISP IP is exposed, the personal ip address is still hidden. im sure what is exposed there is not worthless, but it could help users with privacy and security.
on the back of this investigation id like to see if i can add something like a toggle in my app called "enforce VPN" which will first check to see if you are on a vpn, and if you are, open the rest of the app.
my app is using peerjs-server as the connection broker. this is a third party i have no contractual agreement to provide me with a service. it could help to hide your IP from this service.
P2P Messaging and State Management: Todo List Demo.
P2P framework. Contribute to positive-intentions/p2p development by creating an account on GitHub.
a decentralized P2P todo list app to to demo the P2P framework used in the chat app.
https://github.com/positive-intentions/chat
It is a wrapper around peerjs. peerjs is good, but it can become complicated to use on bigger projects. This implementation is an attempt to create something like a framework/guideline for decentralized messaging and state management.
https://positive-intentions.github.io/p2p/?path=/story/demo-todo-list--basic
how it works:
- crypto-random ids are generated and used to connect to peerjs-server (to broker a webrtc connection)
- peer1 shares this ID to another browser/tab/person (use the storybook props)
- peers are then automatically connected.
- add todo item
- edit todo item
There are several things here to improve like:
- general cleanup throughout (its early stage for this project and missing all the nice things like good-code and unit-tests)
- adding extra encryption keys for messages comming in and going out (webrtc mandates encryption already)
- handling message callbacks
- key rotation
thanks for the detailed information. this is the answer i was looking for.
Not cool. It's hard enough trying to promote projects like this.
Unless you want to he honeypotted stay away…
I can't be more transparent than open sourcing it with instructions on selfhosting.
I drew the logo on my phone. I'm not an artist.
this app is in javascript... completely different to java. you should ask in something like chatgpt, it'll do a better job at explaining the difference than me.
id like to make it clear that the app is using webrtc which requires IP addresses to be exchanged which could result in IP address being exposed when using the public peerjs-server (hosting your own is an option). this app is explicitly NOT for anonymous communication. it explicitly shares IP addresses and data sent/recieved from peers cannot be moderated. the app is using cryptographically random ID’s for profiles to make sure they are unguessable. the connection details have to explicitly be shared.
the app is pretty experimental in how it works so there isnt any useful documentation on it apart from what is mentioned in the post. if you have questions, feel free to ask and i can try to explain the best i can.
there may be details you are interested in, but the post is quite large. you can search in that that post about how i plan to deal with syncing between devices. the functionality is not working in the app at the moment.
the data is persisted to browser storage, and unsent messages will be queued up when peers are not connected. similarly, the functionlity is not working at the moment.
peer discovery can be a whole separate discussion. the app provides ways to exchange connection data with links and QR codes. it is important that the user shares this with peers they trust, the ID is otherwise cryptographically random. upon first connection asymetric encryption keys are created and used for every future connection (to prevent impersonation).
Why are only parts opensource?
the part that isnt open source is the aws-cdk repo im using for deploying to S3. the app is otherwise open source and i give the instructions to deploy on your own github-pages if you want.
can you explain more about that licence?
your concerns are well placed. i am not a security expert and the project is not a mature enough for it to have a security professional take a look, so it shouldnt be considered secure or encrypted until someone reputable can verify it.
i open sourced it so i could investigate getting security advice without a budget... but of course its pretty complex to do without a budget. so i'll settle with what feedback i can get.
its open souce but understandably complex to understand.
im using a thin wrapper around browser-based cryptography functions. im using webpack 5 module federation to import that file at runtime.
those functions are used to create a kind-of decentralised authentication as described here: https://positive-intentions.com/docs/research/authentication
the app uses peerjs to send encrypted messages. i have the checkbox only for the user to confirm this is for testing purposes only. it is also worded throughout the docs that users should be responsible for what data they share. the app doesnt need any personal detail to work (ip address - as per requirement of webrtc). im all ears for ideas on a previous post: https://www.reddit.com/r/darknetplan/comments/16qw24o/on_my_decentralized_chat_app_i_want_some_kind_of/
pardon my art skills. i drew it on my phone. i was going for a "whale". a simple logo was enough. i dont expect version 2 to be any better. as for the domain, it was cheap. i would like to do rebranding at some point but i dont know enough to make any time for it.