javascript基础学习系列三百三十九:使用SubtleCrypto对象

Web Cryptography API 重头特性都暴露在了 SubtleCrypto 对象上,可以通过 window.crypto. subtle 访问:

console.log(crypto.subtle); // SubtleCrypto {}

这个对象包含一组方法,用于执行常见的密码学功能,如加密、散列、签名和生成密钥。因为所有 密码学操作都在原始二进制数据上执行,所以 SubtleCrypto 的每个方法都要用到 ArrayBuffer 和 ArrayBufferView 类型。由于字符串是密码学操作的重要应用场景,因此 TextEncoder 和 TextDecoder 是经常与 SubtleCrypto 一起使用的类,用于实现二进制数据与字符串之间的相互转换。

生成密码学摘要

计算数据的密码学摘要是非常常用的密码学操作。这个规范支持 4 种摘要算法:SHA-1 和 3 种 SHA-2。
 SHA-1(Secure Hash Algorithm 1):架构类似 MD5 的散列函数。接收任意大小的输入,生成 160 位消息散列。由于容易受到碰撞攻击,这个算法已经不再安全。
 SHA-2(Secure Hash Algorithm 2):构建于相同耐碰撞单向压缩函数之上的一套散列函数。规 范支持其中 3 种:SHA-256、SHA-384 和 SHA-512。生成的消息摘要可以是 256 位(SHA-256)、 384 位(SHA-384)或 512 位(SHA-512)。这个算法被认为是安全的,广泛应用于很多领域和协 议,包括 TLS、PGP 和加密货币(如比特币)。
SubtleCrypto.digest()方法用于生成消息摘要。要使用的散列算法通过字符串"SHA-1"、 “SHA-256”、"SHA-384"或"SHA-512"指定。下面的代码展示了一个使用 SHA-256 为字符串"foo"生

注意 SubtleCrypto 对象只能在安全上下文(https)中使用。在不安全的上下文中, subtle 属性是 undefined。
成消息摘要的例子:

(async function() {
const textEncoder = new TextEncoder();
const message = textEncoder.encode('foo');
const messageDigest = await crypto.subtle.digest('SHA-256', message);
console.log(new Uint32Array(messageDigest)); })();
// Uint32Array(8) [1806968364, 2412183400, 1011194873, 876687389, // 1882014227, 2696905572, 2287897337, 2934400610]

通常,在使用时,二进制的消息摘要会转换为十六进制字符串格式。通过将二进制数据按 8 位进行 分割,然后再调用 toString(16)就可以把任何数组缓冲区转换为十六进制字符串:

(async function() {
const textEncoder = new TextEncoder();
const message = textEncoder.encode('foo');
const messageDigest = await crypto.subtle.digest('SHA-256', message);
  const hexDigest = Array.from(new Uint8Array(messageDigest))
    .map((x) => x.toString(16).padStart(2, '0'))
    .join('');
  console.log(hexDigest);
})();
// 2c26b46b68ffc68ff99b453c1d30413413422d706483bfa0f98a5e886266e7ae

Web Cryptography API

软件公司通常会公开自己软件二进制安装包的摘要,以便用户验证自己下载到的确实是该公司发布 的版本(而不是被恶意软件篡改过的版本)。下面的例子演示了下载 Firefox v67.0,通过 SHA-512 计算 22 其散列,再下载其 SHA-512 二进制验证摘要,最后检查两个十六进制字符串匹配:


