使用 SRI 增强 localStorage 代码安全

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

不执行、不报错

上面的测试结果表明:

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

        //计算 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.all_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 中的代码被修改。

专题「浏览器」的其他文章 »

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

Chrome 81 正式发布 !消灭混合内容最后一步~

Chrome 81 于前天正式发布了,这个版本其实最初是计划在 3 月 17 号 发布的,但由于冠状病毒(COVID-19)爆发而导致推迟到了现在。Chrome 81 的延迟也扰乱了 Google 正常的六周发布时间表。因此 Google 此前也宣布,下一个版本将直接跳过 Chrome 82 ,直接发布 Chrome 83。 下面我就来带大家看看 Chrome 81 有哪些重要的更新。

发布于:11月以前  |  1027次阅读  |  详细内容 »

花椒前端基于 Docker 的 SSR 持续开发集成环境实践

发布于:11月以前  |  936次阅读  |  详细内容 »

当浏览器全面禁用三方 Cookie

苹果公司前不久对 Safari 浏览器进行一次重大更新,这次更新完全禁用了第三方 Cookie,这意味着,默认情况下,各大广告商或网站将无法对你的个人隐私进行追踪。而微软和 Mozilla 等也纷纷采取了措施禁用第三方 Cookie,但是由于这些浏览器市场份额较小,并没有给市场带来巨大的冲击。

发布于:11月以前  |  958次阅读  |  详细内容 »

H5 直播的疯狂点赞动画是如何实现的?

直播有一个很重要的互动:点赞。 为了烘托直播间的氛围,直播相对于普通视频或者文本内容,点赞通常有两个特殊需求: 点赞动作无限次,引导用户疯狂点赞 直播间的所有疯狂点赞,都需要在所有用户界面都动画展现出来(广播用户使用websocket消息)

发布于:11月以前  |  975次阅读  |  详细内容 »

探索 Serverless 中的前端开发模式

最近关于 Serverless 的讨论越来越多。看似与前端关系不大的 Serverless,其实早已和前端有了渊源,并且将对前端开发模式产生变革性的影响。本文主要就根据个人理解和总结,从前端开发模式的演进、基于 Serverless 的前端开发案例以及 Serverless 开发最佳实践等方面,与大家探讨 Serverless 中的前端开发模式。本人也有幸在 QCon2019 分享了这一主题。

发布于:11月以前  |  1018次阅读  |  详细内容 »

聊一下 Chrome 新增的可信类型(Trusted types)

Chrome 即将在 83 版本新增一个可信类型(Trusted types),其号称这一特性可以全面消除 DOM XSS,为此我连夜分析了一波,下面我就带大家来具体看一下这个特性:

发布于:11月以前  |  1217次阅读  |  详细内容 »

前端需要了解的9种设计模式

设计模式是对软件设计开发过程中反复出现的某类问题的通用解决方案。设计模式更多的是指导思想和方法论,而不是现成的代码,当然每种设计模式都有每种语言中的具体实现方式。学习设计模式更多的是理解各种模式的内在思想和解决的问题,毕竟这是前人无数经验总结成的最佳实践,而代码实现则是对加深理解的辅助。

发布于:11月以前  |  967次阅读  |  详细内容 »

为什么你的网页需要 CSP?

内容安全策略(CSP)是一个 HTTP Header,CSP 通过告诉浏览器一系列规则,严格规定页面中哪些资源允许有哪些来源, 不在指定范围内的统统拒绝。

发布于:11月以前  |  972次阅读  |  详细内容 »

10 种跨域解决方案(附终极方案)

嗯。又来了,又说到跨域了,这是一个老生常谈的话题,以前我觉得这种基础文章没有什么好写的,会想着你去了解底层啊,不是很简单吗。但是最近在开发一个 「vscode 插件」 发现,当你刚入门一样东西的时候,你不会想这么多,因为你对他不熟悉,当你遇到不会的东西,你就是想先找到解决方案,然后通过这个解决方案再去深入理解。

发布于:11月以前  |  1683次阅读  |  详细内容 »

Chrome 运行时性能瓶颈分析

