全国旗舰校区

不同学习城市 同样授课品质

北京

深圳

上海

广州

郑州

大连

武汉

成都

西安

杭州

青岛

重庆

长沙

哈尔滨

南京

太原

沈阳

合肥

贵阳

济南

下一个校区
就在你家门口
+
当前位置:首页  >  技术干货

了解window.crypto

发布时间:2023-11-24 09:03:18
发布人:xqq

作为一个全能编程开发工程师,我们需要掌握各种加密算法和随机数生成方法。而window.crypto作为前端浏览器的内置加密库,为我们提供了一系列的加密和随机数生成功能。在本文中,我们将从多个方面对window.crypto进行详细的阐述。

一、window.crypto.subtle

Window.crypto.subtle 是一个只读的窗口属性,它可以进行高级加密标准(AES)、密码决定函数(PBKDF2、HKDF)、消息认证代码(HMAC)、RSA 签名、ECDSA 签名和验证等一系列加密操作。与传统的Crypto对象相比,Window.crypto.subtle返回的是Promise对象,而非直接返回加密结果,更符合现代异步编程思想。

下面,我们来看一个生成对称密钥的例子:


window.crypto.subtle.generateKey(
   {
       name: "AES-CBC",
       length: 256, // 可选的长度
   },
   true, // 是否可导出
   ["encrypt", "decrypt"] // 期望的用途
)
.then(function(key){
   console.log(key);
})
.catch(function(err){
   console.error(err);
});

在这个例子中,我们使用了generateKey方法通过AES-CBC算法生成一组对称密钥。其中,length是可选参数,如果不传则会生成默认长度的密钥。接下来,我们可以在key对象中看到密钥的详细信息:


CryptoKey {
    algorithm: {name: "AES-CBC", length: 256},
    type: "secret",
    extractable: true,
    usages: ["encrypt", "decrypt"],
}

通过这个例子,我们不仅学会了使用generateKey方法生成对称密钥,还学会了如何使用Promise对象处理异步操作,更加熟悉了Web API的设计。

二、window.crypto.subtle 用途

除了生成密钥外,window.crypto.subtle还支持一些常用的加密操作,如加密、解密、签名和验证等。

下面,我们以AES算法为例,演示如何使用window.crypto.subtle进行加密和解密操作:


async function encryptText(text, key) {
  const encoder = new TextEncoder();
  const data = encoder.encode(text);
  const iv = window.crypto.getRandomValues(new Uint8Array(16));
  const algorithm = { name: 'AES-CBC', iv };
  const encryptedData = await window.crypto.subtle.encrypt(algorithm, key, data);
  const array = Array.from(new Uint8Array(iv.buffer), byte => byte.toString(16));

  return {
    iv: array.join(''),
    data: btoa(String.fromCharCode(...new Uint8Array(encryptedData))),
  };
}

async function decryptText(text, iv, key) {
  const decoder = new TextDecoder();
  const encryptedData = Uint8Array.from(atob(text), c => c.charCodeAt(0));
  const algorithm = { name: 'AES-CBC', iv: Uint8Array.from(iv, c => parseInt(c, 16)) };
  const decryptedData = await window.crypto.subtle.decrypt(algorithm, key, encryptedData);

  return decoder.decode(decryptedData);
}

(async function() {
  const key = await window.crypto.subtle.generateKey(
    { name: 'AES-CBC', length: 256 },
    true,
    ['encrypt', 'decrypt'],
  );

  const encrypted = await encryptText('Hello, world!', key);
  console.log(encrypted);

  const decrypted = await decryptText(encrypted.data, encrypted.iv, key);
  console.log(decrypted);
})();

在这个例子中,我们使用了TextEncoder 和 TextDecoder 对象将文本转换成二进制数据,使用Uint8Array和btoa方法将二进制数据转换成base64编码的字符串,并使用parseInt方法将十六进制的字符串转换成数值。这个例子还为我们展示了如何使用异步函数async/await,更加简洁和清晰地书写代码。

三、window.crypto.random

window.crypto.random对象提供了非加密的伪随机数生成方法。window.crypto 生成的伪随机数的安全强度是足够的,用于生成密码的盐值、创建随机数、防止CSRF攻击等等。

我们可以通过以下代码快速生成一个指定范围的随机整数:


function randomInt(min, max) {
  const difference = max - min;
  const array = new Uint32Array(1);
  window.crypto.getRandomValues(array);

  return Math.floor(array[0] / 4294967296 * difference) + min;
}

console.log(randomInt(0, 100));

在这个例子中,我们使用Uint32Array对象生成一个无符号32位整型数组,并通过Math.floor方法计算出随机整数。

四、window.crypto.getRandomValues

window.crypto.getRandomValues方法提供了生成加密强度随机数的方式。这些随机数由操作系统提供的由硬件生成器生成,强度足够高,并不会受到外界的影响。

我们来看一个随机生成16位长度的十六进制字符串的例子:


function randomHex(len) {
  const array = new Uint8Array(len / 2);
  window.crypto.getRandomValues(array);

  return Array.from(array, (byte) => {
    return ('0' + byte.toString(16)).slice(-2);
  }).join('');
}

console.log(randomHex(16));

在这个例子中,我们使用Uint8Array对象生成一个无符号8位整型数组,并使用Array.from和slice方法将随机数转换成十六进制数。

总结

在本文中,我们通过四个小节全方位地介绍了window.crypto库,包括Window.crypto.subtle、Window.crypto.subtle用途、Window.crypto.random和Window.crypto.getRandomValues等部分的使用方法。在日常的编程开发中,我们可以利用这些方法,使我们的数据更加安全,应对更多类型的加密需求。了解window.crypto,是成为一名全能编程开发工程师的必经之路。

viewer.entities.add

相关文章

linuxtelnet启动,linux开启telnet命令

linuxtelnet启动,linux开启telnet命令

2023-11-24
uni.showModal详解

uni.showModal详解

2023-11-24
C# Linq Join 详解

C# Linq Join 详解

2023-11-24
如何最快地将Json转为Map

如何最快地将Json转为Map

2023-11-24

最新文章

武汉新媒体行业公司排名

武汉新媒体行业公司排名

2023-11-01
武汉新媒体就业现状好吗

武汉新媒体就业现状好吗

2023-11-01
武汉全媒体行业发展现状及趋势

武汉全媒体行业发展现状及趋势

2023-10-31
武汉全媒体现状

武汉全媒体现状

2023-10-31
在线咨询 免费试学 教程领取