(async function() {
const mozillaCdnUrl = '// download-
origin.cdn.mozilla.net/pub/firefox/releases/67.0 /';
const firefoxBinaryFilename = 'linux-x86_64/en-US/firefox-67.0.tar.bz2'; const firefoxShaFilename = 'SHA512SUMS';
console.log('Calculating Firefox digest...'); 25 const firefoxBinaryDigest = await crypto.subtle.digest('SHA-512', fileArrayBuffer); const firefoxHexDigest = Array.from(new Uint8Array(firefoxBinaryDigest))
console.log('Fetching Firefox binary...');
const fileArrayBuffer = await (await fetch(mozillaCdnUrl + firefoxBinaryFilename))
 .arrayBuffer();
.map((x) => x.toString(16).padStart(2, '0'))
.join('');
console.log('Fetching published binary digests...');
// SHA 文件包含此次发布的所有 Firefox 二进制文件的摘要,
// 因此要根据其格式进制拆分
const shaPairs = (await (await fetch(mozillaCdnUrl + firefoxShaFilename)).text())
  .split(/\n/).map((x) => x.split(/\s+/));
let verified = false;
console.log('Checking calculated digest against published digests...'); for (const [sha, filename] of shaPairs) {
        if (filename === firefoxBinaryFilename) {
          if (sha === firefoxHexDigest) {
            verified = true;
break; }
} }
      console.log('Verified:', verified);
    })();
    // Fetching Firefox binary...
    // Calculating Firefox digest...
    // Fetching published binary digests...
    // Checking calculated digest against published digests...
    // Verified: true
  • 5
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: HTML DOM(文档对象模型)是一种编程接口,允许程序访问和操作HTML文档中的元素。使用JavaScript来操作HTML DOM可以让网页具有交互性和动态性。 在JavaScript中,可以使用getElementById,getElementsByTagName和getElementsByClassName等方法来获取页面上的元素。例如,通过getElementById("myId")可以获取id为"myId"的元素。 操作元素的属性和内容也很简单,可以使用如下方法: - 修改元素的属性:element.attribute = new value - 访问元素的属性:element.attribute - 修改元素的内容:element.innerHTML = new content - 访问元素的内容:element.innerHTML 通过操作HTML DOM,可以实现各种交互效果和动态效果。例如,可以在点击按钮时显示或隐藏元素,或在输入框中输入文本时实时更新页面内容等。 ### 回答2: HTML DOM是JavaScript操作网页中元素和属性的主要方式之一。在HTML DOM中,文档元素是指HTML页面中所有元素的根节点。文档元素的操作包括获取元素、创建元素、删除元素、修改元素属性等。 获取元素是HTML DOM操作的重要一环。在JavaScript中,可以使用getElementById()、getElementsByTagName()、getElementsByClassName()等方法获得HTML页面中的元素。其中getElementById()方法可以通过元素的ID获取该元素的引用,常用于根据ID修改元素的属性或内容。而getElementsByTagName()方法可以通过标签名获取HTML页面中所有该标签的元素,例如获取所有的h1元素,常用于对整个页面的控制。getElementsByClassName()方法可以通过class属性获取HTML页面中所有具有该class的元素。 创建元素是向HTML页面中添加元素的重要方式。可以使用createElement()方法创建一个新元素,然后使用appendChild()方法将其添加到现有元素中。例如,创建一个新的p元素,并将其添加到body元素中可以使用以下代码: var newPara = document.createElement("p"); var textNode = document.createTextNode("This is a new paragraph."); newPara.appendChild(textNode); document.body.appendChild(newPara); 删除元素也是HTML DOM中的一个常用操作。可以使用removeChild()方法删除现有元素,例如: var parent = document.getElementById("parent-id"); var child = document.getElementById("child-id"); parent.removeChild(child); 修改元素属性是HTML DOM中的另一个核心操作。可以使用setAttribute()方法修改元素的属性值,例如: var element = document.getElementById("my-id"); element.setAttribute("class", "new-class"); 可以通过HTML DOM操作文档元素,实现对页面元素和属性的各种操作。掌握HTML DOM的知识,可以更好地控制和管理HTML页面。 ### 回答3: HTML DOM是JavaScript操作网页元素的主要方式之一,它的核心在于文档对象模型(DOM,Document Object Model),需要熟悉DOM才能灵活操作网页元素。文档元素是HTML页面中的根元素,它是其他所有元素的祖先元素,也是HTML DOM操作的基础。 一、获取元素 在JavaScript中,我们可以通过各种方式来获取文档元素,例如getElementById()、getElementsByTagName()、getElementsByClassName()等。其中,通过id、标签名和类名获取元素是最常用的三种方法。 1. getElementById() 此方法用于获取具有指定id属性的元素,其语法为document.getElementById(id)。id属性在整个HTML文档中应该是唯一的。 示例:获取id为“demo”的元素 ``` var demo = document.getElementById("demo”); ``` 2. getElementsByTagName() 此方法用于获取具有指定标签名的元素,其语法为document.getElementsByTagName(tagname)。 示例:获取所有p元素 ``` var pList = document.getElementsByTagName("p"); ``` 3. getElementsByClassName() 此方法用于获取具有指定类名的元素,其语法为document.getElementsByClassName(classname)。 示例:获取类名为“red”的元素 ``` var redList = document.getElementsByClassName("red"); ``` 二、改变元素 有很多种方法可以改变文档元素的属性和样式,下面列举一些常见的方法: 1. 修改元素的文本内容 我们可以通过innerHTML属性和innerText属性来修改元素的文本内容。 innerHTML属性用于改变元素的HTML内容,其语法为element.innerHTML=new html content; innerText属性用于改变元素的纯文本内容,其语法为element.innerText=new text content; 2. 修改元素的样式 我们可以通过style属性来修改元素的样式,其中style属性包含了元素的所有样式属性。 示例:将id为“demo”的元素背景色改为红色 ``` document.getElementById("demo").style.backgroundColor = "red"; ``` 3. 创建新元素 我们可以使用document.createElement()方法来创建新元素,并通过appendChild()方法将其加入到指定的元素内。 示例:创建一个新的p元素 ``` var newP = document.createElement("p"); ``` 4. 删除元素 我们可以使用parentNode.removeChild()方法来删除指定的元素。 示例:删除id为“demo”的元素 ``` var demo = document.getElementById("demo"); demo.parentNode.removeChild(demo); ``` 三、总结 通过这篇文章的学习,我们了解了HTML DOM的基础知识和基本操作方法,例如获取元素、改变元素的属性和样式以及创建和删除元素等。掌握这些操作方法可以帮助我们更好地操作网页元素,从而实现丰富多彩的网页效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值