Hi guys! I’ve implemented an application with vetKeys usage.
Here is GitHub repository:
MykhailoIvchenko/password-manager-dapp
The application uses React + Vite for the frontend part. I copied the files from the vetkd_user_lib folder from this example dfinity/examples/tree/master/motoko/encrypted-notes-dapp-vetkd/
I also copied code for encryption and decryption from this example and refactored it a little bit.
The problem is that I get an error during the vetKeys library initialization (that uses wasm), and as a result, the encryption and decryption functions don’t work when we use them.
Here are the error messages in the console:
Wasm Error WebAssembly.instantiate(): Refused to compile or instantiate WebAssembly module because ‘unsafe-eval’ is not an allowed source of script in the following Content Security Policy directive: “script-src ‘self’”
EvalError: Refused to evaluate a string as JavaScript because ‘unsafe-eval’ is not an allowed source of script in the following Content Security Policy directive: “script-src ‘self’”.
at new Function (<anonymous>)
at Object.parseJSON (sm.bundle.js:1:667)
at Object.recorder-screenshot-v3_1743092646161_0.4580180800637803
I’ve tried different values in the meta tag, but nothing helped. The current value is below:
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self';
script-src 'self' 'unsafe-eval' blob:;
worker-src 'self' blob:;
style-src 'self' 'unsafe-inline';
img-src 'self' data: blob:;
font-src 'self';
connect-src 'self' https://icp-api.io https://*.ic0.app;"
/>
And here is the code for the vetkeys library initialization in the App.tsx
import { useEffect } from 'react';
import CheckAccess from './components/CheckAccess';
import DefaultPageLayout from './components/ui/DefaultPageLayout';
// @ts-ignore
import { default as vetkd_init } from './vetkd_user_lib/ic_vetkd_utils.js';
// @ts-ignore
import vetkd_wasm_url from './vetkd_user_lib/ic_vetkd_utils_bg.wasm?url';
function App() {
useEffect(() => {
if (!WebAssembly) {
console.error('WebAssembly is not supported in this browser.');
}
fetch(vetkd_wasm_url)
.then((res) => res.arrayBuffer())
.then((buffer) => WebAssembly.instantiate(buffer, {}))
.then((wasmModule) => {
vetkd_init(wasmModule.instance);
})
.catch((error) => console.error('Wasm Error', error.message));
}, []);
return (
<DefaultPageLayout>
<CheckAccess />
</DefaultPageLayout>
);
}
export default App;
Maybe someone faced the same problem, so please advise how to solve it. GhatGPT and Stack Overflow weren’t very helpful.