WebAssembly【四】加密解密应用场景

在以前一提到前端的加密、解密，可能感觉很鸡肋，因为web前端的代码完全暴露在用户侧，很容易破译或者阅读加、解迷的规则。
所以一直以来一提到安全方面，大家不约而同的都想那是服务端的事情，不过现在 WebAssembly 可以让前端多少承担点安全方面的重任了。 不过因为请求的 wasm 文件，所有人都可以下载，也是有破译的风险，只不过难度增加了

先说下 wasm 是什么样的文件，通过编译后生成的二进制的文件，可以把算法规则打包进去

举个例子

assembly具体实现
加密

const secret:i32[] = [3,3,4,4,5,2,1,8,4,4,9]

export function crypto2(d:i32):i32 {
  for(let i=0; i<d; i++) {
    store<u16>(i, load<u8>(i)-secret[i%secret.length]);
  }
  return secret[0]
}

解密

export function crypto2(d:i32):i32 {
  for(let i=0; i<d; i++) {
    store<u16>(i, load<u8>(i)+secret[i%secret.length]);
  }
  return secret[0]
}

前端部分代码

字符串转换 buf

export function str2ab(input: string): ArrayBuffer {
  const view = str2Uint8Array(input)
  return view.buffer
}

arraybuffer 转换 字符串

export function ab2str(
  input: ArrayBuffer | Uint8Array | Int8Array | Uint16Array | Int16Array | Uint32Array | Int32Array,
  outputEncoding: string = 'utf8',
): string {
  const decoder = new TextDecoder(outputEncoding)
  return decoder.decode(input)
}

最后来个截图

https://github.com/ibeeger/research.git