[졸과] WASM 실행 테스트

간단하게 숫자 2개를 더하는 wasm을 Chrome Wallet에서 실행해보았다.

 

 

배경

Chrome Extensions 에서 유저의 VC, VP로 zk-proof를 생성하기 위해서는 rust로 구운 wasm을 실행해야 한다. proof을 생성하는 Rust 함수는 코어 직무의 팀원이 개발하는 중이고, 나는 우선 간단한 wasm을 구워서 Chrome Extensions에서 실행시켜보기로 했다.

 

 

초간단한 rust 함수

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn add(x: i32, y: i32) -> i32 {
    x + y
}

 

 

WASM 컴파일

사실 컴파일하는 것은 간단하다. wasm-pack 이라는 툴을 설치해서 해당하는 명령어를 실행하면 된다. 우리는 웹 환경에서 동작해야 하기 때문에 --target 옵션을 web으로 주면 된다.

 

$ wasm-pack build --target web

 

빌드 성공 시, pkg 폴더 내에 wasm 파일과 web 환경에 맞게 JavaScript에 바인딩된 js 및 타입이 선언된 ts 파일이 생성된다.

 

• wasm-test.d.ts

/* tslint:disable */
/* eslint-disable */
/**
* @param {number} x
* @param {number} y
* @returns {number}
*/
export function add(x: number, y: number): number;

export type InitInput = RequestInfo | URL | Response | BufferSource | WebAssembly.Module;

export interface InitOutput {
  readonly memory: WebAssembly.Memory;
  readonly add: (a: number, b: number) => number;
}

export type SyncInitInput = BufferSource | WebAssembly.Module;
/**
* Instantiates the given `module`, which can either be bytes or
* a precompiled `WebAssembly.Module`.
*
* @param {SyncInitInput} module
*
* @returns {InitOutput}
*/
export function initSync(module: SyncInitInput): InitOutput;

/**
* If `module_or_path` is {RequestInfo} or {URL}, makes a request and
* for everything else, calls `WebAssembly.instantiate` directly.
*
* @param {InitInput | Promise<InitInput>} module_or_path
*
* @returns {Promise<InitOutput>}
*/
export default function __wbg_init (module_or_path?: InitInput | Promise<InitInput>): Promise<InitOutput>;

 

 

CSP 보안 정책

Content-Security-Policy 에 대한 에러가 생겼다. CSP는 웹 보안을 강화하기 위해 웹 페이지가 실행할 수 있는 코드의 출처를 제한하는 정책이다. 당연하다면 당연하게도, XSS나 Qeury Injection같은 공격에 매우 취약할 것 같긴 하다. 다행히 웹에서도 wasm을 사용하게 설정할 수 있다. 그리고 크롬 익스텐션에서도 가능헸다!

 

https://groups.google.com/a/chromium.org/g/chromium-extensions/c/sJiaTnFMLHQ

 

우선, Chrome Extensions의 manifest.json에 다음을 추가한다.

content_security_policy: {
    extension_pages: "script-src 'self' 'wasm-unsafe-eval'; object-src 'self';",
}

 

wasm 파일은 정적으로 제공되어야 한다. public 폴더에 있어야 한다는 소리다. 

 

WASM 호출 및 실행

const result = await __wbg_init('/wasm_test_bg.wasm');
const res = result.add(message.input.num1, message.input.num2);

 

wasm 실행은 간단하다. wasm-pack에서 알아서 바인딩해준 타입 덕분에 간편하게 구현할 수 있다. 

 

 

실행 결과

 

간단하게 숫자 2개를 더하는 wasm을 Chrome Wallet에서 실행해보았다.