本文目录一览：
- 1、web前端需要掌握的哪些知识
- 2、如何防止xss攻击，需要过滤什么
- 3、Spring MVC中，遇到XSS、SQL注入攻击怎么处理？
- 4、如何进行Web渗透测试
- 5、XSS攻击如何实现以及保护Web站点免受跨站点脚本攻击
- 6、如何正确防御xss攻击
web前端需要掌握的哪些知识
一个合格的web前端需要掌握哪些技术？
最基础的自然是JavaScript，HTML和css这三种语言。
首先了解下它们到底是什么。
HTML是用户看到的网页的骨架，比如你会发现当前页面分为左中右三个部分，其中还填充了不同的文字和图片；每个子部分还会继续细分，比如当前页面的中间部分下方有输入框等等。
CSS是网页展示的细节控制，比如你会发现有的文字是红底白色，有的子部分占了页面的二分之一宽，有的只占六分之一，有些部分需要用户进行某些操作（如点击，滑动）才会出现等等，这些就是有CSS来控制。
JavaScript是负责捕捉用户在浏览器上的操作，并与后端服务器进行数据交换的脚本语言。当用户在前端进行点击，输入等操作的时候，会触动绑定了该动作的JavaScript脚本，然后JavaScript收集数据，调用后端的api接口，再将后端返回的数据交给HTML和CSS渲染出来。
一个网页的HTML代码和CSS代码是可以直接在浏览器中查看的，你可以直接按F12，就能看到下图右侧的模块，左右侧红框就是代码与实际页面的对应关系。因此如果你看到某个网站的布局很不错，不妨点击F12，进行学习。
前端框架
然而，实际应用中，已经很少有正规的项目组直接用上述三种语言进行web 前端开发了，而是使用很多封装了这三种语言的框架，比如
Vue.js
，angular，react native等等。它们是来自谷歌和Facebook的大神项目组，基于自己的经验，封装了原生前端语言，实现了更多更复杂更酷炫的功能。因此，可以说，学会使用这些框架，能达到事半功倍的效果。
比如用了vue，它是自底向上增量开发的设计，其核心只关心图层，而且还可以与其他库或已存项目融合，学习门槛极其友好；另一方面，vue可以驱动单文件组件和vue生态系统支持的库开发的复杂单页应用。有了这个生态系统，可以说，vue是处在一个不断壮大，不断完善的欣欣向荣的状态。
网络通信协议
由于前后端分离的趋势，前端还需要了解很多网络通信协议的知识，这里不局限于http协议，因为据我的经验，有时候我们还会用到websocket等协议。因此，前端需要简单了解不同协议的特点以及使用方式，但是好消息是不用像学习计算机网络课程一样对每种协议的原理都了解的特别透彻，只要学会如何用前端语言发送这种协议的请求就够了。
如何防止xss攻击，需要过滤什么
XSS攻击通常是指黑客通过"HTML注入"篡改了网页，插入了恶意的脚本，从而在用户浏览网页时，控制用户浏览器的一种攻击。
一、HttpOnly防止劫取Cookie
HttpOnly最早由微软提出，至今已经成为一个标准。浏览器将禁止页面的Javascript访问带有HttpOnly属性的Cookie。目前主流浏览器都支持，HttpOnly解决是XSS后的Cookie支持攻击。
我们来看下百度有没有使用。
未登录时的Cookie信息
可以看到，所有Cookie都没有设置HttpOnly，现在我登录下
发现在个叫BDUSS的Cookie设置了HttpOnly。可以猜测此Cookie用于认证。
下面我用PHP来实现下：
?php
header("Set-Cookie: cookie1=test1;");
header("Set-Cookie: cookie2=test2;httponly",false);
setcookie('cookie3','test3',NULL,NULL,NULL,NULL,false);
setcookie('cookie4','test4',NULL,NULL,NULL,NULL,true);
?
script
alert(document.cookie);
/script
js只能读到没有HttpOnly标识的Cookie
二、输入检查
输入检查一般是检查用户输入的数据中是否包含一些特殊字符，如、、'、"等，如果发现存在特殊字符，则将这些字符过滤或者编码。
例如网站注册经常用户名只允许字母和数字的组合，或者邮箱电话，我们会在前端用js进行检查，但在服务器端代码必须再次检查一次，因为客户端的检查很容易绕过。
网上有许多开源的“XSS Filter”的实现，但是它们应该选择性的使用，因为它们对特殊字符的过滤可能并非数据的本意。比如一款php的lib_filter类：
$filter = new lib_filter();
echo $filter-go('1+11');
它输出的是1，这大大歪曲了数据的语义，因此什么情况应该对哪些字符进行过滤应该适情况而定。
三、输出检查
大多人都知道输入需要做检查，但却忽略了输出检查。
1、在HTML标签中输出
如代码：
?php
$a = "scriptalert(1);/script";
$b = "img src=# onerror=alert(2) /";
?
div?=$b?/div
a href="#"?=$a?/a
这样客户端受到xss攻击，解决方法就是对变量使用htmlEncode,php中的函数是htmlentities
?php
$a = "scriptalert(1);/script";
$b = "img src=# onerror=alert(2) /";
?
div?=htmlentities($b)?/div
a href="#"?=htmlentities($a)?/a
2、在HTML属性中输出
div id="div" name ="$var"/div
这种情况防御也是使用htmlEncode
在owasp-php中实现：
$immune_htmlattr = array(',', '.', '-', '_');
$this-htmlEntityCodec-encode($this-immune_htmlattr, "\"script123123;/script\"");
3、在script标签中输出
如代码：
?php
$c = "1;alert(3)";
?
script type="text/javascript"
var c = ?=$c?;
/script
这样xss又生效了。首先js变量输出一定要在引号内，但是如果我$c = "\"abc;alert(123);//"，你会发现放引号中都没用，自带的函数都不能很好的满足。这时只能使用一个更加严格的JavascriptEncode函数来保证安全——除数字、字母外的所有字符，都使用十六进制"\xHH"的方式进行编码。这里我采用开源的owasp-php方法来实现
$immune = array("");
echo $this-javascriptCodec-encode($immune, "\"abc;alert(123);//");
最后输出\x22abc\x3Balert\x28123\x29\x3B\x2F\x2F
4、在事件中输出
a href="#" onclick="funcA('$var')" test/a
可能攻击方法
a href="#" onclick="funcA('');alter(/xss/;//')"test/a
这个其实就是写在script中，所以跟3防御相同
5、在css中输出
在owasp-php中实现：
$immune = array("");
$this-cssCodec-encode($immune, 'background:expression(window.x?0:(alert(/XSS/),window.x=1));');
6、在地址中输出
先确保变量是否是"http"开头，然后再使用js的encodeURI或encodeURIComponent方法。
在owasp-php中实现：
$instance = ESAPI::getEncoder();
$instance-encodeForURL(‘url’);
四、处理富文体
就像我写这篇博客，我几乎可以随意输入任意字符，插入图片，插入代码，还可以设置样式。这个时要做的就是设置好白名单，严格控制标签。能自定义 css件麻烦事，因此最好使用成熟的开源框架来检查。php可以使用htmlpurify
五、防御DOM Based XSS
DOM Based XSS是从javascript中输出数据到HTML页面里。
script
var x = "$var";
document.write("a href='"+x+"'test/a");
/script
按照三中输出检查用到的防御方法，在x赋值时进行编码，但是当document.write输出数据到HTML时，浏览器重新渲染了页面，会将x进行解码，因此这么一来，相当于没有编码，而产生xss。
防御方法：首先，还是应该做输出防御编码的，但后面如果是输出到事件或脚本，则要再做一次javascriptEncode编码，如果是输出到HTML内容或属性，则要做一次HTMLEncode。
会触发DOM Based XSS的地方有很多：
document.write()、document.writeln()、xxx.innerHTML=、xxx.outerHTML=、innerHTML.replace、document.attachEvent()、window.attachEvent()、document.location.replace()、document.location.assign()
Spring MVC中，遇到XSS、SQL注入攻击怎么处理？
1、在数据进入数据库之前对非法字符进行转义，在更新和显示的时候将非法字符还原；
2、在显示的时候对非法字符进行转义；
如果项目还处在起步阶段，建议使用第二种，直接使用jstl的标签即可解决非法字符的问题。在解析从服务器端获取的数据时执行以下escapeHTML()即可。
来源：麦子学院
如何进行Web渗透测试
什么是渗透测试？
渗透测试，是渗透测试工程师完全模拟黑客可能使用的攻击技术和漏洞发现技术，对目标网络、主机、应用的安全作深入的探测，发现系统最脆弱的环节。
如何进行Web渗透测试？
完整web渗透测试框架当需要测试的web应用数以千计，就有必要建立一套完整的安全测试框架，流程的最高目标是要保证交付给客户的安全测试服务质量。
1、立项：项目建立，时间安排，人力分配，目标制定，厂商接口人确定；
系统分析威胁分析：针对具体的web应用，分析系统架构、使用的组件、对外提供的接口等，以STRIDE为威胁模型进行对应的安全威胁分析，输出安全威胁分析表，重点关注top3威胁；
制定测试用例：根据威胁分析的结果制定对应的测试用例，测试用例按照模板输出，具备可执行性；
测试执行漏洞挖掘：测试用例执行发散测试，挖掘对应的安全问题or漏洞；
问题修复回归测试：指导客户应用开发方修复安全问题or漏洞，并进行回归测试，确保安全问题or漏洞得到修复，并且没有引入新的安全问题；
项目总结评审：项目过程总结，输出文档评审，相关文档归档。
2、Web应用的渗透测试流程
主要分为3个阶段，分别是：信息收集→漏洞发现→漏洞利用，下面仔细分析一下各个阶段流程：
一、信息收集
在信息收集阶段，我们需要尽量多的收集关于目标web应用的各种信息，比如：脚本语言的类型、服务器的类型、目录的结构、使用的开源软件、数据库类型、所有链接页面，用到的框架等
脚本语言的类型：常见的脚本语言的类型包括：php、asp、aspx、jsp等
测试方法：
1 爬取网站所有链接，查看后缀
2 直接访问一个不存在页面后面加不同的后缀测试
3 查看robots.txt，查看后缀
服务器的类型：常见的web服务器包括：apache、tomcat、IIS、ngnix等
测试方法：
1 查看header，判断服务器类型
2 根据报错信息判断
3 根据默认页面判断
目录的结构：了解更多的目录，可能发现更多的弱点，如：目录浏览、代码泄漏等。
测试方法
1 使用字典枚举目录
2 使用爬虫爬取整个网站，或者使用google等搜索引擎获取
3 查看robots.txt是否泄漏
使用的开源软件：我们如果知道了目标使用的开源软件，我们可以查找相关的软件的漏洞直接对网站进行测试。
测试方法
指纹识别（网络上有很多开源的指纹识别工具）
数据库类型：对于不同的数据库有不同的测试方法。
测试方法
1 使应用程序报错，查看报错信息
2 扫描服务器的数据库端口（没做NAT且防火墙不过滤时有效）
所有链接页面：这个跟前面的获取目录结构类似，但是这个不只是获取网站的所有功能页面，有时候还可以获取到管理员备份的源码。
测试方法
1 使用字典枚举页面
2 使用爬虫爬取整个网站，或者使用google等搜索引擎获取
3 查看robots.txt是否泄漏
用到的框架：很多网站都利用开源的框架来快速开发网站，所以收集网站的框架信息也是非常关键的。
测试方法
指纹识别（网络上有很多开源的指纹识别工具）
二、漏洞发现
在这个阶段我们在做测试的时候要对症下药，不能盲目的去扫描，首先要确定目标应用是否使用的是公开的开源软件，开源框架等、然后在做深一度的漏洞扫描。
关于开源软件的漏洞发现
开源的软件：常见的开源软件有wordpress、phpbb、dedecms等
开源的框架：常见的开源框架有Struts2、 Spring MVC、ThinkPHP等
中间件服务器：常见的中间件服务器有jboss、tomcat、Weblogic等
数据库服务：常见的数据库服务mssql、mysql、oracle、redis、sybase、MongoDB、DB2等
对于开源软件的测试方法
1 通过指纹识别软件判断开源软件的版本信息，针对不同的版本信息去开放的漏洞数据库查找相应版本的漏洞进行测试
2 对于默认的后台登录页、数据库服务端口认证等入口可以进行简单的暴力破解、默认口令尝试等操作
3 使用开源的漏洞发现工具对其进行漏洞扫描，如：WPScan
关于自主开发的应用
手动测试：这个阶段，我们需要手工测试所有与用户交互的功能，比如：留言、登入、下单、退出、退货、付款等操作
软件扫描：使用免费的软件扫描，如：appscan、wvs、netsparker，burp等
可能存在的漏洞
Owasp关键点
代码安全之上传文件
代码安全之文件包含
代码安全之SSRF
逻辑漏洞之密码重置
逻辑漏洞之支付漏洞
逻辑漏洞之越权访问
平台安全之中间件安全
三、漏洞利用
针对不同的弱点有不同的漏洞利用方式，需要的知识点也比较多。一般这个阶段包括两种方式，一种是手工测试，一种是工具测试
手工测试
手工测试是通过客户端或服务器访问目标服务，手工向目标程序发送特殊的数据，包括有效的和无效的输入，观察目标的状态、对各种输入的反应，根据结果来发现问题的漏洞检测技术。手工测试不需要额外的辅助工具，可由测试者独立完成，实现起来比较简单。但这种方法高度依赖于测试者，需要测试者对目标比较了解。手工测试可用于Web应用程序、浏览器及其他需要用户交互的程序。
这种方式对于有特殊过滤等操作，或者网络上没有成型的利用工具的时候可以使用。
工具测试
网络上有很多好用的免费利用工具，比如针对sql注入的sqlmap、针对软件漏洞的matesploit等。
XSS攻击如何实现以及保护Web站点免受跨站点脚本攻击
使用工具和测试防范跨站点脚本攻击. 跨站点脚本（XSS）攻击是当今主要的攻击途径之一，利用了Web站点的漏洞并使用浏览器来窃取cookie或进行金融交易。跨站点脚本漏洞比较常见，并且要求组织部署涵盖威胁建模、扫描工具和大量安全意识在内的周密的安全开发生命周期，以便达到最佳的XSS防护和预防。本文解释了跨站点脚本攻击是如何实现并且就如何保护企业Web应用免于这种攻击提供了建议。 跨站点脚本（XSS）允许攻击者通过利用因特网服务器的漏洞来发送恶意代码到其他用户。攻击者利用跨站点脚本（XSS）攻击向那些看似可信任的链接中注入恶意代码。当用户点击了链接后，内嵌的程序将被提交并且会在用户的电脑上执行，这会使黑客获取访问权限并偷走敏感数据。攻击者使用XSS来攻击受害者机器上的漏洞并且传输恶意代码而不是攻击系统本身。 通过用户输入的数据返回错误消息的Web表格，攻击者可以修改控制Web页面的HTML代码。黑客能够在垃圾信息中的链接里插入代码或者使用欺诈邮件来诱使用户对其身份产生信任。 例如攻击者可以发送带有URL的邮件给受害人，这个URL指向一个Web站点并且提供浏览器脚本作为输入；或者在博客或诸如Facebook、Twitter这样的社交网站上发布恶意URL链接。当用户点击这个链接时，该恶意站点以及脚本将会在其浏览器上运行。浏览器不知道脚本是恶意的并将盲目地运行这个程序，这转而允许攻击者的浏览器脚本使用站点的功能来窃取cookie或者冒充合法的用户来完成交易。 一些通常的跨站点脚本预防的最佳实践包括在部署前测试应用代码，并且以快速、简明的方式修补缺陷和漏洞。Web应用开发人员应该过滤用户的输入来移除可能的恶意字符和浏览器脚本，并且植入用户输入过滤代码来移除恶意字符。通常管理员也可以配置浏览器只接受来自信任站点的脚本或者关闭浏览器的脚本功能，尽管这样做可能导致使用Web站点的功能受限。 随着时代的进步黑客们变得更加先进，使用收集的工具集来加快漏洞攻击进程。这意味着仅仅部署这些通常的XSS预防实践是不够的，保护和预防过程必须从底层开始并持续提升。预防过程必须在开发阶段开始，建立在一个牢靠、安全的开发生命周期方法论之上的Web应用在发布版本中不太可能暴露出漏洞。这样以来，不仅提升了安全性，也改善了可用性而且缩减了维护的总体费用，因为在现场环境中修补问题比在开发阶段会花费更多。 威胁建模在XSS预防中也是重要的一个方面，应该纳入到每个组织的安全开发生命周期当中。威胁建模评估和辨识在开发阶段中应用程序面临的所有的风险，来帮助Web开发人员更好地理解需要什么样的保护以及攻击一旦得逞将对组织产生怎样的影响。要辨识一个特定应用的威胁级别，考虑它的资产以及它访问的敏感信息量是十分重要的。这个威胁建模过程将确保在应用的设计和开发过程中战略性地融合了安全因素，并且增强了Web开发人员的安全意识。 对于大型项目的Web开发人员来说，源代码扫描工具和Web应用漏洞扫描器是提高效率和减少工作量的通常选择。
如何正确防御xss攻击
传统防御技术
2.1.1基于特征的防御
传统XSS防御多采用特征匹配方式，在所有提交的信息中都进行匹配检查。对于这种类型的XSS攻击，采用的模式匹配方法一般会需要对“javascript”这个关键字进行检索，一旦发现提交信息中包含“javascript”，就认定为XSS攻击。
2.1.2 基于代码修改的防御
和SQL注入防御一样，XSS攻击也是利用了Web页面的编写疏忽，所以还有一种方法就是从Web应用开发的角度来避免：
1、对所有用户提交内容进行可靠的输入验证，包括对URL、查询关键字、HTTP头、POST数据等，仅接受指定长度范围内、采用适当格式、采用所预期的字符的内容提交，对其他的一律过滤。
2、实现Session标记(session tokens)、CAPTCHA系统或者HTTP引用头检查，以防功能被第三方网站所执行。
3、确认接收的的内容被妥善的规范化，仅包含最小的、安全的Tag(没有javascript)，去掉任何对远程内容的引用(尤其是样式表和javascript)，使用HTTP only的cookie。
当然，如上方法将会降低Web业务系统的可用性，用户仅能输入少量的制定字符，人与系统间的交互被降到极致，仅适用于信息发布型站点。
并且考虑到很少有Web编码人员受过正规的安全培训，很难做到完全避免页面中的XSS漏洞。
扩展资料：
XSS攻击的危害包括
1、盗取各类用户帐号，如机器登录帐号、用户网银帐号、各类管理员帐号
2、控制企业数据，包括读取、篡改、添加、删除企业敏感数据的能力
3、盗窃企业重要的具有商业价值的资料
4、非法转账
5、强制发送电子邮件
6、网站挂马
7、控制受害者机器向其它网站发起攻击
受攻击事件
新浪微博XSS受攻击事件
2011年6月28日晚，新浪微博出现了一次比较大的XSS攻击事件。
大量用户自动发送诸如：
“郭美美事件的一些未注意到的细节”，“建党大业中穿帮地方”，“让女人心动的100句诗歌”，“这是传说中的神仙眷侣啊”等等微博和私信，并自动关注一位名为hellosamy的用户。
事件的经过线索如下：
20:14，开始有大量带V的认证用户中招转发蠕虫
20:30，某网站中的病毒页面无法访问
20:32，新浪微博中hellosamy用户无法访问
21:02，新浪漏洞修补完毕
百度贴吧xss攻击事件
2014年3月9晚，六安吧等几十个贴吧出现点击推广贴会自动转发等。并且吧友所关注的每个关注的贴吧都会转一遍，病毒循环发帖。并且导致吧务人员，和吧友被封禁。
参考资料：
XSS攻击-百度百科