❗ 本文最后更新于 2575 天前,文中所描述的信息可能已发生改变,请谨慎使用。
在上篇介绍 Subresource Integrity(SRI)的文章最后,我提出一个问题:现在广泛被大家使用的「将 JS 代码缓存在本地 localStorage」方案有很大的安全隐患。网站出现任何 XSS,都有可能被用来篡改缓存在 localStorage 中的代码。之后即使 XSS 被修复,localStorage 中的代码依然是被篡改过的,持续发挥作用。本文接着讨论这个话题。
将 JS/CSS 代码缓存在本地的用途,本博客反复讲过,这里不再啰嗦。这个安全隐患的根源在于:大部分 Web 应用从 localStorage 中获取缓存代码后,没有任何检测机制,直接执行。而 localStorage 是跨页面的,同域下任何页面有 XSS 漏洞,就可以被攻击者用来往 localStorage 写入恶意代码。
以下几段示意代码,可以帮大家更清楚地看出问题所在:
<!-- 首次访问 -->
<script id="code">/*一大段正常代码*/</script>
<script>html2ls('my_code', document.getElementById('code').innerHTML)</script>
<script>
function html2ls(ls_name, code) {
localStorage[ls_name] = code;
}
</script>
<!-- 第二次访问 -->
<script>ls2html('my_code')</script>
<script>
function ls2html(ls_name) {
var script = document.createElement('script');
script.innerHTML = localStorage[ls_name]; // 取到:/*一大段正常代码*/
document.head.appendChild(script);
}
</script>
<!-- 访问有 XSS 的页面 -->
<img src="" onerror="localStorage['my_code']+=';alert(0);'" />
<!-- 第 N 次访问 -->
<script>ls2html('my_code')</script>
<script>
function ls2html(ls_name) {
var script = document.createElement('script');
script.innerHTML = localStorage[ls_name]; // 取到:/*一大段正常代码*/;alert(0)
document.head.appendChild(script);
}
</script>
很多 Web 应用会使用 loader 来加载资源,如果 loader 里有从 localStorage 读取并执行代码的逻辑,也有相同的安全隐患,原理都一样。
要解决这个问题,很容易想到的方案是:在页面中输出缓存资源的摘要签名,并在 ls2html
函数中校验。但在浏览器中计算签名,需要额外引入一大段 JS。而为了让 ls2html
尽快可用(因为从 localStorage 中读取 CSS 也依赖于它),这段 JS 必须在页面最开头引入,这对页面性能影响很大。另外,自己实现的摘要算法,在处理大段文本时效率也不会太高。
在上篇文章中,我们知道了利用 SRI 策略,可以让浏览器自动计算外链资源的签名与内容是否匹配。不需要额外引入新的代码,浏览器内置的算法也会有更高的效率。
由于 SRI 只能作用于外链资源,还需要将从 localStorage 获取到的代码转为外链形式。有两个方案可以实现这一需求:data URIs 和 Blob URL。
将代码转为 data URIs 形式的外链并启用 SRI:
var code = 'alert("hello world!");';
var script = document.createElement('script');
script.crossOrigin = 'anonymous';
script.integrity = 'sha256-0URT8NZXh/hI7oaypQXNjC07bwnLB52GAjvNiCaN7Gc=';
script.src = 'data:application/x-javascript,' + encodeURIComponent(code);
document.head.appendChild(script);
将代码转为 Blob URL 形式的外链并启用 SRI:
var code = 'alert("hello world!");';
var blob = new Blob([code], {type: "application/x-javascript"});
var blobUrl = URL.createObjectURL(blob);
var script = document.createElement('script');
script.crossOrigin = 'anonymous';
script.integrity = 'sha256-0URT8NZXh/hI7oaypQXNjC07bwnLB52GAjvNiCaN7Gc=';
script.src = blobUrl;
document.head.appendChild(script);
分别在支持 SRI 的 Chrome 和 Firefox 中测试,结果如下:
测试用例 | Chrome 46.0.2490.33 beta | Firefox 44.0a1 (2015-09-23) |
---|---|---|
data URIs(无 SRI) | 正常执行 | 正常执行 |
Blob URL(无 SRI) | 正常执行 | 正常执行 |
data URIs(SRI + 正确摘要) | CORS 报错 | 不执行、不报错 |
Blob URL(SRI + 正确摘要) | 正常执行 | 不执行、不报错 |
data URIs(SRI + 错误摘要) | CORS 报错 | 不执行、不报错 |
Blob URL(SRI + 错误摘要) | Integrity 不匹配报错 | 不执行、不报错 |
上面的测试结果表明:
- 没有 SRI 策略时,这两种方式都可以把字符串转为外链形式加载并执行;
- Firefox 中,启用 SRI 后,data URIs 和 Blob URL 两种形式的外链都不执行;
- Chrome 中,启用 SRI 后,data URIs 形式的外链始终会报 CORS 跨域错误;
- Chrome 中,启用 SRI 后,Blob URL 形式的外链会校验
integrity
属性;
可以看到,最后一种情况是我想要的。改造前面的代码,在第二次访问时输出签名,并增加校验机制:
<!-- 第二次访问 -->
<script>ls2html('my_code', 'sha256-xxxx')</script>
<script>
function ls2html(ls_name, integrity) {
var script = document.createElement('script');
var code = localStorage[ls_name];
//计算 chrome 版本号
var chromeVersion = -1;
var match = /chrome\/(\d+)/i.exec(navigator.userAgent);
if(match) {
chromeVersion = match[1] | 0;
}
//chrome 45 才开始支持 SRI
if (integrity && chromeVersion > 44) {
var blob = new Blob([code], {type: "application/x-javascript"});
var blobUrl = URL.createObjectURL(blob);
script.crossOrigin = 'anonymous';
script.integrity = integrity;
script.src = blobUrl;
script.onerror = function() { alert('localStorage 代码被修改!') };
} else {
script.innerHTML = code;
}
document.head.appendChild(script);
}
</script>
核心逻辑就是这样,细节上还有一些地方要考虑。例如如果启用了 CSP 策略,需要在 script-src 配置中加上 blob:
;另外这样改写之后,之前同步加载的代码变成了异步。我的博客已经用上了本文这个 localStorage 代码安全增强方案,在本博客任意页面打开浏览器控制台,执行以下代码并刷新页面:
localStorage.blog_js += ';alert(0);'
如果你的浏览器是 Chrome 45+,会发现 alert(0) 并不会执行。我会检测出 localStorage 代码被修改,从而自动修复从而拒绝加载。
关于 Chrome 和 Firefox 实现上的差异,我咨询了 public-webappsec@w3.org 邮件组,得到的答复是 Chrome 符合预期。Mozilla 的 Bugzilla 中已经有关于本问题的讨论。
在 NodeJS 中,计算符合 SRI 要求的 integrity 值很简单,使用 crypto
模块就可以:
var crypto = require('crypto');
function getIntegrity(content, algorithm) {
algorithm = algorithm || 'sha256';
var result = algorithm + '-' + crypto
.createHash(algorithm)
.update(content)
.digest("base64");
return result;
}
最后,使用 Content Security Policy Level 2(CSP2)策略,也可以校验内联代码是否被修改过,支持度更好一些,但使用起来也更麻烦。这部分内容留给以后有时间再写。
更新:新版 Firefox 中,启用 SRI 后,Blob URL 形式的外链也会校验
integrity
属性了。也就是说,本站的 localStorage 代码防篡改策略在最新的 Chrome 和 Firefox 下都能正常运行。
2016-08-29 更新:目前本站已经改用 CSP2 来防止 localStorage 中的代码被修改。
本文链接:https://mailseason.com/post/enhance-security-for-ls-code.html,参与评论 »
--EOF--
发表于 2015-09-26 17:00:48,并被添加「SRI、Web安全、LocalStorage」标签,最后修改于 2017-11-20 15:09:08。查看本文 Markdown 版本 »
专题「浏览器」的其他文章 »
- iOS 10 Safari 视频播放新政策 (Oct 07, 2016)
- Chrome 中 scrollingElement 的变化 (Apr 16, 2016)
- 域名小知识:Public Suffix List (Nov 28, 2015)
- window.opener.location 安全风险讨论 (Oct 09, 2015)
- Subresource Integrity 介绍 (Sep 23, 2015)
- 移动 Web 与 JavaScript 定时器 (Mar 27, 2014)
- Chrome 和 Web Fonts 二三事 (Mar 24, 2014)
- Webkit 异步加载 CSS 的奇怪现象 (Dec 25, 2013)
- 小成本实现部分选中的复选框 (Dec 22, 2013)
- Chrome 滚动条冻结现象 (Dec 02, 2013)
Comments
Waline 评论加载中...