Comments (2)
I resolved this using custom service worker with WASM.
First, you need webpack or other bundler to bundle everything into single js file in service worker. Then install argon2-browser and use this code:
import argon2 from 'argon2-browser'
const crypto_pwhash_SALTBYTES = 16
const crypto_pwhash_MEMLIMIT_MODERATE = 268435456
const crypto_pwhash_OPSLIMIT_MODERATE = 3
const crypto_aead_xchacha20poly1305_ietf_KEYBYTES = 32
const channel = new BroadcastChannel('sw-messages')
self.addEventListener('message', async event => {
if(typeof event.data === 'object') {
if (event.data.type === 'hash' && 'plain' in event.data) {
const OLD_ENC_SALT = new Uint8Array(crypto_pwhash_SALTBYTES)
const result = await argon2.hash({
pass: event.data.plain,
salt: OLD_ENC_SALT,
time: crypto_pwhash_OPSLIMIT_MODERATE,
mem: crypto_pwhash_MEMLIMIT_MODERATE / 1024,
hashLen: crypto_aead_xchacha20poly1305_ietf_KEYBYTES,
parallelism: 1,
type: argon2.ArgonType.Argon2id
})
channel.postMessage({ type: 'hash_result', result, plain: event.data.plain })
}
}
})
Then build it into single file, import with service worker and you can use it like this on your website:
const hashChannel = new BroadcastChannel('sw-messages')
const plain = 'what you want to hash goes here'
const sw = navigator.serviceWorker.controller
if (!sw) return console.error('Service Worker not ready')
sw.postMessage({ type: 'hash', plain })
const subscription = (event: MessageEvent<{ type: 'hash_result', result: import('argon2-browser').Argon2BrowserHashResult, plain: string }>) => {
if (
typeof event.data === 'object'
&& event.data.type === 'hash_result'
&& 'result' in event.data
&& event.data.plain === plain
) {
hashChannel.removeEventListener('message', subscription)
resolve(event.data.result.hash)
}
}
hashChannel.addEventListener('message', subscription)
from argon2-browser.
Oh and this is the config I used for webpack to correctly bundle wasm:
/* eslint-disable @typescript-eslint/no-var-requires */
const path = require('path')
const { IgnorePlugin } = require('webpack')
/** @type {import('webpack').Configuration} */
const config = {
mode: 'production',
entry: __dirname + '/index.ts',
output: {
path: path.resolve(__dirname, '../public'),
filename: 'custom-worker.js'
},
module: {
rules: [
{
test: /\.wasm$/,
type: 'javascript/auto',
use: [{
loader: 'base64-loader'
}]
}
],
noParse: /\.wasm$/
},
plugins: [
new IgnorePlugin({ resourceRegExp: /\/__tests__\// })
],
resolve: {
fallback: {
path: require.resolve('path-browserify'),
fs: false
}
}
}
module.exports = config
from argon2-browser.
Related Issues (20)
- Pass a salt key? HOT 1
- Example with Snowpack
- cmake build warning on linux HOT 2
- Import is an empty module in Vite HOT 5
- TypeError: arr is not iterable HOT 2
- Module not found: Error: Can't resolve 'fs' in xxx HOT 4
- Fails with Node.js v18.1.0 HOT 3
- How to properly implement WASM in angular HOT 1
- Failed to fetch argon2.wasm
- How to use this?
- Mr browser says this project is blocked by CORS policy HOT 1
- Invalid type name in demo: Argon2di should be Argon2id
- Unable to reproduce argon2.wasm file found on website HOT 5
- Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.
- Use with Vite HOT 2
- Build in a nutshell
- Is there a pure JavaScript implementation of Argon2
- `argon2.verify()` documentation in `README.md` is wrong HOT 1
- Memory cost is too small HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from argon2-browser.