发布于:11月以前  |  956次阅读  |  详细内容 »

移动 Web 最佳实践(干货长文,建议收藏)

笔者在公司用 web 技术开发移动端应用已经有一年多的时间了,开始主要以 vue 技术栈配合 native 为主,目前演进成 vue + react native 技术架构,vue 主要负责开发 OA 业务,比如报销、出差、crm 等等,react native 主要负责即时通信部分,是在 mattermost-mobile的基础上修改的(mattermost 是一个开源的即时通讯方案)。

发布于:11月以前  |  1012次阅读  |  详细内容 »

你知道小程序最后上线的代码是什么样子吗?

我们知道小程序最开始出来的时候,包括到现在;官方给出的写法是js对应逻辑层,wxml也自己尝试了一套DSL自定义视图的模板语法,写法雷同vue的template语法:

发布于:11月以前  |  1091次阅读  |  详细内容 »

一文了解文件上传全过程(1.8w字深度解析,进阶必备)

本文比较长可能需要花点时间去看,需要有耐心,我采用自顶向下的方式,所有示例会先展现出你熟悉的方式,再一层层往下, 先从请求端是怎么发送文件的,再到接收端是怎么解析文件的。

发布于:11月以前  |  1062次阅读  |  详细内容 »

不可错过的实用前端工具

给大家整理了 25 个前端相关的学习网站和一些靠谱的小工具,包括一些小游戏、教程、社区网站和博客,以及一些资源网站,希望可以帮助到大家!

发布于:11月以前  |  960次阅读  |  详细内容 »

理解 WebView

我们通常使用 Chrome, Firefox, Safari, Internet Explorer 和 Edge 等浏览器来浏览网页。你也许正在使用其中一种浏览器阅读本文!虽然浏览器对于访问互联网内容的任务来说非常流行,它们还有一些我们从未过多关注过的竞争对手。这些竞争对手以 WebView 的形式被我们所熟知。这片文章将讲解 WebView 的神秘之处以及为什么它这么棒。

发布于:11月以前  |  989次阅读  |  详细内容 »

前端必备的 Terminal 终端进阶技巧

本文我会首先带你零基础认识终端,了解其常见用写法,告诉你新手入门哪些地方可以碰,那些地方是雷区。

发布于:11月以前  |  965次阅读  |  详细内容 »

Facebook 前端技术栈重构分享

当我们考虑如何构建一个新的网络应用—一个为现代浏览器设计的、具有用户对Facebook(我们已知的)所有期望的功能,我们现有的技术栈无法支持我们所需要的类似于桌面应用的感觉和性能。

发布于:11月以前  |  913次阅读  |  详细内容 »

用 esbuild 让你的构建压缩性能翻倍

发布于:11月以前  |  1727次阅读  |  详细内容 »

Deno 1.0正式发布!它能替代 NodeJS 吗?

发布于:11月以前  |  909次阅读  |  详细内容 »

Node进阶——之事无巨细手写Koa源码

发布于:11月以前  |  955次阅读  |  详细内容 »

最多阅读

为Electron程序添加运行时日志 1年以前  |  9533次阅读
Node.js下通过配置host访问URL 2年以前  |  3624次阅读
js动态创建类和实例化 2年以前  |  2843次阅读
初探 React 组件 2年以前  |  2721次阅读
wordpress标签页的制作 2年以前  |  2715次阅读
500行PHP代码搞定富文本安全过滤 2年以前  |  2610次阅读
22个HTML5的初级技巧 2年以前  |  2535次阅读
浅谈浏览器的原生拖拽事件 2年以前  |  2490次阅读
使用 SRI 增强 localStorage 代码安全 2年以前  |  2478次阅读
CSS清除浮动 2年以前  |  2445次阅读
第三版主题上线 2年以前  |  2440次阅读
利用服务器返回header来传输数据 2年以前  |  2416次阅读
【译】V8 团队眼中的 ES6、ES7及未来 2年以前  |  2383次阅读
获取元素的计算的样式 2年以前  |  2375次阅读
2014年度总结 2年以前  |  2344次阅读