第三方 CSS 并不安全

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

最近一段时间,关于 通过 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

关闭

网站被劫持的方式都有哪些?

网络安全日益严峻,站长朋友们多多少少都遇到过被黑被劫持的经历,对于老老实实做人,认认真真做站的朋友来说,好不容易做出了一点成绩,一劫持就又回到解放前了,本期我们一起来探讨常见的网站被黑被劫持的手段有哪些

十大开源Web应用安全测试工具

Web应用安全测试可对Web应用程序执行功能测试,找到尽可能多的安全问题,大大降低黑客入侵几率。在研究并推荐一些优秀的开源Web应用安全测试工具之前,让我们首先了解一下安全测试的定义、功用和价值。

前端安全之xss攻击

XSS 攻击指通过巧妙的方法注入恶意指令代码到网页,使用户加载并执行攻击者恶意制造的代码。危害有什么?跳转到广告页面,页面注入广告等等。导致公司域名被其他平台拉黑,从而使业务受损。

web安全方案

完善的内容安全策略(CSP)是前端应用程序安全的基石。CSP是浏览器中引入的一种标准,用于检测和缓解某些类型的代码注入攻击,包括跨站点脚本(XSS)和点击劫持。

web安全之网络安全

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

利用CSS注入(无iFrames)窃取CSRF令牌

要做到无iFrame,我将使用一种类似于之前我讨论过的方法:我将创建一个弹窗,然后在设置计时器后更改弹出窗口的位置。使用这种方法,我仍然可以加载受害者的CSS,但我不再依赖于受害者是否允许iFrame。

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

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

Web前端安全同样不可忽视,编写前端代码时保持安全意识

随着网络的普及,黑客进行网络攻击的手段越来也多,越来越复杂。前端的HTML、JavaScript、CSS、Flash等技术变成了前端攻击者和开发者的战场,网站安全问题也开始向前端倾斜。

一些安全相关的HTTP header

HTTP Strict-Transport-Security,简称为HSTS。X-Frame-Options:是否允许一个页面可在<frame>、<iframe>、<object>中展现的标记。X-XSS-Protection作用:防范XSS攻击。

访问http网站Safari提示网站不安全怎么办?

macOS和iOS上的Safari在所有通过HTTP连接的地址栏中会显示“不安全”的警告。去年,谷歌Chrome和火狐MozillaFirefox是最先显示这种警告的主流浏览器。

点击更多...

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