容易被忽略的CSS安全性 [每日前端夜话(0x0B)]

每日前端夜话,陪你聊前端。每天晚上18:00准时推送

翻译:疯狂的技术宅 原文:https://jakearchibald.com/2018/third-party-css-is-not-safe/

前一段时间,有很多关于用CSS构建的“键盘记录器”的讨论(源代码见:https://github.com/maxchehab/CSS-Keylogging)。

有些人要求浏览器“修复”它。 另有一些人挖掘得更深一些,发现它只影响使用React及类似框架编写的网站,并为此指责React。 不过真正的问题在于第三方内容是不是“安全的”。

下面我们逐一分析这些第三方内容。

第三方图片

如果因为我信任example.com,就在自己的代码中包含上述内容。那么 他们可能会删除资源,从而给我返回一个404,使我的网站看起来支离破碎,从而辜负了这种信任。同时他们也有可能会用一些不恰当的内容取代原来的图片。

不过图像的影响仅限于元素本身的内容框。 我可以向自己的用户解释“这是来自example.com的内容,如果它变冒犯了你,那是他们的错,可别来找我”,并寄希望于用户们能够相信我。 但是这种事肯定不会影响我数据库中密码字段之类的东西。

第三方脚本

与图片相比,第三方脚本有更多的控制权。 如果我的代码中包含上述内容,就会给example.com完全控制自己的网站的机会。 他们能:

  • 读取/更改页面内容。
  • 监控用户交互的每一个步骤。
  • 运行计算量很大的代码(比如用你的浏览器挖矿)。
  • 盗取用户的cookie向我的来源发出请求,并转发响应数据。
  • 读取/更改原始存储。
  • 几乎可以做任何他们想做的事。

“原始存储”位非常重要。 如果脚本影响了IndexedDB或缓存存储API,即使你把脚本删掉,攻击也可能会仍然继续。

如果你在自己的代码中引用了来自其他来源的脚本,那么必须绝对信任它们,并保证其安全性。

如果遇到恶意脚本,则应使用 Clear-Site-Data标头清除所有站点数据。

第三方CSS

CSS的作用更接近于脚本而不是图像。和脚本一样,它适用于整个页面。 它可以:

  • 删除/添加/修改页面内容。
  • 根据页面内容发出请求。
  • 对许多用户交互作出响应。

CSS不能修改原始存储,你不能用CSS写一个挖矿程序(也有可能,或许我还不知道),但恶意CSS仍然可以造成很大的破坏。

键盘记录器

咱们从最开始的那个问题开始

如果输入的 value属性以 p结尾,上面的代码将触发对 /password?p的请求。 对每个字符都会执行此操作,这样你会获得大量键盘输入的数据。

默认情况下,浏览器不会将用户输入的值存储在 value属性中,因此攻击往往在同步这些值的内容时发生,例如React。

为了缓解这种情况,React可以使用另一种同步密码字段的方法,或者浏览器可以限制与密码字段的 value属性匹配的选择器,但这仅仅是一种虚假的安全感。 你只不过是解决了一个特定的问题,但其他情况下一切照旧。

如果 React 切换到使用data-value属性,则上述手段将失败。如果站点将输入更改为type ="text",那么用户可以看到他们正在输入的内容,则这种手段失败。 如果站点创建<better-password-input>并将值作为属性公开,同样上述手段失败。

此外,还有许多基于CSS的攻击:

消失的内容

这是一个极端的例子,但想象一下,如果第三方代码为你的一小部分用户做了这种事,会出现什么样的后果:将会侵蚀掉用户对你的信任,同时很难排查问题到底出在何处。

更加腹黑的黑客可能会偶尔删除“购买”按钮,或着重新排列内容中的段落。

添加内容

哎呀,你这么快就涨价了!

移除内容

把一个有“删库跑路”功能的按钮设为不可看,然后再把它放在用户可能会点击的地方。

值得庆幸的是,如果按钮执行的是后果非常严重的操作,该网站可能会首先显示确认对话框。 没关系,只需使用更多的CSS来诱骗用户单击“是的我确定!”按钮而不是“哦天呐!不是!”按钮。

想象一下,如果浏览器确实试图消除“键盘记录”这种小伎俩的影响。攻击者还可以在页面上放一个非密码文本输入框(可能是搜索字段)并将其覆盖在密码输入框之上,呵呵,现在他们又回来了。

读取属性

你担心的可不仅仅是密码。 一些私有内容可能会保存在属性中:

所有这些都可以被CSS选择器设为目标,并且可以把结果发到某个服务器上。

监控互动

可以将hover和active等动作发送回服务器。 适当的使用CSS,你可以很好地了解用户想要干什么。

读取文本

在这种情况下,如果页面包含q,将发送请求。 你可以为不同的文字创建大量的这种请求,并可以定位特定的元素。 字体还可以包含连字,因此还可以检测字符序列。 你甚至可以将字体技巧与滚动条检测相结合,从而能推断出更多相关内容的信息。

结论:第三方内容并不安全

这些只是我所知道的一些技巧,我相信还会有更多类似的小技巧。

第三方内容在其沙箱中具有很高的影响力。 虽然图像或沙盒iframe有着非常小的沙箱,但脚本和样式的作用范围却影响你的整个页面,甚至是整个站点。

如果你担心用户会欺骗你的网站去加载第三方资源,可以使用CSP(内容安全策略:https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)保证安全,从而限制从中获取图像,脚本和样式的位置。

还可以使用子资源完整性来确保脚本/样式的内容与特定的哈希匹配,否则将无法执行。

如果你对这种安全技术感兴趣,包括滚动条技巧的更多细节,可以去看看Mathias Bynens在2014年的演讲(https://vimeo.com/100264064#t=1290s),Mike West在2013年的演讲(https://www.youtube.com/watch?v=eb3suf4REyI),或Mario Heiderich等人的2012年论文(PDF:http://www.nds.rub.de/media/emma/veroeffentlichungen/2012/08/16/scriptlessAttacks-ccs2012.pdf)。 没错,这些技术并不是最新的。

本文分享自微信公众号 - 京程一灯(jingchengyideng)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-01-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android开发与分享

【前端】CSS : position

正常的布局行为,即元素在文档常规流中当前的布局位置。此时top, right, bottom, left和 z-index 属性无效。

10710
来自专栏dotNET匠人的技术自留地

改进博客园Markdown显示功能(加代码行号、显示代码所用编程语言)

博客园的markdown模式下的代码高亮功能使用的是highlight.js,没有行号和显示相应编程语言的功能,只好自己将其改造了一下(将这两种功能一并实现了)...

42650
来自专栏Android开发与分享

【前端】CSS : 对齐、居中

文本、元素的对齐和居中在开发中经常会用到。本文分别对文本、元素的对齐、居中进行介绍

22120
来自专栏小轻论坛

小白也能轻松为网页加各种部件

小轻相信,许多人对网页是很感兴趣并且是很想学习的。当初创立小轻网及小轻论坛网页就是为了帮助大家学习一些技术经验,同时也学会如何去找资源。今天,我们给原有网页加一...

20530
来自专栏dotNET匠人的技术自留地

Chorme浏览器渲染MathJax时出现竖线的解决方法

新版的Chorme浏览器在解析css时,会对其中的值进行向上取整(四舍五入),而其他浏览器不会,且Chrome较旧版本(比如Chrome 40 稳定版)也是不会...

12420
来自专栏前端说吧

css特效 - 环形文字

32130
来自专栏Android开发与分享

【前端】CSS : 入门

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。

10420
来自专栏SeanCheney的专栏

解析网页速度比较(BeautifulSoup、PyQuery、lxml、正则)

用标题中的四种方式解析网页,比较其解析速度。复习PyQuery和PySpider,PySpider这个项目有点老了,现在还是使用被淘汰的PhantomJS。 ...

21920
来自专栏Android开发与分享

【前端】CSS : display

设置了该属性之后设置高度、宽度都无效,同时text-align属性设置也无效,但是设置了line-height会让inline元素居中

12410
来自专栏Android开发与分享

【前端】CSS : float

注:当一个元素浮动之后,从普通文档流中脱离,然后向左或者向右平移,一直平移直到碰到了所处的容器的边框,或者碰到另外一个浮动的元素。

12010

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励