Wasm problem for vetkeys usage

Developers JavaScript
1

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.