【Step-By-Step】深度解析本周面试题-Weekly03

本周面试题一览：什么是XSS攻击，XSS攻击分为哪几类？我们如何防范XSS攻击？如何隐藏页面中的元素？浏览器事件代理机制的原理是什么？为什么setTimeout倒计时会出错？11、什么是XSS攻击，XSS攻击分为哪几类？我们如何防范XSS攻击？1、XSS攻击XSS（Cross-SiteScripting，跨站脚本攻击）是一种代码注入攻击。攻击者在目标网站注入恶意代码，当受害者登录网站时恶意代码就会被执行。这些脚本可以读取cookies、sessiontoken或其他网站敏感信息，钓鱼和欺诈用户，甚至发动蠕虫攻击等。XSS的本质是恶意代码不被过滤，与网站正常代码混合；浏览器无法分辨哪些脚本是可信的，导致恶意脚本被执行。由于直接在用户终端执行，恶意代码可以直接获取用户信息，并利用这些信息冒充用户向网站发起攻击者自定义请求。XSS分类根据攻击来源，XSS攻击可分为存储型（持久型）、反射型（非持久型）和DOM型三种。下面我们来详细了解一下这三种类型的XSS攻击：1.1ReflectedXSS当用户点击恶意链接，或者提交表单，或者进入恶意网站时，注入的脚本就会进入受害者的网站。网络服务器会注入脚本，如错误信息、搜索结果等，不经过滤直接返回给用户浏览器。反射型XSS攻击步骤：攻击者构造一个包含恶意代码的特殊URL。当用户打开带有恶意代码的URL时，网站服务器会从该URL中提取恶意代码，拼接成HTML返回给浏览器。用户浏览器收到响应后，解析并执行，其中混入的恶意代码也被执行。恶意代码窃取用户数据并发送到攻击者网站，或冒充用户调用目标网站的接口执行攻击者指定的操作。反射型XSS漏洞常见于通过URL传递参数的功能，例如网站搜索和重定向。由于需要用户主动打开恶意网址才能生效，因此攻击者往往会结合多种手段诱导用户点击。POST的内容也可以触发反射型XSS，但是触发条件比较苛刻（需要构建表单提交页面，引导用户点击），所以很少见。如果不想让前端获取到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本身的安全漏洞.1.3存储型XSS恶意脚本永久存储在目标服务器上。当浏览器请求数据时，脚本从服务器传回并执行，影响范围比反射型和DOM型XSS大。存储型XSS攻击的原因还是数据过滤没做好：前端向服务端提交数据时，没有做好过滤；服务器接收到数据时，在存储数据之前不进行过滤；前端向服务器请求数据，不过滤输出。存储型XSS攻击步骤：攻击者向目标网站的数据库提交恶意代码。当用户打开目标网站时，网站服务器会从数据库中取出恶意代码，拼接成HTML返回给浏览器。用户浏览器收到响应后，解析并执行，其中混入的恶意代码也被执行。恶意代码窃取用户数据并发送到攻击者网站，或冒充用户调用目标网站的接口执行攻击者指定的操作。这种攻击常见于有用户保存数据的网站功能，如论坛帖子、产品评论、用户私信等。如何防止存储型XSS攻击：前端数据传到服务器前，先转义/过滤（不能防止数据被抓取修改）。服务端收到数据，在存入数据库之前，进行转义/过滤。传入的数据应该在显示在页面上之前进行转义/过滤。除了小心转义之外，我们还需要一些其他的手段来防止XSS攻击：1.ContentSecurityPolicy在server端部分使用HTTP的Content-Security-Policy头来指定策略，或者在前端设置meta标签。例如下面的配置只允许加载同域下的资源：Content-Security-Policy:default-src'self'在前端和服务端设置CSP的效果是一样的，但是meta不能使用report。StrictCSP在XSS防御中可以起到以下作用：禁止加载外域代码，防止复杂的攻击逻辑。禁止从外部域提交。网站被攻击后，用户数据不会泄露到外域。禁用内联脚本执行（规则更严格，目前可在GitHub中找到）。防止未经授权的脚本执行（谷歌手机地图正在使用的新功能）。合理使用上报可以及时发现XSS，有利于尽快修复问题。2.输入内容长度控制对于不可信的输入，应该限制一个合理的长度。XSS虽然不能完全杜绝，但是可以增加XSS攻击的难度。3.输入内容限制对于某些输入，您可以限制不能包含特殊字符或只能输入数字。4.其他安全措施HTTP-onlyCookie：禁止JavaScript读取某些敏感cookie，攻击者完成XSS注入后无法窃取此cookie。Captcha：防止脚本冒充用户提交危险操作。点击查看更多12、如何隐藏页面中的某个元素？隐藏类型屏幕不是唯一的输出机制，例如屏幕上的不可见元素（隐藏元素），其中一些仍然可以被屏幕阅读器阅读（因为屏幕阅读器依赖可访问性树来说明）。为了消除歧义，我们将它们分为三大类：完全隐藏：元素从渲染树中消失，不占用空间。Visuallyhidden：在屏幕上不可见，占用空间。语义隐藏：屏幕阅读器无法读取，但通常会占用空间。完全隐藏1.display属性(不占空间)display:none;2.hidden属性(不占空间)HTML5新属性，相当于display:none