xss

linliminggit · May 6, 2019 · 36a1e5c · 36a1e5c
1 parent 7121e73
commit 36a1e5c
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 12 deletions.
diff --git a/Security/README.md b/Security/README.md
@@ -7,6 +7,15 @@
 
 1. 进入 XSS 目录，运行 server.js (启动本地服务器)
 2. 在浏览器中访问 localhost:3000/login.html
-3. 使用用户名/密码: yvette / yvette 登录
-4. 登录之后，会跳向: `http://localhost:3000/hello?type=<script>alert('恶意内容')</script>`  (此时，我们还可以获取到 cookie 信息)
-5. 使用错误的用户名/密码进行登录(随便输入什么)，会跳向：`http://localhost:3000/error?type=<script>alert('恶意内容')</script>`  (显然，用户没有登录成功，没啥好攻击的，此处只是方便查看如何防范反射型XSS攻击)
+3. 使用错误的用户名/密码进行登录(例如: 123 / 123)，会跳向：`http://localhost:3000/error?type=<script>alert('恶意内容')</script>`  
+4. 使用正确的用户名: yvette / yvette 登录，会跳向: `http://localhost:3000/welcome?type=<script>alert('恶意内容')</script>` ;但是我们已经进行了转义，不会再被攻击
+
+> DOM 型XSS攻击
+
+1. 浏览器中访问 localhost:3000
+2. 输入评论内容: 2222<script>alert(1)</script>
+
+    当然啦，如果登录状态，还可以拿cookie等信息~
+    还可以悄悄引入其它的js文件过来，可怕~
+
+3. 我们可以对输入的内容进行转义，这样就不会被攻击啦~
diff --git a/Security/XSS/server.js b/Security/XSS/server.js
@@ -35,17 +35,16 @@ app.post('/api/login', (req, res) => {
 });
 
 
-//1.反射型XSS攻击: http://localhost:3000/hello?type=<script>alert('恶意内容')</script>
+//1.反射型XSS攻击: http://localhost:3000/welcome?type=<script>alert('恶意内容')</script>
 //chrome能够检测到Url上的XSS攻击(可在firefox或者是其它浏览器测试)
-app.get('/hello', function(req, res) {
-    res.send(`${req.query.type}`); //拿到 url 上的 type 参数，并返回给前端    
-
+app.get('/welcome', function(req, res) {
+    //对查询参数进行编码，避免XSS攻击
+    res.send(`${encodeURIComponent(req.query.type)}`); 
     //对type查询参数进行编码，即可解决当前的XSS攻击(可重启服务查看)
     // res.send(`${encodeURIComponent(req.query.type)}`);
 });
 
 app.get('/error', function(req, res) {
-    //对查询参数进行编码，避免XSS攻击
-    res.send(`${encodeURIComponent(req.query.type)}`); 
+    res.send(`${req.query.type}`); //拿到 url 上的 type 参数，并返回给前端    
 });
 app.listen(3000);
diff --git a/Security/XSS/src/index.html b/Security/XSS/src/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css" />
+    <title>Document</title>
+</head>
+
+<body>
+    <div class="container">
+        <div class="row">
+            <div class="col-md-12 col-lg-12">
+                <div class="col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3">
+                    <div class="panel panel-info" style="margin-top:50px;">
+                        <div class="panel-heading">
+                            <h3>评论列表</h3>
+                        </div>
+                        <div class="panel-body">
+                            <form onsubmit="return false">
+                                <div class="form-group">
+                                    <label for="comments">输入评论</label>
+                                    <input class="form-control" type="text" id="comments" />
+                                </div>
+                                <div class="form-group">
+                                    <input class="btn btn-danger" type="button" id="attck" value="会被攻击" />
+                                    <input class="btn btn-primary" type="button" id="security" value="我很安全" />
+                                </div>
+                            </form>
+                            <ul class="list-group">
+
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+<script src="/node_modules/jquery/dist/jquery.js"></script>
+<script>
+    $('#attck').click(function() {
+        let commend = $('#comments').val();
+        //没有对输入内容进行过滤
+        if($.trim(commend)) {
+            $('.list-group').text(`<li class="list-group-item">${commend}</li>`);
+        }
+    });
+
+    $('#security').click(function() {
+        let commend = $('#comments').val();
+        //对输入内容进行转义
+        if($.trim(commend)) {
+            $('.list-group').append(`<li class="list-group-item">${commend}</li>`);
+        }
+    });
+</script>
+</html>
diff --git a/Security/XSS/src/login.html b/Security/XSS/src/login.html
@@ -53,10 +53,10 @@ <h3>登录</h3>
                 password
             }).then((res) => {
                 if(res.code === 0) {
-                    //登录成功页(此时，还能够获取到用户的cookie)
-                    location.href = `/hello?type=<script>alert('恶意内容')<\/script>`;
+                    //登录成功页
+                    location.href = `/welcome?type=<script>alert('恶意内容')<\/script>`;
                 }else {
-                    //登录失败
+                    //登录失败(如果是用户登录成功时，还能够获取到用户的cookie)
                     location.href = `/error?type=<script>alert('恶意内容')<\/script>`;
                 }
             });