第三方 CSS 并不安全

时间: 2018-03-06阅读: 903标签: 安全

最近一段时间,关于 通过 CSS 创建 “keylogger”(键盘记录器) 的讨论很多。

有些人呼吁浏览器厂商去“修复”它。有些人则深入研究,表示它仅能影响通过类 react 框架建立的网站,并指责 react。而真正的问题却在于认为第三方内容是“安全”的。


第三方图片

<img src="https://example.com/kitten.jpg">

如果我将上述代码引入我的文件中,即表示信任 example.com。对方可能会删除资源,给我一个 404,导致网站不完整,从而破坏这种信任关系。或者,他们可能会用其他非预期的数据来替代小猫图片的数据

但是,图片的影响仅限于元素本身的内容区域。我可以向用户解释并希望用户相信,“此处的内容来自 example.com,如果它有误,则是原站点的问题,并不是本站造成的”。但这个问题肯定不会影响到密码输入框等内容。


第三方脚本

<script src="https://example.com/script.js"></script>

与图片相比,第三方脚本则有更多的控制权。如果我将上述代码引入我的文件中,则表示我赋予了 example.com 完全控制我的网站的权限。该脚本能:

  • 读取/修改页面内容。
  • 监听用户的所有交互。
  • 运行耗费大量计算资源的代码(如 cryptocoin 挖矿程序)。
  • 通过向本站发请求,这样能附带用户的 cookie,转发响应。(译注:盗取用户的 cookie 及其他数据
  • 读取/修改本地存储。
  • ......可以做任何对方想做的事情。

“本地存储”非常重要。如果脚本通过 IndexedDB 或缓存 API 发起攻击,则即使在删除脚本后,攻击仍可能在整个站点内继续存在。

如果你引入了其他站点的脚本,则必须绝对相信对方及对方的防护能力。

如果你遭到恶意脚本的攻击,则可设置 Clear-Site-Data header(清空站点数据响应头) 清除站点所有数据


第三方css

<link rel="stylesheet" href="https://example.com/style.css">

相比图片,css 在能力上更接近脚本。像脚本一样,它适用于整个页面。它可以:

  • 删除/添加/修改页面内容。
  • 根据页面内容发起请求。
  • 可响应多种用户交互。

虽然 css 不能修改本地存储,也不能通过 css 运行 cryptocoin 挖矿程序(也许是可能的,只是我不知道而已),但恶意 css 代码仍然能造成很大的损失。


键盘记录器

从引起广泛关注的代码开始讲起:

input[type="password"][value$="p"] {
  background: url('/password?p');
}

如果输入框的 value 属性值以 p 结尾,上述代码将会向 /password?p 发起请求。每个字符都可触发这个操作,通过它能获取到很多数据

默认情况下,浏览器不会将用户输入的值存储在 value 属性中,因此这种攻击需要依赖某些能同步这些值的东西,如 react

要应对这个问题,react 可用另一种同步密码字段的方式,或浏览器可限制那些能匹配密码字段属性的选择器。但是,这仅仅是一种虚假的安全。你只解决了在特殊情况下的该问题,而其他情况依旧。

如果 react 改为使用 data-value 属性,则该应对方法无效。如果网站将输入框更改为 type="text",以便用户可以看到他们正在输入的内容,则该应对方法无效。如果网站创建了一个 <better-password-input> 组件并暴露 value 作为属性,则该应对方法无效。

此外,还有很多其他的基于 css 的攻击方式:


消失的内容

body {
  display: none;
}

html::after {
  content: 'HTTP 500 Server Error';
}

以上是一个极端的例子,但想象一下,如果第三方仅对某一小部分用户这样做。不但你很难调试,还会失去用户的信任。

更狡猾的方式如偶尔删除“购买”按钮,或重排内容段落。


添加内容

.price-value::before {
  content: '1';
}

哦,价格被标高了。


移动内容

.delete-everything-button {
  opacity: 0;
  position: absolute;
  top: 500px;
  left: 300px;
}

上面的按钮能做一些重要的操作,设置其为不可见,然后放在用户可能点击的地方。

值得庆幸的是,如果按钮的操作确实非常重要,网站可能会先显示确认对话框。但也不是不可绕过,只需使用更多的 css 来欺骗用户点击 “确定” 按钮而不是“取消”按钮即可。

假设浏览器确实采用上面的应对方法解决“键盘记录器”的问题。攻击者只需在页面上找到一个非密码文本输入框(可能是搜索输入框)并将其盖在密码输入框上即可。然后他们的攻击就又可用了。


读取属性

其实,你需要担心的不仅仅是密码输入框。你可能在属性中保存着其他的隐藏内容:

<input type="hidden" name="csrf" value="1687594325">
<img src="/avatars/samanthasmith83.jpg">
<iframe src="//cool-maps-service/show?st-pancras-london"></iframe>
<img src="/gender-icons/female.png">
<div></div>

所有这些都可以通过 css 选择器获取,且能发出请求。


监听交互

.login-button:hover {
  background: url('/login-button-hover');
}

.login-button:active {
  background: url('/login-button-active');
}

可将 hover 和 active 状态发送到服务器。通过适当的 css,你就能获取到用户意图。


读取文本

@font-face {
  font-family: blah;
  src: url('/page-contains-q') format('woff');
  unicode-range: U+85;
}

html {
  font-family: blah, sans-serif;
}

在这种情况下,如果页面内有 q 字符,则会发送请求。你可以为不同的字符,并针对特定的元素,创建大量不同的字体。字体也可以包含 ligature(连字),所以你可以在开始检测字符序列。你甚至可以通过将字体技巧与滚动条检测结合起来 来推断内容。

译注:关于 ligature(连字), 可查看 Wikipedia Typographic Ligature


第三方内容不安全

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

第三方内容在其沙箱区域内具有强大的能力。一张图片或沙盒化的 iframe 仅在一个小范围内的沙箱中,但脚本和样式的范围却是你的页面,甚至是整个站点。

如果你担心恶意用户诱使你的网站加载第三方资源,可以通过 CSP 用作防护手段,其可以限制加载图片,脚本和样式的来源。

你还可以使用 Subresource Integrity(子资源完整性 ) 来确保脚本/样式的内容匹配特定的 hash,否则将不加载。感谢 Hacker News上的Piskvorrr 提醒我!

如果你想了解更多如上述的 hack 技巧,包括滚动条技巧,更多信息请参阅 Mathias Bynens' talk from 2014Mike West's talk from 2013,或 Mario Heiderich et al.'s paper from 2012(PDF)。是的,这不是什么新东西。


原文出处 Third party CSS is not safe 

翻译来源:http://www.zcfy.cc/article/third-party-css-is-not-safe

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/466

贯彻 10 项原则,构建 Linux 系统安全体系

通过大量的实践经验,我们总结出 10 个最关键且有效的安全原则,分别是纵深防御、运用 PDCA 模型、最小权限法则、白名单机制、安全的失败、避免通过隐藏来实现安全、入侵检测、不要信任基础设施

谈 target=‘_blank’的安全问题

大家都喜欢target=_blank, 因为新页面打开不影响原来的页面。但是这个存在安全问题, 由target=_blank打开的页面, 可以通过window.opener访问原来的窗口。遍可以简单的将网页导航到其他网站, 这就存在很多的安全隐患了, 比如钓鱼,这种问题解决起来也很简单, 在链接中加入rel=noreferrer noopener属性就可以了

利用HTML5标签进行DDoS攻击的新方法揭秘

在此次攻击活动中,DDoS攻击请求峰值达到了7500次请求/秒,在大概4个小时内攻击者总共利用了4000多个不同的用户向攻击目标发送了超过7000万次恶意请求。Imperva的研究人员在其发布的安全分析报告中指出

企业网站怎么才能防御DDOS***?

他想要做一个网络安全防护,因为网站设计到了支付这一块的业务,所以要做网络安全防护,想要实时监测,如果有***发生需要第一时间知道情况。墨者安全告诉他可以的,那今天就讲讲企业网站怎么才能防御DDOS***?

信息泄漏时代,如何让自己的密码更安全?

密码的重要性,相信大家都不言而喻。而密码泄漏或信息泄漏,经常是层出不穷地出现,令人防不胜防。所以,一个强大而复杂的密码是保证自己账户安全的第一步。

Web安全测试检查单

Web安全测试检查单。上传功能:绕过文件上传检查功能,上传文件大小和次数限制。注册功能:注册请求是否安全传输,注册时密码复杂度是否后台检验,激活链接测试

浅谈前端安全

将Web安全问题按照发生的区域来分类,发生在浏览器、Web页面中的安全问题就是前端安全问题。同源:URL由协议、域名、端口和路径组成,如果两个URL的协议、域名和端口相同,则表示他们同源。

14个Linux系统安全小妙招

对于互联网IT从业人员来说,越来越多的工作会逐渐转移到Linux系统之上,这一点,无论是开发、运维、测试都应该是深有体会。曾有技术调查网站W3Techs于2018年11月就发布一个调查报告,报告显示Linux在网站服务器的系统中使用率高达37.2%

JavaScript防流量劫持【前端安全】

在网页开发的访问过程中,http是我们主要的访问协议。我们知道http是一种无状态的连接。即没有验证通讯双方的身份,也没有验证信息的完整性,所以很容易受到篡改

web安全之网络安全

web安全是网络安全的一部分,怎么说呢,网络安全是个大范围,可以引申为互联网安全。包括软硬件在内,例如其中的数据安全就是指从数据的产生-传输-存储等环节都要保证其安全性。那么web安全就是特指web层面的

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广