前端可能会面临的攻击

引言：

随着时代的发展，现代技术越来越发达，也导致现在网络的安全威胁也越来越多了，然而前端作为直接跟用户进行交互的部分，也容易成为“不法分子”攻击的目标。

1、常见的攻击类型

跨站脚本攻击（XSS）、跨站请求伪造（CSRF）、点击劫持（Clickjacking）、

中间人攻击（MITM）、SEO钓鱼攻击等。

2、详细讲解

    2.1、跨站脚本攻击（XSS）

           跨站脚本攻击的理念：

            在跨站脚本攻击中举个例子就相当于攻击人员把放进了网页中，让后当用户去打开网页的时候病毒就会生效。

            跨站脚本攻击分类：

            反射性XSS：就是将恶意脚本（病毒）放在URL中，例如钓鱼连接，服务器直接饭后带有恶意代码的页面。

            存储型XSS：通过把恶意脚本存储在服务器，让后当有用户访问网站的时候就会被攻击。

            DOM型XSS：不会经过服务器，而是发生在前端JS操作DOM的时候所触发

            防御方法：

                   1.输入过滤： 后端统一处理去过滤 < > & " '等特殊的字符或者设置白名单，比如地址中不能包含脚本标签。

                    2.采用深度防御：开启CSP头（Content-Security-Policy:script-src 'self'）(只允许本站的脚本),通过使用Cookie加HttpOnly属性，使用用现代框架（React/Vue等）的自动转义功能

       常见误区：

认为只要前端过滤工作做到位，就能够避免XSS攻击，但其实通过BurpSuite等工具就能够轻松的绕过前端。

过度依赖WAF，实际上WAF存在很多的规则盲区。

忽视第三方组件所带来的影响，但实际上一些有漏洞的插件就可能会称为突破口，例如JQuery插件

       检测工具推荐

浏览器插件：XSS Hunter 、XSStrike

自动化扫描：OWASP ZAP、BurpSuite

手动测试：尝试输入';alert(1);//等payload观察相应。

附言：XSS常常稳居于OWASP Top 10，防御XSS需要前后端配合结合持续监控，千万不要有“自己的网站规模小不会出问题”的心理哦！

        2.2、跨站请求伪造（CSRF）

                跨站请求伪造的实现原理：利用已经登录后的身份信息，进行一些违规操作，比如说就是我登录了一个银行网站，当我登录成功后浏览器就会存储一些信息，然后我在没有退出银行网站的情况下打开了一个恶意网站，这个恶意网站中有一个自动转账的代码，浏览器就会发送一个带有我的身份信息的转账请求发送给银行网站，银行就会以为是我本人在操作从而进行转账。

                防御方法：

CSRF TOKEN：这是最常用的一种方法，实现原理就是在每次打开页面的时候，服务器生成一个随机码，也就是token，隐藏在请求头中，通过让服务器验证token是否一致，如果token不正确就不会执行对应的操作。

SAMESITE COOKIE属性：这个的实现原理就是给Cookie进行了上锁的操作一样，限制第三方网站发送请求的时候携带Cookie，它有两个属性为strict：允许同站点携带Cookie，Lax：允许部分安全请求

验证REFERER头：实现原理是通过检查来源的网址，但是有的浏览器会禁用Referer，或者可能会被黑客伪造

