如何保护/加密 Blazor WebAssembly 中会话/本地存储中存储的数据

Question

我正在创建 Blazor WebAssembly 应用程序，并试图弄清楚如何加密/保护存储在会话存储/本地存储中的数据？

Answer 1

您需要了解的第一件事是blazor wasm 模型直到 .net 5 都不支持加密库。（据我所知）

在 .net 6 中，您可以使用Blazor.SubtleCrypto

但您可以使用 javascript 互操作将 AES 方法注入其中，请按照以下步骤操作：

1. 下载AES.js
2. 将 aes.js 添加到 wwwroot 文件夹
3. 在index.html根目录的脚本标记中添加以下两个方法来加密/解密字符串

    function encryptedText(inputSrt, keyArray) {
    var textBytes = aesjs.utils.utf8.toBytes(inputSrt);
    var aesCtr = new aesjs.ModeOfOperation.ctr(keyArray, new aesjs.Counter(5));
    var encryptedBytes = aesCtr.encrypt(textBytes);
    return aesjs.utils.hex.fromBytes(encryptedBytes);
}

    function decryptText(inputStr, keyArray) {
        var encryptedBytes = aesjs.utils.hex.toBytes(inputStr);
        var aesCtr = new aesjs.ModeOfOperation.ctr(keyArray, new aesjs.Counter(5));
        var decryptedBytes = aesCtr.decrypt(encryptedBytes);
        return aesjs.utils.utf8.fromBytes(decryptedBytes);
    }

现在你准备好了。将 DI 接口添加到 .NetCore 请按照以下步骤操作：

1. 创建类和接口

public interface IEncryptProvider
    {
        string TextEncrypt(string input);
        string TextDecrypt(string input);

        string Encrypt<T>(T input);
        T Decrypt<T>(string input);
    }
public class AesJsProvider : IEncryptProvider
    {
        IJSRuntime GetJSRuntime;
        public static int[] HiddenKey = new int[] { 0, 45, 6, 3, 8, 5, 8, 7, 89, 7, 10, 21, 12, 34, 12, 1 };
        public static string JsEncryptMethod { get; set; } = "encryptText";
        public static string JsDecryptMethod { get; set; } = "decryptText";

        public AesJsProvider(IJSRuntime jSRuntime)
        {
            GetJSRuntime = jSRuntime;
        }

        public async Task<string> TextDecrypt(string input)
        {
            if (string.IsNullOrEmpty(input))
                return string.Empty;
            try
            {
                return await GetJSRuntime.InvokeAsync<string>(JsEncryptMethod, input, HiddenKey);
            }
            catch (Exception)
            {
                return string.Empty;
            }
        }

        public async Task<string> TextEncrypt(string input)
        {
            if (string.IsNullOrEmpty(input))
                return string.Empty;
            try
            {
                return await GetJSRuntime.InvokeAsync<string>(JsDecryptMethod, input, HiddenKey);
            }
            catch (Exception)
            {
                return string.Empty;
            }
        }

        public async Task<string> Encrypt<T>(T input)
        {
            var str = JsonSerializer.Serialize(input);
            if (input == null)
                return string.Empty;
            try
            {
                return await GetJSRuntime.InvokeAsync<string>(JsEncryptMethod, input, HiddenKey);
            }
            catch (Exception)
            {
                return string.Empty;
            }
        }

        public async Task<T> Decrypt<T>(string input)
        {
            var str = await TextDecrypt(input);
            if (string.IsNullOrEmpty(input))
                return default(T);
            try
            {
                return await GetJSRuntime.InvokeAsync<T>(JsDecryptMethod, input, HiddenKey);
            }
            catch (Exception)
            {
                return default;

            }
        }
    }

所有代码都已完成，让我们配置启动选项

services.AddSingleton<IEncryptProvider, JSRuntimeProvider>();

您可以根据需要更改HiddenKey到提供程序中的密钥，并在任何页面上注入IEncryptProvider来加密/解密字符串或对象

github 中提供源代码： https ://github.com/mahdiit/blazor-wasm-encryptstorage