LOL前端重构规范

# WEB前端页面安全指引

安全问题无小事，web前端是Web安全的第一道屏障，本篇结合真实案例及相关资料，汇总整理了前端方面的安全防护措施,请大家一定要重视。如有遇到新的问题，欢迎反馈。

安全是相对于风险来讲的，风险一直伴随着互联网，攻击者出于不同目的，通过恶意代码、漏洞、网页仿冒等各种手段对WEB进行攻击，防御者不断通过各种修复方法来应对，随着互联网的发展，大家的安全意识也越来越强，比如HTTPS协议的使用就是提升web安全的一项措施，但是安全问题仍遍布互联网的角角落落，需要我们每个人一起努力守护。下面的内容主要收集了WEB前端方面发现的安全问题及修复办法，了解之前，让我们先来看看几条防御原则：

  • 不要在页面中插入任何不可信数据，除非这些数据已经据根据编码规则进行了编码

HTML 里有太多地方容易形成XSS漏洞而且形成漏洞的原因又有差别，比如有些漏洞发生在HTML标签里，有些发生在HTML标签的属性里，还有的发生在页面的<script>里，甚至有些还出现在CSS里，再加上不同的浏览器对页面的解析或多或少有些不同，使得有些漏洞只在特定浏览器里才会产生。关于XSS的漏洞，想要了解详细内容可以阅读 XSS Filter Evasion Cheat Sheet；如果英文阅读不便，可以阅读 XSS防御备忘录中文版

  • 页面中不要引用外部CDN资源的JavaScript文件、CSS文件
  • 对用户输入的内容进行安全性验证

# 常见的前端安全问题

前端的安全问题主要集中在跨站脚本攻击(XSS)这一类，产生XSS漏洞的原因各种各样，对于漏洞的利用也是花样百出，我们先来认识下它。

跨站脚本攻击（Cross Site Scripting）为不和 CSS混淆，故将跨站脚本攻击缩写为XSS。恶意攻击者往Web页面里插入恶意Script代码，当用户浏览该页之时，嵌入其中Web里面的Script代码会被执行，从而达到恶意攻击用户的目的。

防范XSS

  • 对输入进行验证
  • 对输出进行编码

# URL跳转漏洞

借助未验证的URL跳转，将应用程序引导到不安全的第三方区域，从而导致的安全问题。

由于是从可信的站点跳转出去的，用户会比较信任，所以跳转漏洞一般用于钓鱼攻击，通过转到恶意网站欺骗用户输入用户名和密码盗取用户信息，或欺骗用户进行金钱交易；

也可能引发的XSS漏洞（主要是跳转常常使用302跳转，即设置HTTP响应头，Locatioin: url，如果url包含了CRLF，则可能隔断了http响应头，使得后面部分落到了http body，从而导致xss漏洞）。

修复方法

漏洞检测

  • 修改参数中的合法URL为非法URL，然后查看是否能正常跳转或者响应包是否包含了任意的构造URL

# target="_blank" 存在跳转风险

带有 target="_blank" 跳转的网页拥有了浏览器 window.opener 对象赋予的对原网页的跳转权限，这可能会被恶意网站利用，例如一个恶意网站在某 UGC 网站 Po 了其恶意网址，该 UGC 网站用户在新窗口打开页面时，恶意网站利用该漏洞将原 UGC 网站跳转到伪造的钓鱼页面，用户返回到原窗口时可能会忽视浏览器 URL 已发生了变化，伪造页面即可进一步进行钓鱼或其他恶意行为...

修复方法

为 target="_blank" 加上 rel="noopener noreferrer" 属性

# JQUERY的下列方法存在XSS的风险，在使用前应该对输入的内容进行编码或检查

.html(val) | $("#MyH").html("as>/" <img src=abc.jpg onerror='alert(0);'>alert('s');"); .append(val)|$("#MyH").append("<strong>Hello</strong><script>alert(3);"); . prepend(val)|$("#MyH").prepend("<strong>Hello</strong><script>alert(3);"); . before(val)|$("#MyH").before("<strong>Hello</strong><script>alert(3);"); .replaceWith(val)|$("#MyH").replaceWith("<strong>Hello</strong><script>alert(3);"); . after(val)|$("#MyH").after("<strong>Hello</strong><script>alert(3);");

修复方法

  • 在使用前应该对输入的内容进行编码或检查
  • 使用.text()方法替换.html()方法操作元素内容

# 防御/修复方法

  • 接入防御JS代码 https://js.aq.qq.com/js/aq_common.js
  • 使用https协议，页面中的资源的引用目前使用自适应的写法

# 检测工具

  • 代理类检测 Webscarab，OWASP-开放Web应用程序安全项目
  • 综合扫描类工具 skipfish，谷歌开源的
  • Web安全测试平台 Vega Platform
  • 抓包工具 - HttpWatch
  • AppScan

← 小程序规范 →