常见的前端漏洞及防护措施

时间 2019-11-08

标签常见的前端漏洞防护措施繁體版

原文原文链接

随着WEB应用愈来愈复杂，用户对WEB安全也愈来愈重视。再加上前端工程师的工做面已逐渐扩大，开始覆盖到各类业务逻辑，所以如何应对各类WEB安全问题就显得十分重要，今天咱们就来探讨下前端开发编码工做中可能形成的WEB安全问题及防护措施javascript

a连接target="_blank"属性可形成钓鱼攻击

简介

若是你在页面上的超连接a标记上添加了target='_blank'属性，当用户点击了该超连接后，浏览器会单独新建一个标签页来显示该连接所指向的内容。可是在这一瞬间，浏览器会容许新建的标签页经过一个名为"window.opener"的浏览器API来与以前的网页进行短暂通讯。此时，攻击者就能够将恶意代码嵌入在新打开的网站中，而后检测用户是从哪个网站跳转过来的，最后再利用window.opener接口来迫使原始网页打开一个新的URL地址。php

攻击实例

你的正常登录的网页html

<!-- test1.html -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <a href="./test2.html" target="_blank">你想去的地方</a>
    </body>
</html>

点击超连接，打开test2.html前端

<!-- test2.html -->
<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    </head>
    <body>
        <script>
            window.opener.location = "http://www.baidu.com/";
        </script>
    </body>
</html>

test2页面打开后经过js修改window.opener.location使得以前的test1页面的地址被更改，例子中改的是百度页面，在现实中攻击者可将其改成模拟的该网站的登陆界面，用户在未发现网页已被篡改的状况下将登陆信息填写提交给了攻击者java

防护措施

a连接中使用target="_blank"属性时需添加上 rel="noopener noreferrer"，noreferrer是因为Firefox不支持noopener而添加的算法

XSS攻击

简介

跨站脚本攻击，英文全称是Cross Site Script，在安全领域叫作“XSS”。XSS攻击一般指黑客经过“HTML注入”篡改了网页，插入了恶意脚本，从而在用户浏览网页时，控制用户浏览器的一种攻击。
XSS根据效果的不一样能够分为以下几类：chrome

反射性 XSS
发出请求时，XSS代码出如今URL中，做为输入提交到服务器端，服务器端解析后响应，XSS代码随响应内容一块儿传回给浏览器，最后浏览器解析执行XSS代码，这个过程像一次反射，所以叫作反射型XSS
存储型XSS
存储型XSS会把用户输入的数据存储到服务器，这种攻击具备很强的稳定性,也叫“持久型XSS”
DOM Based XSS
经过修改页面的DOM节点造成的XSS

反射性 XSS

有一个xss.php页面用于接收并显示传递过来的参数数据库

$input = $_GET["test"];
echo "<div>".$input."</div>";

在其余网页上有以下一个连接后端

<a href="xss.php?test=<script>alert('XSS')</script>">诱你点击</a>

测试得知：
IE8和firfox都弹窗显示XSS，攻击成功。chrome则被浏览器的xss保护策略阻止浏览器

存储型XSS

发表的文章中含有恶意脚本例如：你能够试试看<script>alert('xss')</script>，后端没有对文章进行过滤就将内容存到数据库，当其余用户再次看这篇文章时，包含的恶意脚本被执行

DOM Based XSS

<script type="text/javascript">
    function test() {
        var str = document.getElementById("test").value;
        document.getElementById("t").innerHTML = "<a href='" + str + "'>test</a>";
    }
</script>
<div id="t"></div>
<input type="text" id="test" value="">
<input type="submit" value="submit" onclick="test()">

若是在输入框中填写'><img src=# onerror=alert('xss') /><'，点击按钮提交后浏览器会产生XSS弹窗，攻击成功。

防护措施

后端在接收请求数据时，须要作输入检查，过滤特殊符号和标签
前端在显示后端数据时，须要作输出检查，不只是标签内容须要过滤、转义，就连属性值和样式也均可能须要。
在处理富文本时能够设置标签白名单
设置HttpOnlly防止cookie劫持

CSRF攻击

简介

CSRF（Cross Site Request Forgery），中文是跨站点请求伪造。CSRF攻击者在用户已经登陆目标网站以后，诱使用户访问一个攻击页面，利用目标网站对用户的信任，以用户身份在攻击页面对目标网站发起伪造用户操做的请求，达到攻击目的。

攻击实例

// submit.php 经过get请求获取数据
$username = $_COOKIE['username'];
$productId = $_GET['pid'];
// 这里进行购买操做
store_into_database($username, $productId);
echo $username . '买入商品：' . $productId;

黑客攻击页面

<!DOCYTPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <img src="http://localhost:8080/csrf/submit.php?pid=1" />
    </body>
</html>

当你正常浏览网页的时候会生成认证信息，此时黑客诱使你点击攻击页面，该页面会利用你当前的认证信息，从而对数据进行操做

防护措施

1.合理使用POST和GET

GET方法提交数据很容易被拿来作CSRF攻击，使用POST只能下降攻击风险，并不能杜绝，攻击者在第三方页面构造一个form就能够用POST提交数据构成CSRF攻击。

2.使用验证码

在一般状况下，验证码能很好遏制CSRF攻击。可是出于用户体验考虑，网站不能给全部的操做都加上验证码。所以验证码只能做为一种辅助手段，不能做为主要解决方案。

3.Referer信息检查

经过检查referer信息是否合法来判断用户是否被CSRF攻击，仅仅是知足防护的充分条件，Referer Check的缺陷在于服务器并不是何时都收到Referer，而且Referer信息能够伪造

4.使用 Token

Token须要足够随机，必须使用足够安全的随机数生成算法
Token能够放在用户的Session中或Cookie中，在提交请求时，服务器只须要验证表单中Token与用户Session（或Cookie）中的Token是否一致，一致则认为合法
在使用Token时尽可能把Token放在表单中，使用POST提交，以免Token泄露
若是该网站还存在XSS漏洞，那么使用Token方法防护CSRF攻击也就无效了（XSRF攻击）

参考文献：

1.《白帽子讲WEB安全》
2.浅谈CSRF攻击方式