wasm实例开发003-简单数据的加密解密-逐梦个人博客

本文我们将介绍如何使用wasm应用对数据进行简单的加密并实现解密算法。

一、加密规则定义

1、将小写字母转变为大写字母，并向后推n位，如果超出大写字母的ASCII范围，则回退至第一个大写字母开始计算；

2、将大写字母转变为小写字母，并向后推n位，如果超出小写字母的ASCII范围，则回退至第一个小写字母开始算起；

3、移动位数n必须小于等于26。

4、非字母字符不变；

二、C加密函数编写

char *encode(char *str, int n) {
    if (n > 26) {
        printf("移动位数必须小于等于26, 当前%d\n", n);
        return NULL;
    }
    char *ret = (char *)malloc(sizeof(str));
    for (int i=0; i<strlen(str); i++) {
        char c = str[i];
        if (c >= 'a' && c <= 'z') {
            ret[i] = (char)(c - 32 + n);
            if (ret[i] > 'Z') {
                ret[i] = (char)(ret[i] - 26);
            }
        } else if (c >= 'A' && c <= 'Z') {
            ret[i] = (char)(c + 32 + n);
            if (ret[i] > 'z') {
                ret[i] = (char)(ret[i] - 26);
            }
        } else {
            ret[i] = c;
        }
    }
    return ret;
}

三、C解密函数编写

对于加密字符串的解密，只需要反向执行加密的步骤即可，实现代码如下：

char *decode(char *str, int n) {
    if (n > 26) {
        printf("移动位数必须小于等于26, 当前%d\n", n);
        return NULL;
    }
    char *ret = (char *)malloc(sizeof(str));
    for (int i=0; i<strlen(str); i++) {
        char c = str[i];
        if (c >= 'a' && c <= 'z') {
            ret[i] = (char)(c - n - 32);
            if (ret[i] < 'A') {
                ret[i] = (char)(ret[i] + 26);
            }
        } else if (c >= 'A' && c <= 'Z') {
            ret[i] = (char)(c - n + 32);
            if (ret[i] < 'a') {
                ret[i] = (char)(ret[i] + 26);
            }
        } else {
            ret[i] = c;
        }
    }
    return ret;
}

四、wasm应用编译

使用emcc我们可以通过下面的命令将C程序编译为wasm应用：

emcc -o enc.js ./enc.c -Oz -s EXPORTED_FUNCTIONS='["_encode", "_decode"]' -s EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]'

五、使用js调用wasm应用

我们新建一个html文件用于编写调用wasm应用的代码，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>wasm简单数据加密与解密</title>
</head>
<body>
    <p>字符串：<input type="text" id="txt"></p>
    <p>位移位数：<input type="number" value="2" id="step"></p>
    <p><button id="enc">加密</button>&nbsp;<button id="dec">解密</button></p>
    <p>结果：<span id="result"></span></p>
    <script src="enc.js"></script>
    <script>
        enc.onclick = () => {
            const ret = Module.ccall(
                'encode',
                'string',
                ['string', 'number'], 
                [txt.value, +step.value]
            );
            result.innerText = ret;
        }
        dec.onclick = () => {
            const ret = Module.ccall(
                'decode',
                'string',
                ['string', 'number'], 
                [txt.value, +step.value]
            );
            result.innerText = ret;
        }
</script>
</body>
</html>

六、结语

通过wasm来做加密和解密，我们可以将加密解密的算法保护起来，不会直接暴露到前端应用中，毕竟任何暴露到前端的内容都不是100%安全的，总有办法可以逆向，只是时间问题而已。

系列文章导航：

第1节： Wasm实例开发001-斐波那契数列

第2节： Wasm实例开发002-最长回文字符串

第4节： wasm实例开发004-矩阵乘法

第5节： wasm实例开发005-图像高斯模糊

第6节： wasm实例开发006-证件照换底色

第7节： wasm实例开发007-图片菱形渐变