关闭

第三方CSS安全吗?

时间: 2019-01-23阅读: 679标签: 安全

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

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

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


第三方图片

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

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

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


第三方脚本

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

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

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

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

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

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


第三方css

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

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

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

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


键盘记录器

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

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

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

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

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

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

此外,还有许多基于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 class="banner users-birthday-today"></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+71;
}

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

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


结论:第三方内容并不安

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

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

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

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

如果你对这种安全技术感兴趣,包括滚动条技巧的更多细节,可以去看看Mathias Bynens在2014年的演讲,Mike West在2013年的演讲,或Mario Heiderich等人的2012年论文。 没错,这些技术并不是最新的。


原文:https://jakearchibald.com/201...
翻译:疯狂的技术宅  
本文首发微信公众号:jingchengyideng 

 

站长推荐

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

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

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

关闭

浏览器显示“网站连接不安全”,是什么原因?

Chrome 浏览器显示“网站连接不安全”,这可能是您最近访问网站时经常遇到的问题,浏览器地址栏中域名前面显示圆圈i图标和“不安全”字样,点击这个字样,就会看到红字警告“你与此网站之间建立的连接不安全”,这是怎么回事?

AJAX请求真的不安全么?谈谈Web安全与AJAX的关系。

AJAX请求真的不安全么?AJAX请求哪里不安全?怎么样让AJAX请求更安全?本文包含的内容较多,包括AJAX,CORS,XSS,CSRF等内容,要完整的看完并理解需要付出一定的时间。

Web 安全漏洞之文件上传

文件上传漏洞是指网络攻击者上传了一个可执行的文件到服务器上,当开发者没有对该文件进行合理的校验及处理的时候,很有可能让程序执行这个上传文件导致安全漏洞

浅谈前端安全

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

14个Linux系统安全小妙招

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

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

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

js安全问题:不安全的JS

在某些特别的场景下,我们需要编译执行外部输入的JS代码。在浏览器端,我们可以借助new Function 、eval等API。而在 node 端,我们可以借助vm模块实现一个沙箱,运行外部输入的JS 代码。但无论是浏览器端,还是node端

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

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

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

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

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

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

点击更多...

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