JS `Module Declarations` (提案) `Content-Addressing` 与 `Subresource Integrity`

各位靓仔靓女，大家好！我是你们的老朋友，今天咱们来聊聊JavaScript模块声明（Module Declarations）提案、内容寻址（Content Addressing）以及子资源完整性（Subresource Integrity），简称SRI。这三个家伙，听起来高大上，实际上都是为了让我们的JavaScript代码更安全、更可靠，就像给代码穿上防弹衣，还能追踪代码的“指纹”。

一、模块声明（Module Declarations）：给模块一个身份证

首先，咱们来说说模块声明。在ES模块成为主流之前，JavaScript模块化方案百花齐放，CommonJS、AMD、UMD，各种规范搞得人头大。ES模块一统江湖后，我们终于有了一个官方的模块标准。但是，浏览器怎么知道一个文件是模块呢？这就是模块声明要解决的问题。

过去，我们通常使用<script type="module">告诉浏览器这是一个ES模块。但是，这个方法有个问题：浏览器会把所有带有type="module"的<script>标签都当作模块来解析，即使它们可能不是模块。这会导致一些不必要的错误和性能问题。

模块声明提案旨在解决这个问题。它引入了一种新的方式来声明模块：通过在模块文件的顶部添加一个模块声明。这个声明告诉浏览器这是一个ES模块，并且可以指定模块的类型。

模块声明的语法如下：

// JavaScript Module Declaration
export {}; // 或者 export default {};

// TypeScript Module Declaration
export {}; // 或者 export default {};

是不是很简单？其实，它就是一个空的export语句。这个语句告诉JavaScript引擎，这个文件是一个模块。

为什么要这么做呢？

更明确的模块声明： 避免浏览器误判，只把真正需要解析为模块的文件解析为模块。
更好的性能： 减少不必要的模块解析，提高页面加载速度。
增强的类型检查： 在TypeScript中，可以更精确地进行类型检查。

举个例子：

假设我们有一个名为utils.js的文件，它包含一些工具函数。

// utils.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

现在，我们可以使用模块声明来告诉浏览器这是一个模块：

// utils.js
export {}; // 模块声明

export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

或者使用default导出：

// utils.js
export default {}; // 模块声明

export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

然后在HTML文件中，我们可以这样引入这个模块：

<!DOCTYPE html>
<html>
<head>
  <title>Module Declarations Example</title>
</head>
<body>
  <script type="module" src="utils.js"></script>
  <script type="module">
    import { add, subtract } from './utils.js';
    console.log(add(1, 2)); // 输出 3
    console.log(subtract(5, 3)); // 输出 2
  </script>
</body>
</html>

模块声明与TypeScript:

在TypeScript中，模块声明更加重要。它可以帮助TypeScript编译器更好地理解你的代码，并提供更准确的类型检查。如果你的文件是一个模块，但是没有显式地导出任何东西，那么TypeScript会认为它是一个脚本文件，而不是一个模块文件。这会导致一些类型错误。

总结一下，模块声明就像给你的模块文件贴上一个标签，告诉浏览器和TypeScript编译器：“嘿，我是一个模块，请按照模块的方式来处理我！”

二、内容寻址（Content Addressing）：用“指纹”来定位内容

接下来，咱们来聊聊内容寻址。想象一下，你有一个图书馆，里面有很多书。传统的图书馆，每本书都有一个书名和作者，你可以通过书名和作者来找到这本书。但是，如果两本书的书名和作者都一样呢？或者，如果有人故意把一本书的书名改了呢？你就很难找到真正的你想找的那本书了。

内容寻址就像给每本书都盖上一个独一无二的“指纹”，这个“指纹”是根据书的内容计算出来的。无论书名和作者怎么变，只要书的内容不变，它的“指纹”就不会变。这样，你就可以通过“指纹”来准确地找到你想找的那本书。

在计算机世界里，“指纹”就是哈希值。内容寻址就是使用哈希值来定位内容。

内容寻址的工作原理：

计算哈希值： 对内容（例如，文件、图片、视频）进行哈希运算，得到一个唯一的哈希值。常用的哈希算法包括SHA-256、SHA-384、SHA-512等。
使用哈希值作为地址： 使用哈希值作为内容的地址。当需要访问内容时，只需要提供哈希值即可。
验证内容： 在访问内容时，重新计算内容的哈希值，并与提供的哈希值进行比较。如果两个哈希值相同，说明内容没有被篡改。

内容寻址的优点：

唯一性： 只要内容相同，哈希值就相同。
防篡改： 如果内容被篡改，哈希值就会改变。
永久性： 只要哈希算法不被破解，哈希值就可以永久地标识内容。
分布性： 内容可以存储在不同的地方，只要知道哈希值，就可以找到内容。

内容寻址的应用场景：

IPFS（InterPlanetary File System）： 一个分布式的存储系统，使用内容寻址来存储和访问文件。
Git： 一个版本控制系统，使用内容寻址来存储和访问代码。
区块链： 一种分布式账本技术，使用内容寻址来存储和访问数据。
CDN（Content Delivery Network）： 可以使用内容寻址来缓存静态资源，提高网站的性能。

