随着互联网的发展，各种Web应用变得越来越复杂。在满足用户各种需求的同时，各种网络安全问题也应运而生。相继。作为前端工程师，我们无法逃避这个问题。今天，我们就来看看Web前端存在的安全问题，以及如何检测和防范这些问题。非前端的攻击（如SQL注入、DDOS攻击等）本文不做讨论，毕竟后端不是我擅长的领域。QQ邮箱、新浪微博、YouTube、WordPress、百度等知名网站均遭到攻击。如果你从来没有出现过安全问题，那不是因为你开发的网站非常安全，更有可能是你的网站流量很低或者没有攻击价值。本文主要讨论以下几种攻击方式：XSS攻击、CSRF攻击、点击劫持和URL跳转漏洞。希望您在阅读本文后能够很好地回答以下面试问题。1.前端攻击方式有哪些？2、什么是XSS攻击？XSS攻击有几种类型？如何防止XSS攻击？3.什么是CSRF攻击？如何防止CSRF攻击4.如何检查网站是否安全？在开始之前，建议您先克隆代码。我已经为你准备了示例代码，并写了详细的注释。您可以比较代码以了解每种攻击以及如何预防它。毕竟，无论你读了多少文字，都比不上实用。（操作步骤在Readme中写的很详细）：https://github.com/YvetteLau/...更多优质文章可戳：https://github.com/YvetteLau/...1.XSSXSS攻击（Cross-SiteScripting，跨站脚本攻击）是一种代码注入攻击。攻击者在目标网站注入恶意代码，当受害者登录网站时恶意代码就会被执行。这些脚本可以读取cookies、sessiontoken或其他网站敏感信息，钓鱼和欺诈用户，甚至发动蠕虫攻击等。XSS的本质是恶意代码不被过滤，与网站正常代码混合；浏览器无法分辨哪些脚本是可信的，导致恶意脚本被执行。由于直接在用户终端执行，恶意代码可以直接获取用户信息，并利用这些信息冒充用户向网站发起攻击者自定义请求。XSS分类根据攻击来源，XSS攻击可分为存储型（持久型）、反射型（非持久型）和DOM型三种。下面我们来详细了解一下这三种类型的XSS攻击：1.1ReflectedXSS当用户点击恶意链接，或者提交表单，或者进入恶意网站时，注入的脚本就会进入受害者的网站。网络服务器会注入脚本，如错误信息、搜索结果等，不经过滤直接返回给用户浏览器。反射型XSS攻击步骤：攻击者构造一个包含恶意代码的特殊URL。当用户打开带有恶意代码的URL时，网站服务器会从该URL中提取恶意代码，拼接成HTML返回给浏览器。用户浏览器收到响应后，解析并执行，其中混入的恶意代码也被执行。恶意代码窃取用户数据并发送到攻击者网站，或冒充用户调用目标网站的接口执行攻击者指定的操作。反射型XSS漏洞常见于通过URL传递参数的功能，例如网站搜索和重定向。由于需要用户主动打开恶意网址才能生效，因此攻击者往往会结合多种手段诱导用户点击。POST的内容也可以触发反射型XSS，但是触发条件比较苛刻（需要构建表单提交页面，引导用户点击），所以很少见。查看反射攻击示例请戳：https://github.com/YvetteLau/...根据README.md中的提示操作（实际情况需要诱导用户点击，以上代码为仅用于演示）。注意Chrome和Safari可以检测到url的xss攻击并屏蔽网页，但是其他浏览器不能，比如Firefox，如果不希望前端获取cookie，可以在后端设置httpOnly（但这不是XSS攻击的解决方案，只能减少破坏范围）如何防止反射型XSS攻击对字符串进行编码。在输出到页面之前对url的查询参数进行转义。app.get('/welcome',function(req,res){//编码查询参数以避免反射型XSS攻击res.send(`${encodeURIComponent(req.query.type)}`);});1.2DOM-typeXSSDOM型XSS攻击，其实是前端JavaScript代码不够严谨，会在页面中插入不可信的内容。在使用.innerHTML、.outerHTML、.appendChild、document.write()等API时要特别小心。不要将不受信任的数据作为HTML插入页面，尝试使用.innerText、.textContent、.setAttribute()、DOM型XSS攻击步骤：攻击者构造特殊数据，其中包含恶意代码。用户的浏览器执行恶意代码。恶意代码窃取用户数据并发送到攻击者网站，或冒充用户调用目标网站的接口执行攻击者指定的操作。如何防止DOM型XSS攻击防止DOM型XSS攻击的核心是对输入内容进行转义（DOM中的内联事件监听器和链接跳转可以将字符串作为代码运行，需要检查其内容）。1、对于url链接（比如图片的src属性），直接使用encodeURIComponent进行转义。2、非url，我们可以这样编码：functionencodeHtml(str){returnstr.replace(/"/g,'"').replace(/'/g,''').replace(//g,'>');}DOM型XSS攻击，恶意代码的提取和执行由浏览器完成，属于前端JavaScript本身的安全漏洞.查看DOM类型XSS攻击示例（根据readme提示查看）请戳：https://github.com/YvetteLau/...1.3StoredXSS恶意脚本永久保存在目标服务器上。当浏览器请求数据时，脚本从服务器传回并执行，影响范围比反射型和DOM型XSS要大。存储型XSS攻击的原因还是数据过滤没做好：前端向服务器提交数据时，没有做好过滤；当服务器收到数据时，在存储之前，不做任何过滤；前端从服务器请求数据而不过滤输出。存储型XSS攻击步骤：攻击者将恶意代码提交到目标网站的数据库中。当用户打开目标网站时，网站服务器从数据库中取出恶意代码，拼接成HTML返回给浏览器。用户浏览器收到响应后，解析并执行，其中混入的恶意代码也被执行。恶意代码窃取用户数据并发送到攻击者网站，或冒充用户调用目标网站的接口执行攻击者指定的操作。这种攻击常见于有用户保存数据的网站功能，如论坛帖子、产品评论、用户私信等。如何防止存储型XSS攻击：前端数据传到服务器前，先转义/过滤（不能防止数据被抓取修改）。服务端收到数据，在存入数据库之前，进行转义/过滤。在页面显示传入数据前，先转义/过滤查看存储的XSS攻击示例（根据Readme提示查看），请戳：https://github.com/YvetteLau/...另外注意逃逸，我们还需要一些其他的手段来防止XSS攻击：1.内容安全策略在服务器端使用HTTP的Content-Security-Policy头来指定策略，或者在前端设置meta标签。例如下面的配置只允许加载同域下的资源：Content-Security-Policy:default-src'self'在前端和服务器端设置CSP的效果是一样的，但是不能用meta上报。更多设置可以查看[Content-Security-Policy](https://developer.mozilla.org...StrictCSP可以防止XSS起到以下作用：禁止加载外域代码，防止复杂的攻击逻辑。禁止外域提交网站被攻击后，用户数据不会泄露到外域禁止内联脚本执行（规则比较严格，目前使用GitHub）禁止未经授权的脚本执行（新功能，谷歌地图手机版正在使用中。合理使用上报可以及时发现XSS，有助于尽快修复问题。2.输入内容长度控制对于不可信的输入，应该限制在一个合理的长度。虽然XSS不能被完全杜绝，增加XSS攻击的难度3.输入内容限制对于某些输入，可以限制不能包含特殊字符或只能输入数字。4.其他安全措施HTTP-onlyCookie：禁止JavaScript读取某些敏感cookie，攻击者完成XSS注入后无法窃取此cookie。Captcha：防止脚本冒充用户提交危险操作。1.5XSS检测看完本文相信你已经知道什么是XSS攻击，XSS攻击的种类，以及如何防范XSS攻击。但是有一个很重要的问题：我们如何检测XSS攻击，如何知道我们的页面是否存在XSS漏洞？很多大公司都有专门的安全部门负责这项工作，但是如果没有安全部门，开发者自己怎么检测呢？1.使用常见的XSS攻击字符串手动检测XSS漏洞如：jaVasCript:/*-/*`/*\`/*'/*"/**/(/**/oNcliCk=alert())//%0D%0A%0d%0a//\x3csVg/
