在Web开发中，确保资源的完整性和安全性对于Web应用程序的性能和可靠性至关重要。为了保证网站中JavaScript、CSS和图像等文件完整性， Subresource Integrity（SRI）成为了一个常见而且有效的解决方案。SRI 是一种在一个 web 页面中使用的安全功能，用于验证其与主机 web 服务器相连的资源是否具有预期的完整性和来源。使用 SRI 在客户端确保资源完整性，而不必完全依靠服务端提供的资源。
在前端开发中，Ember.js是一个强大的框架，但它仅提供了一个令人满意的解决方案，即使它是构建成熟的Web应用程序的首选框架，但在SRI解决方案上还是过于简单。为了解决这个问题，Ember CLI包管理器提供了一个名叫 ember-cli-sri 的npm包，它可以方便地将SRI集成到Ember应用程序中。
本篇文章将为您介绍 ember-cli-sri 的使用方法， 并为您提供示例代码。
安装与设置
首先，要使用这个包，您需要将其安装为开发依赖项。您可以使用以下npm命令在Ember项目中添加 ember-cli-sri 依赖项。
npm install --save-dev ember-cli-sri
要启用SRI支持，需要执行以下操作：
- 要使用SRI支持，首先需要更新
Brocfile.js，以根据您的需要调整您的应用程序。打开文件，添加以下语句：
var app = new EmberApp({
sri: {
enabled: true
}
});- 安装成功后，在应用程序根目录中将会生成一个 SHA256 兼容的子资源完整性哈希列表，您需要生成一个哈希值列表，如下所示：
ember sri:add
现在，资源的完整性已经集成到您的应用程序中，并且浏览器将验证您的资源的完整性。
如何验证 SRI 是否成功
当使用SRI时，如果资源和子资源不匹配，则浏览器将不会请求文件。
以下是一个示例CSS引用，具有SRI属性。SRI属性是由命令 ember sri:add 自动生成的：
<link rel="stylesheet" href="{{rootUrl}}assets/vendor.css" integrity="sha256-PzGHwrYMkoxVONmqxza0KsN+wVeYq9X8nmKjC90HbJA= sha512-Z/2QjKKhT+BxvTnLP7V9X+bbbam5397ClUJKnFRb+j7D15LRL6ajdvpVnM1fqZym7pHq1qKjCBFaJ/iPewzngw==" crossorigin="anonymous">在此示例中， sha256-PzGHwrY… 是文件的子资源完整性哈希值。你可以查看shaXXX 后面跟的字符串， 这就是SRI提供的哈希值。
要验证SRI是否成功，请执行以下操作：
- 确保在网页下载和启用的文件是具有SRI属性的文件。
- 打开浏览器的开发者工具。在Console选项卡下，选项“network”选项，你会看到在网页初始化加载之后，资源的状态为“SUCCESS”或“200 OK”（
404除外）。 - 单击资源行并打开详细面板。在身体（Body）部分，可以检查资源加载并正确匹配子资源完整性哈希，还可以看到浏览器完整性验证结果。
使用示例
SRI不仅限于CSS文件，你可以用它来验证 JavaScript 和图像等资源的完整性。
下面是如何在应用程序中使用SRI来引用JavaScript:
<script src="{{rootUrl}}assets/vendor.js"
integrity="sha384-Cg0m0sytv3sPH3/SF/9-/DoEzxbIHBuL7OKIVfNtxu6rNz6PDxuVVeGzZlHM+m1V"
crossOrigin="anonymous"></script>关于CSS文件和 JavaScript文件的完整示例代码可以在这里找到：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------- --- ------------
----- ---------------- ----------------------------------- ---------------------------------------------------------------------------------- ------------------------
----- ---------------- -------------------------------- ----------------------------------------------------------------------------------- ------------------------
------- ---------------------------------
-----------------------------------------------------------------------------------
---------------------------------
------- ------------------------------
-----------------------------------------------------------------------------------
---------------------------------
-------
------
---- ------------------
--------- --- --- ---------
---------- -- ----- --- --- ---------
----- ----- ---- -- --- ---- ---- ------ --- ------------- ------
------
-------
-------总结
本文提供了使用 ember-cli-sri npm包集成SRI支持的完整步骤， 以及如何验证SRI并提供了示例代码。当您集成SRI支持时，您的应用程序将具有更高的安全性和完整性，同时也将增加更多的性能。现在是尝试集成SRI支持的时候了，另外，SRI不仅适用于Ember.js ，它也能应用于其他Web应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60668