使用SRI保护你的网站免受第三方CDN恶意攻击

出于速度和降低服务器负载考虑,有时候我们会选择使用 CDN 加载第三方静态资源。对于一些热门的第三方库,在用户打开你的网页之前就很有可能在浏览别的网站时被浏览器缓存下来,这样就可以极大的提升网页加载速度。

然而使用 CDN 也提高了网站的安全风险:第三方静态资源放在第三方服务器上,CDN 的拥有者有没有可能偷偷的篡改这些文件,加入恶意代码呢?或者 CDN 服务器遭受了黑客攻击,整个文件被替换掉。虽然可能性不高,但不是零。JavaScript 对于当前浏览器页面有完全控制权,他们不仅仅能获取到页面上的任何内容,还能抓取用户输入的一些诸如密码之类的机密信息,还能获取到保存到 Cookie 中的登录票据等等内容,这就是所谓的 XSS 攻击。

我们需要一种机制确保从 CDN 下载的文件未被恶意篡改。某些下载网站就提供下载文件的 MD5 或 SHA1 码用于检查所下载文件的完整性,网页中有没有类似的机制呢?

什么是 SRI

子资源完整性 Subresource Integrity 简称 SRI 是一种安全机制,它用于让浏览器检查所下载的来自第三方的资源(例如 CDN)未被恶意篡改。它使用哈希值检查确保第三方资源的完整性。只要开发者提供了被需下载资源的哈希值,浏览器就可以检查实际下载的文件是否与预期的哈希值匹配。

使用 SRI

只需给 scriptstyle 标签添加 integrity 属性即可。例如:

  • JavaScript
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" crossorigin="anonymous"></script>
  • CSS
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" integrity="sha384-7tIwW4quYS2+TZCwuAPnUY+dRqg28ylzlIoVXAwpfiTs+CMKsAOSsWYQ96c/ZnV+" crossorigin="anonymous">

integrity 属性值以 shaXXX- 开头,表示后面的哈希值使用的哈希算法,目前只允许 sha256sha384sha512 这三种哈希算法,以 sha384 比较多见。后面跟对应的哈希值即可。

值得注意的是,因为启用 SRI 需要获取所下载文件的内容进行计算,所以需要 CDN 服务器启用跨域资源访问(CORS)支持,即返回 Access-Control-Allow-Origin: * 头。客户端需要使用跨域的形式加载指定文件,即添加 crossorigin="anonymous" 属性。就我所知,目前国内相对常用的免费 CDN bootcdn 已经支持 CORS,百度静态 CDN 还不支持。

浏览器如何处理 SRI

  1. 当浏览器遇到一个带有 integrityscriptstyle 标签,在执行其中的 JS 脚本或应用其中的 CSS 样式之前,浏览器会首先计算所下载文件的内容的哈希值是否与 integrity 属性给定的值相同。
  2. 如果计算结果与给定值不匹配,浏览器会拒绝执行脚本内容,并报出一个网络错误,类似如下结果:
Failed to find a valid digest in the 'integrity' attribute for resource 'https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css' with computed SHA-256 integrity 'VbcxqgMGQYm3q8qZMd63uETHXXZkqs7ME1bEvAY1xK8='. The resource has been blocked.

如何计算哈希值

这是 SRI 标准文档提供的例子

$ echo -n "alert('Hello, world.');" | openssl dgst -sha384 -binary | openssl base64 -A

使用了 OpenSSL 这个 *nix 中通常都包含的工具计算哈希值。其中 alert('Hello, world.'); 是文件内容,你也可以用 cat Filename.js 直接读取某个文件。

输出 H8BRh8j48O9oYatfu5AZzq6A9RINhZO5H16dQZngK7T62em8MUt1FLm52t+eX6xO,在此基础上添加前缀 sha384- 就可以了。

网上也有现成的 SRI 哈希值生成器,方便好用:https://srihash.org/

CSP 与 SRI

你可以使用 内容安全政策CSP)强制要求当前页面所有脚本加载标签启用 SRI。例如

Content-Security-Policy: require-sri-for script;

强制要求所有 script 标签启用 SRI,浏览器会拒绝加载未启用 SRI 的 script 标签。

对应的还有 CSS 版本:

Content-Security-Policy: require-sri-for style;

你也可以同时启用两者。

错误恢复

使用 CDN 时别忘了当尝试从 CDN 加载文件失败后加载本地版本:

<script src="https://code.jquery.com/jquery-3.2.1.min.js"
        integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f"
        crossorigin="anonymous"></script>
<script>if (!window.jQuery) document.write('<script src="/jquery-3.2.1.min.js"><\/script>')</script>


我大EOI前端
[链接] 虽然公司尚小,但是志向不小
1.3k 声望
100 粉丝
0 条评论
推荐阅读
【笔记】使用 PDB 符号文件导出 Windows 内核数据结构
msvcrt.dll ucrtbase.dll 提供基础 CRT (C语言运行时)库,例如 fopen,_sleep 等。前者 msvcrt 绑定 MSVC 版本号,不同的版本不完全兼容(这也是安装很多软件时会让你装微软运行时的缘故),后者是微软新出的通...

CarterLi阅读 1.4k

CSS transition 小技巧!如何保留 hover 的状态?
欢迎关注我的公众号:前端侦探通常情况下,hover 是无法保存状态的。鼠标移入触发额外样式,一旦移出就还原了 {代码...} 这就意味着,如果需要保留hover的状态,可能就不得不借助JS了,比如下面是某某书院的首页...

XboxYan29阅读 3.5k评论 2

封面图
除了 filter 还有什么置灰网站的方式?
大家都知道,当一些重大事件发生的时候,我们的网站,可能需要置灰,像是这样:当然,通常而言,全站置灰是非常简单的事情,大部分前端同学都知道,仅仅需要使用一行 CSS,就能实现全站置灰的方式。像是这样,我...

chokcoco19阅读 1.6k评论 1

封面图
23个css动画效果,持续更新中...
代码github仓库:[链接]使用方式看名称效果图,有没有和自己想要的效果类似的有的话,复制粘贴代码使用也可以自己修改一下css效果并不是特别难,只是有时候我们可能想不到笔者空闲时间,会继续更新的哦,点赞关注...

水冗水孚9阅读 1.3k

封面图
两行CSS让页面提升了近7倍渲染性能!
对于前端人员来讲,最令人头疼的应该就是页面性能了,当用户在访问一个页面时,总是希望它能够快速呈现在眼前并且是可交互状态。如果页面加载过慢,你的用户很可能会因此离你而去。所以页面性能对于前端开发者来...

南玖9阅读 2k

封面图
那些你不知道的 CSS 自定义形状网格布局 3
基于CSS自定义网格已发布第一部分和第二部分,本文将开始第三部分探讨更多的奇特自定义形状,与之前的文章一样,核心还是基于CSS grid,clip 和 mask来自定义网格形状布局。

南城FE6阅读 1.3k

封面图
go html/template 模板的使用实例
模板文件,建议为每个模板文件显式的定义模板名称:{{ define &quot;tplName&quot; }},否则会因模板对象名与模板名不一致,无法解析(条件分支很多,不如按一种标准写法实现),另展示一些基本的模板语法。

big_cat4阅读 12.2k

1.3k 声望
100 粉丝
宣传栏