重要操作二次验证：这个就是在进行一些重要的操作时进行一些验证，比如转账的时候输入密码，短信验证等。既简单又有效，但是可能会影响用户的体验比如说随便一个点击事件就需要进行二次验证。

    2.3、点击劫持（Clickjacking）

        点击劫持的理念：简单点说就是攻击人员挖了一个坑，让用户以为点击的是一个普通的按钮实际上却是触发隐藏的恶意的按钮操作。比如：用户进行了抽奖环节，页面显示的是抽中的大奖，但实际上后台在偷偷的使用用户的账户进行一些危险操作。

        实现流程：攻击人员通过伪造一个页面比如抽奖，通过透明图层覆盖一个真实的页面，当用户去点击抽奖页面的时候，实际上点击的是透明图层中的按钮。实现这个操作需要两个关键的条件，页面允许被嵌入到 <iframe>中，攻击人员还能够通过CSS控制透明度和位置，让用户感受不到。

        防御方法：

        后端设置HTTP头：最为有效的方法。

        X-Frame-Options：通知浏览器当前页面不可以嵌入到<iframe>中。

                DENY：完全禁止嵌入

                SAMEORIGIN：允许同域名下的网站嵌入

        Content-Security-Policy（CSP）:
                一种更加灵活的现代方案，控制谁可以嵌入网页。

                frame-ancestors ‘none’   禁止所有

                frame-ancestors ’self‘  允许同源嵌入

        前端JAVASCRIPT防御（辅助）：    通过检查当前页面是否被嵌套。

        if(window !==window.top){  //如果被嵌套在 iframe中

                window.top.location = window.location;  //强制跳出嵌套。

        }

        敏感操作添加验证，按钮防遮挡等。

        2.4、中间人攻击（MITM）

        实现理念：相当于两个人相互打电话然后中间有一个偷听的接入了通话中。关键的地方在于攻击人员把自己伪装成通信的两个人，让用户以为在跟朋友对话，但实际上所有的信息都由这个攻击人员进行中转操作。比如说：在网吧连接了WiFi进行转账操作，然后黑客通过这个WiFi将数据进行截获，查看账号密码，或者去篡改转账的金额等。

        实现机制：

        ARP欺骗（局域网内）：操作流程：在局域网内部传播假消息，这样导致的结果就是所有的设备都以为攻击人员是网关，然后流量全部被劫持。

        伪造WiFi热点：操作流程：把名称改为类似于Starbucks-Free的WiFi，诱导用户进行连接，从而导致用户的所有数据被黑客记录

        DNS劫持：篡改DNS响应，把网站解析到黑客的假网站中，然后当用户输入密码的时候就相当于是在给黑客‘送钱’。

        SSL剥离（针对于HTTPS）：强行把加密的HTTPS连接降级为不加密的HTTP，这样就会导致用户的敏感数据以明文传输，黑客可以直接偷看。

    防御方法：

        HSTS：强制浏览器只通过HTTPS连接网站，防止SSL剥离

        证书钉扎（Certificate Pinning）：APP提前绑定可信证书，防伪造。

        端到端加密：通过shignal、WhatsApp等通信工具，密钥不经过第三方。

        普通人：

        认准小锁头：🔒访问网站时，检查地址栏是否有HTTPS和锁头图标。

        避免在公共场所连接WiFi登录网银、支付宝。及时更新系统、浏览器、杀毒软件。

      2.5、SEO钓鱼攻击

        实现理念：SEO钓鱼攻击的核心就是：把钓鱼网站伪装成正常网站，然后通过搜索引擎优化（SEO）让它在搜索结果里拍到前几名。比如用户搜索‘双十一红包领取’，然后第一页出现‘某某商城红包中心’，点进去却要输入支付密码，实际上就是一个钓鱼网站。攻击人员利用搜索引擎的培明规则，把恶意网站‘刷’到高位，就是利用了用户对搜索结果高的信任。

        实现流程：

        选关键词，蹭热度，

        蹭品牌：专门挑热门事件或大品牌名作为关键词。甚至注册高仿域名。

        刷排名：黑帽SEO手段

        内容作弊：堆砌关键词，或用隐藏文字。

        外链轰炸：买垃圾外链或用工具自动发，让搜索引擎误以为网站很权威。

        动态伪装：对搜索引擎爬虫显示正常内容，用户点进去跳转到钓鱼页面。

        钓鱼收割：心里操控

                把页面做成跟真网站一样，然后通过话术制造紧迫感，诱导用户输入账户、密码、短信验证码等。

        防御方法：

        搜索引擎加强风控：算法识别黑猫SEO比如突然增加的外链，关键词堆砌。对高仿品牌名的网站降权或标注风险。

        品牌方主动防护：注册类似域名防止出现抢注，定期搜索自己品牌名，举报钓鱼结果。

        技术监控：用网络爬虫扫描是否具有钓鱼网站冒用品牌。设置品牌名+钓鱼品牌名+登录等关键词监控。