举个例子：

假设我们有一个名为app.js的文件，它的内容如下：

// app.js
console.log('Hello, world!');

我们可以使用SHA-256算法来计算它的哈希值：

$ echo -n "console.log('Hello, world!');" | openssl dgst -sha256
(stdin)= d2e511e84d237c9a928109b85441d0f2310569c0e36583d2229e2310602334d9

现在，d2e511e84d237c9a928109b85441d0f2310569c0e36583d2229e2310602334d9就是这个文件的哈希值，我们可以使用它来作为这个文件的地址。

在实际应用中，我们可以将哈希值存储在数据库中，或者使用它来生成URL。

例如，我们可以将app.js存储在一个CDN上，并使用它的哈希值作为URL：

https://cdn.example.com/d2e511e84d237c9a928109b85441d0f2310569c0e36583d2229e2310602334d9/app.js

当浏览器请求这个URL时，CDN会返回app.js的内容，并且会验证内容的哈希值是否与URL中的哈希值相同。如果相同，说明内容没有被篡改。

内容寻址就像给每个文件都盖上一个独一无二的“指纹”，保证了文件的完整性和安全性。

三、子资源完整性（Subresource Integrity）：确保你加载的资源是“原装正品”

最后，咱们来聊聊子资源完整性（SRI）。在现代Web开发中，我们经常会使用CDN来加载第三方库，例如jQuery、Bootstrap等。但是，如果我们使用的CDN被黑客攻击，或者CDN提供商不小心修改了库的代码，那么我们的网站就会受到影响。

子资源完整性（SRI）就是为了解决这个问题而生的。它允许我们在HTML文件中指定资源的哈希值，浏览器在加载资源时会验证资源的哈希值是否与指定的哈希值相同。如果相同，说明资源没有被篡改；否则，浏览器会拒绝加载资源。

SRI的工作原理：

计算资源的哈希值： 使用哈希算法（例如SHA-256、SHA-384、SHA-512）计算资源的哈希值。
在HTML文件中指定哈希值： 在<script>和<link>标签的integrity属性中指定资源的哈希值。integrity属性的值是一个字符串，包含哈希算法和哈希值，例如：sha256-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx。
浏览器验证哈希值： 浏览器在加载资源时会验证资源的哈希值是否与integrity属性中指定的哈希值相同。如果相同，说明资源没有被篡改；否则，浏览器会拒绝加载资源。

SRI的优点：

防止CDN攻击： 即使CDN被黑客攻击，或者CDN提供商不小心修改了库的代码，SRI也能保证我们的网站不会受到影响。
提高安全性： SRI可以防止恶意代码注入，提高网站的安全性。
增强信任： SRI可以增强用户对网站的信任，因为用户知道网站加载的资源是“原装正品”。

举个例子：

假设我们想使用CDN来加载jQuery。我们可以从jQuery官方网站上找到jQuery的CDN地址和哈希值：

<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>

在这个例子中，integrity属性的值是sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=，它告诉浏览器：

哈希算法是SHA-256。
哈希值是/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=。

当浏览器加载jquery-3.6.0.min.js时，会计算它的SHA-256哈希值，并与/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=进行比较。如果相同，说明jQuery没有被篡改；否则，浏览器会拒绝加载jQuery。

crossorigin属性：

在上面的例子中，我们还看到了crossorigin="anonymous"属性。这个属性告诉浏览器，这是一个跨域请求，并且不需要发送任何凭证（例如，cookie）。如果你的CDN资源需要发送凭证，你需要将crossorigin属性设置为use-credentials。

如何生成哈希值？

你可以使用openssl命令来生成哈希值：

$ openssl dgst -sha256 jquery-3.6.0.min.js -binary | openssl base64 -A
/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=

或者使用在线工具，例如：https://www.srihash.org/

SRI就像给你的第三方库穿上了一件“防篡改外套”，保证了你加载的资源是“原装正品”，让你的网站更安全、更可靠。

总结：

特性	作用	优点
模块声明	明确地声明一个文件是JavaScript模块。	更精确的模块识别，减少不必要的解析，提高性能，增强类型检查。
内容寻址	使用内容的哈希值作为地址来定位内容。	唯一性，防篡改，永久性，分布性，适用于分布式存储和版本控制系统。
子资源完整性	允许在HTML文件中指定资源的哈希值，浏览器在加载资源时会验证资源的哈希值是否与指定的哈希值相同。	防止CDN攻击，提高安全性，增强信任，确保加载的第三方资源未被篡改。

结语：

好了，各位靓仔靓女，今天咱们就聊到这里。希望通过今天的讲解，大家对JavaScript模块声明提案、内容寻址和子资源完整性有了更深入的了解。记住，安全无小事，让我们一起努力，为我们的代码穿上更多的“防弹衣”，让我们的网站更安全、更可靠！下次再见！

发表回复 取消回复

发表回复取消回复