使用 subresource-integrity / SRI保护静态资源不被恶意修改

🌙
手机阅读
本文目录结构

很多网站如果源被修改了,会有下面的提示

Failed to find a valid digest in the 'integrity' attribute for resource 'http://aa.aaaaa.com/assets/rubyissues-dc683ef8d41f45e5fdafceda1a26598f.css' with computed SHA-256 integrity 'vGH6uxiZBXnDr46nPJPx2/V82if1Sij2FDhPgXSk6xI='. The resource has been blocked.

是因为启用了 SRI

场景

网页需要需要引用静态资源(CSS/JavaScript),但是静态资源可能会被转发,替换等等;

比如 a.aaa.com 下的所有静态文件被映射到另外一个地址 a.bbb.com 上。虽然可能性不高,但不是零。

JavaScript 对于当前浏览器页面有完全控制权,他们不仅仅能获取到页面上的任何内容,还能抓取用户输入的一些诸如密码之类的机密信息,还能获取到保存到 Cookie 中的登录票据等等内容,这就是所谓的 XSS 攻击。

我们需要一种机制确保加载的文件未被恶意篡改。

某些下载网站就提供下载文件的 MD5 或 SHA1 码用于检查所下载文件的完整性,网页中有SRI来实现

什么是 SRI

子资源完整性 Subresource Integrity 简称 SRI 是一种安全机制,它用于让浏览器检查所下载的来自第三方的资源(例如 CDN)未被恶意篡改。

它使用哈希值检查确保第三方资源的完整性。只要开发者提供了被需下载资源的哈希值,浏览器就可以检查实际下载的文件是否与预期的哈希值匹配。

解决什么问题?

Web 性能优化中为了让静态资源尽快下载完,通常我们将JS/CSS/Image等静态资源部署在CDN服务器。CDN 服务提供商通过分布在各地的节点,让用户从最近的节点下载资源,大幅提升下载速度。但是 CDN 的安全性一直是一个风险点,让请求从第三方服务器经过,由第三方响应,安全性不可控,一旦CDN出现安全问题,就导致我们的站点也出现安全风险。

CSP(Content Security Policy) 的机制可以降低 XSS 风险。但我们存储在 CDN 的内容被篡改而导致的 XSS,CSP 并不能防范,因为网站所使用的 CDN 域名,肯定在 CSP 白名单之中。

HTTPS 也可以确保传输过程中的数据完整性,但是对于 CDN 服务器被入侵或 HTTP 回源被劫持造成的文件篡改,HTTPS 无济于事;

因此 SRI 就应运而生了,通过它避免用户加载了第三方服务器被修改的资源。

使用 SRI

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

JavaScript

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" crossorigin="anonymous"></script>

或者

<script src=/js/vendors.f1d427e1.js integrity=sha384-+gPahXnpvahPqOS4haFp4mdPuTl17McxKkNAq5afcVdTZIPPq8+iGt0vPBWC9rbb></script>
<script src=/js/app.9e9aca74.js integrity=sha384-x7nwXHi0Efxos7Krmw54pThTZsGeTF7a10RxHp2ds1vyTHclTzh55xDLvGlUvvI/ ></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">

或者

<link href=/css/vendors.93201b2d.css rel=stylesheet integrity=sha384-9BHF2g0ZDOvNNvKybSbiN/KYALObRyTYNNlPyUBuOR2I6mUxJ4Lg22wHhda8lxdj>
<link href=/css/app.59b71084.css rel=stylesheet integrity=sha384-9FJ5XEuLpfj6t6hbVjAFT61jlE/J1l2+8c/qwv0Ek1ZfFe/qVdmvZzbWVmHXjcX/ >

integrity 属性值以 shaXXX- 开头,表示后面的哈希值使用的哈希算法,目前只允许 sha256、sha384 或 sha512 这三种哈希算法,以 sha384 最常见。后面跟对应的哈希值即可。

注意事项

值得注意的是,因为启用 SRI 需要获取所下载文件的内容进行计算,如果是引用非本域的资源,这就要求被请求的资源必须同域,或者需要服务器启用跨域资源访问(CORS)支持,即返回 Access-Control-Allow-Origin: * 头,这个细节需要大家注意。

客户端需要使用跨域的形式加载指定文件,即添加 crossorigin="anonymous" 属性。

国内相对常用的免费 CDN bootcdn 已经支持 CORS,百度静态 CDN 还不支持。

浏览器如何处理 SRI

当浏览器遇到一个带有 integrity 的 scriptstyle 标签,在执行其中的 JS 脚本或应用其中的 CSS 样式之前,浏览器会首先计算所下载文件的内容的哈希值是否与 integrity 属性给定的值相同。

如果计算结果与给定值不匹配,浏览器会拒绝执行脚本内容,并报出一个网络错误,类似如下结果:

Failed to find a valid digest in the 'integrity' attribute for resource 'https://a.axihe.com/public.css' with computed SHA-256 integrity 'VbcxqgMGQYm3q8qZMd63uETHXXZkqs7ME1bEvAY1xK8='. The resource has been blocked.

如何计算哈希值

这是 SRI 标准文档提供的:https://w3c.github.io/webappsec-subresource-integrity/#example-da8c6097

$ 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:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP)强制要求当前页面所有脚本加载标签启用 SRI。例如

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

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

对应的还有 CSS 版本:

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

你也可以同时启用两者。

启用SRI后会出现什么问题?怎么解决

当资源验证不通过,也就是用户下载的资源被劫持了,就会导致用户直接不可用,因为浏览器会触发错事件,并且丢弃下载的资源。这可能导致整个页面都不可用了!

SRI的原则是:宁为玉碎不为瓦全。为了提高可用性,也可以增加 fallback 处理。例如,在 CDN 资源被篡改而无法加载时,转为使用本站资源:

针对CDN资源失败的情况,我们可以通过添加额外的部署站点重试,例如:直接让用户从主域名下载资源,具体实现方式如下:

同步JS资源: 失败后我们直接使用document.write继续加载主域资源,这里可也通过构建实现。

<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>

github 很早就启用了SRI策略了:https://github.blog/2015-09-19-subresource-integrity/

安全隐患

SRI 的作用是保证页面引入第三方资源的完整性。在第三方 CDN 服务被入侵或回源被运营商劫持、文件内容被加入恶意代码时,网站如果启用了 SRI 策略,那么在支持 SRI 的浏览器下,被篡改的文件无法执行。

非最新的刘游览器

但是如果用不支持 SRI的浏览器,那就没有效果了,基本只有新版本的Chrome才支持这个属性;

下面是不支持SRI的浏览器

  • IE 6/7/8/9/10/11/
  • Edge 12-17/18/76
  • FireFox 2-4849-6768-72
  • Chrome 4-53

SRI支持情况

https://caniuse.com/#search=sri

HTML一起劫持

如果将外链资源及 HTML 页面本身一起劫持,

并将资源内容和页面中的摘要签名同步修改,让 SRI 彻底失效,那就可以绕过SRI了。

注意:将 JS 代码缓存在本地 localStorage的方案也有很大的安全隐患,网站出现任何 XSS,都有可能被用来篡改缓存在 localStorage 的代码,之后即使 XSS 被修复,localStorage 中的代码依然是被篡改过的,持续发挥作用。

结论:该方法只能在非常新的Chrome浏览器上有效果,属于君子协定一样,如果是非新版本Chrome浏览器,就天生绕过了这个防范;

如果是连HTML页面一起劫持,该验证也可以轻易绕过去

本文参考

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang

抖音号

抖音号: axihe

Anbang