常见前端漏洞

a链接`target='_blank'`可以造成钓鱼攻击

描述

如果在a标签上写target='_blank'的话，用户点击此链接执行打开新窗口的瞬间，浏览器允许新打开的页面窗口，通过window.opener的api与原来页面进行短暂的通讯。此时，恶意攻击者可以将恶意代码嵌入到新打开的页面，然后检测用户从哪一个网站跳转过来的。再使用window.opener接口来迫使原始网页打开一个新的url地址。
例子：

 


    
        
    
    
        跳转到test2.html

上面test1.html的有一个a标签，跳转到test2.html页面。并且设置target='_blank'属性，当用户点击此链接的时候，跳转到test2.html页面。




    
    
    
    
        这里是test2.html

在test2.html中，有window.opener.location = "http://www.baidu.com"这句话，当页面加载到 script标签后，执行这句话，就会将test1.html的页面重置到百度的首页，不信你试一下，试一下之后才会发现他的真谛，攻击者是如何利用此漏洞实施攻击呢？在现实中，攻击者可以把test1.html的页面跳转到事先做好的登陆页面，这时，用户是没有任何感知的。当用户回来开始填写账号密码的之后，账号密码就泄漏给了攻击者。他就可以拿着它们出去搞事情，做一些危害社会的事。

防范措施

说到这，那么如何防范这个问题呢？很简单，只要在标签内设置属性rel='nooppener noreferrer'即可，其中noreferrer是由于Firfox不支持noopener而添加的。
正确代码为




    
        
    
    
        跳转到test2.html

XSS攻击

描述

XSS攻击学名为跨站脚本攻击，英文名为：克绕思赛特思可瑞泼特，在安全领域称其为'XSS'。XSS通常是指攻击者通过"html注入"、"sql注入"等手段去篡改一下网站、加点脚本等一些龌龊的行为，来控制用户浏览器的一种攻击。

XSS根据效果不同可以分为如下三类：反射型 XSS、存储型 XSS、DOM Based XSS。

反射型 XSS

发出请求时，XSS代码出现在URL中，作为输入提交到服务器端，服务器端解析后响应，XSS代码随响应内容一起传回给浏览器，最后浏览器解析执行XSS代码，这个过程像一次反射，因此叫做反射型XSS。
举一个伪例子：





    
    


    xss_反射2.html

xss_fanshe_1.html 页面内，包含一个标签，他的href属性为一个带有参数的url，此参数是一个可执行文本。

xss_fanshe_2.html页面内通过getQueryString函数获取url中的参数，并将取到的参数填充到id='content'的div中。现在，我们将xss_fanshe_2.html认为是后端接口。通过点击xss_fanshe_1.html中的标签，来访问xss_fanshe_2.html这个伪接口，此时查看页面源码为下面代码。

在id='content'的div内出现了一个可执行的好呀嘛好日子嘿”，并且将其传给后台，后台保存到数据库。每次有人访问此文章的时候，都会把这句脚本给渲染一次。用户就会一脸懵逼的看着一个内容为XSS的弹窗。

DOM Based XSS

基于文档对象模型Document Objeet Model,DOM)的一种漏洞。它可能是反射型，也可能是存储型。它的输出点在DOM。
举个例子：

上面代码，正常情况是在id='url'输入框内输入一个可访问地址，然后动态的向id='a-content'的

内插入一个根据输入内容拼接href属性的标签。如果用户正常输入一点问题没有，但是如果输入一个'><'这乱字符，就会把标签给拆分开，并且包含一个src属性为#的标签，同时这个标签绑定了onerror事件，如果图片没有加载进来，就会触发onerror，并且弹出内容为XSS的提示框。为什么说他可能是一个反射型，又可能是一个存储型？原因就在于'><'这个段代码的来源方式。如果通过参数传递的就是反射型，如果通过查库得来的就是存储性。

防御措施

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

CSRF攻击

这里有更详细的说明，我觉得特别棒。
点这里点这里
·