使用 SRI 增强 localStorage 代码安全

标签: sri 增强 localstorage | 发表时间:2015-09-26 17:00 | 作者:
出处:https://imququ.com

在上篇 介绍 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 URIsBlob 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 不匹配报错 不执行、不报错

上面的测试结果表明:

  1. 没有 SRI 策略时,这两种方式都可以把字符串转为外链形式加载并执行;
  2. Firefox 中,启用 SRI 后,data URIs 和 Blob URL 两种形式的外链都不执行;
  3. Chrome 中,启用 SRI 后,data URIs 形式的外链始终会报 CORS 跨域错误;
  4. 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];

    if (-1 == (navigator.userAgent || '').toLowerCase().indexOf('firefox') && window.URL && window.Blob) {
        var blob = new Blob([code], {type: "application/x-javascript"});
        var blobUrl = URL.createObjectURL(blob);

        script.crossOrigin = 'anonymous';
        script.integrity = integrity;
        script.src = blogUrl;

        script.onerror = function() { alert('localStorage 代码被修改!') };
    } else {
        script.innerHTML = code;
    }

    document.head.appendChild(script);
}
</script>

核心逻辑就是这样,细节上还有一些地方要考虑。例如如果启用了 CSP 策略,需要在 script-src 配置中加上 blob:。我的博客已经用上了本文这个 localStorage 代码安全增强方案。打开浏览器控制台,执行以下代码并刷新页面:

  localStorage.all_js += ';alert(0);'

如果你的浏览器是 Chrome 45+,会发现 alert(0) 并不会执行。我会检测出 localStorage 代码被修改,从而自动修复。

关于 Chrome 和 Firefox 实现上的差异,我咨询了 [email protected] 邮件组。得到的答复是 Chrome 符合预期。

在 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)策略,也可以校验内联代码是否被修改过,支持度更好一些,但使用起来也更麻烦。这部分内容留给以后有时间再写。

本文链接: https://imququ.com/post/enhance-security-for-ls-code.html参与讨论

推荐: 领略前端技术 阅读奇舞周刊

相关 [sri 增强 localstorage] 推荐:

使用 SRI 增强 localStorage 代码安全

- - JerryQu 的小站
在上篇 介绍 Subresource Integrity(SRI)的文章最后,我提出一个问题:现在广泛被大家使用的「将 JS 代码缓存在本地 localStorage」方案有很大的安全隐患. 网站出现任何 XSS,都有可能被用来篡改缓存在 localStorage 中的代码. 之后即使 XSS 被修复,localStorage 中的代码依然是被篡改过的,持续发挥作用.

html 5中localstorage小结

- - ITeye博客
html 5中的localstorage的小结 demo,如下:. 2) 然后检查浏览器知否支持html 5的localstorage,比如:. 3) 写到localstorage,. 4) 读localstorage. 5  写session storage. 6 读session stage. 已有 0 人发表留言,猛击->> 这里<<-参与讨论.

檢測localStorage容量上限

- - 黑暗執行緒
在處理localStorage問題時,在 stackoverflow發現好用的網頁工具 -- Test of localStorage limits/quota. 使用方法很簡單,連上 該網頁,網頁裡的JavaScript會嘗試在瀏覽器localStorage塞資料,並持續增加儲存資料的長度,直到放不下為止,即可得到localStorage的容量上限.

Vineyard :wine增强版

- tackwell - 笨兔兔
Vineyard 工具,专为Linux移植windows应用设计. Ubuntu 和 LinuxMint用户:. 声明:笨兔兔原创文章,博客文章遵循CC协议,转载需注明@笨兔兔,本文链接地址. 文稿投递|文章写作规范|欢迎加入QQ群:121584708(此群已满);2群:170591351;Gtalk群:[email protected].

增强现实的3大新创意

- tan - 互联网的那点事
我们说,3D电视应该会有人想看啊. 有些事情, 「视觉」上的震撼<永远无法立刻等同于热门. 另一个可能令人遗憾的视觉技术是「扩增实境」(Augmented Reality,简称AR),之前有人觉得,AR可能就只能用在一些很炫的行销活动而已. 错,有一些评论家,竟然 已经将AR和「平板电脑」画为同一级,都是2011年新的一年的 最、爆、趋、势.

带增强现实(AR)功能的GPS

- Fung - 煎蛋
日本 Pioneer 公司近日展示了他们先进的 GPS 导航仪技术,在这里面,我们看到了增强现实系统的应用. 在他们最新合作的汽车中,一个仪表盘会直接通过汽车前置摄像头,获取路面情况,并实时分析车距、车速等交通数据,且直接显示到摄像头的实时信息上. 这个东西能让开车变得更加简单,简单得就好似在玩山脊赛车一般.

Gnome-Pie快捷键体验增强

- Tony - 文章栏目
Gnome-Pie是一个Gnome快捷键增强工具,你可以通过修改快捷键来调用工具自带的调用功能,附带炫酷的特效,能切换主题,工具自带众多优秀的主题. 支持Unity及Unity-2d.

去广告hosts 绿色增强版

- 堕海之羽 - 姥姥精品软件坊
       本次去广告hosts 在原来的网页去广告之外,特别新增视频网站(如优酷、土豆等)视频播放前广告屏蔽,从此看视频就清爽多了.        本去广告hosts较之前提供的屏蔽内容大大增多(296KB ),几乎可以屏蔽绝大部分的网页广告了.        使用方法:打开C:\WINDOWS\system32\drivers\etc,先备份原hosts文件,然后复制新的去广告hosts文件覆盖原文件,之后注销或重启计算机即可;不懂或嫌麻烦的,直接运行“网页广告屏蔽.exe”即可,无需注销或重启.

文件上传的渐进式增强

- - 阮一峰的网络日志
文件上传是最古老的互联网操作之一. 20多年了,它几乎没变,还是原来的样子:操作麻烦、缺乏交互、用户体验不佳. 在这个新技术日新月异的时代,显得非常落伍. 网页开发者们想了很多办法,试图提升文件上传的功能和操作体验,在各种Javascript库的基础上,开发了五花八门的 插件. 可是,由于不同浏览器之间的差异,缺乏统一接口,这些插件要么用起来很麻烦,要么不能普遍适用.

Spring4.1新特性——Spring MVC增强

- - ITeye博客
Spring4.1新特性——综述. Spring4.1新特性——Spring核心部分及其他. Spring4.1新特性——Spring缓存框架增强. Spring4.1新特性——异步调用和事件机制的异常处理. Spring4.1新特性——数据库集成测试脚本初始化. Spring4.1新特性——Spring MVC增强.