1. 面试总结话术：
前端常见的安全问题主要包括以下几种：
跨站脚本攻击（XSS）：攻击者通过在目标网站注入恶意脚本，当用户访问网站时，恶意脚本会被执行，从而窃取用户信息或进行其他恶意操作。这种攻击通常利用表单提交、URL参数等方式注入脚本。
- 存储型 xss 恶意代码存在数据库里，。2. 反射型 xss 恶意代码存在 URL 里3. DOM 型 xss 取出和执行恶意代码由浏览器端完成，属于前端 JavaScript 自身的安全漏洞，而其他两种 XSS 都属于服务端的安全漏洞
跨站请求伪造（CSRF）：攻击者诱导用户访问恶意网站或链接，利用用户在已登录状态下对其他网站的信任，以用户的身份发送伪造请求，执行非法操作。
- 攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。
点击劫持（ClickJacking）：攻击者通过隐藏或覆盖页面上的元素，诱导用户点击看似正常的按钮或链接，实际上执行了攻击者预设的操作。
HTTP头部注入攻击：攻击者通过修改HTTP头部信息，如Cookie、Referer等，伪造用户身份或欺骗服务器执行非法操作。
文件上传漏洞：如果前端没有对用户上传的文件进行严格的验证和过滤，攻击者可能会上传恶意文件，如包含恶意代码的图片、脚本文件等，从而执行恶意操作。
敏感信息泄露：前端代码中可能包含敏感信息，如API密钥、数据库连接字符串等，如果这些信息被泄露，攻击者可能会利用它们进行恶意操作。
不安全的第三方库：前端开发中经常使用第三方库和插件，如果这些库存在安全漏洞，攻击者可能会利用它们进行攻击。因此，在选择和使用第三方库时，需要仔细评估其安全性。
为了防范这些安全问题，前端开发者可以采取以下措施：
- 对用户输入进行严格的验证和过滤，防止注入攻击。
- 使用HTTPS协议传输数据，保护数据的机密性和完整性。
- 设置合适的HTTP头部信息，防止点击劫持和HTTP头部注入攻击。
- 对上传的文件进行严格的验证和过滤，防止文件上传漏洞。
- 避免在前端代码中存储敏感信息，将敏感信息存储在服务器端。
- 定期更新和修补第三方库和插件的安全漏洞。
- 使用Web应用防火墙（WAF）等安全设备增强应用的安全性。
2. XSS
XSS是跨站脚本攻击（Cross-Site Scripting）的简称，它是个老油条了，在OWASP Web Application Top 10排行榜中长期霸榜，从未掉出过前三名。XSS这类安全问题发生的本质原因在于，浏览器错误的将攻击者提供的用户输入数据当做JavaScript脚本给执行了。
XSS 的本质是：恶意代码未经过滤，与网站正常的代码混在一起；浏览器无法分辨哪些脚本是可信的，导致恶意脚本被执行。
- 通常页面中包含的用户输入内容都在固定的容器或者属性内，以文本的形式展示。
- 攻击者利用这些页面的用户输入片段，拼接特殊格式的字符串，突破原有位置的限制，形成了代码片段。
- 攻击者通过在目标网站上注入脚本，使之在用户的浏览器上运行，从而引发潜在风险。
- 通过 HTML 转义，可以防止 XSS 攻击， HTML 转义，并不等于高枕无忧。
- 对于链接跳转，如
<a href="xxx"或location.href="xxx"，要检验其内容，禁止以javascript:开头的链接，和其他非法的 scheme。 - 在 HTML 中内嵌的文本中，恶意内容以 script 标签形成注入。
- 在内联的 JavaScript 中，拼接的数据突破了原本的限制（字符串，变量，方法名等）。
- 在标签属性中，恶意内容包含引号，从而突破属性值的限制，注入其他属性或者标签。
- 在标签的 href、src 等属性中，包含 javascript: 等可执行代码。
- 在 onload、onerror、onclick 等事件中，注入不受控制代码。
- 在 style 属性和标签中，包含类似 background-image:url("javascript:..."); 的代码（新版本浏览器已经可以防范）。
- 在 style 属性和标签中，包含类似 expression(...) 的 CSS 表达式代码（新版本浏览器已经可以防范）。
以下内容不可信
- 来自用户的 UGC 信息
- 来自第三方的链接
- URL 参数
- POST 参数
- Referer （可能来自不可信的来源）
- Cookie （可能来自其他子域注入）
2.1. XSS 攻击的分类
类型
存储区*
插入点*
存储型 XSS
后端数据库
HTML
反射型 XSS
URL
HTML
DOM 型 XSS
后端数据库/前端存储/URL
前端 JavaScript
- 存储区：恶意代码存放的位置。
- 插入点：由谁取得恶意代码，并插入到网页上。
2.1.1. 存储型 XSS
存储型 XSS 的攻击步骤：
- 攻击者将恶意代码提交到目标网站的数据库中。
- 用户打开目标网站时，网站服务端将恶意代码从数据库取出，拼接在 HTML 中返回给浏览器。
- 用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行。
- 恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。
这种攻击常见于带有用户保存数据的网站功能，如论坛发帖、商品评论、用户私信等。
2.1.2. 反射型 XSS
反射型 XSS 的攻击步骤：
- 攻击者构造出特殊的 URL，其中包含恶意代码。
- 用户打开带有恶意代码的 URL 时，网站服务端将恶意代码从 URL 中取出，拼接在 HTML 中返回给浏览器。
- 用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行。
- 恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。
反射型 XSS 跟存储型 XSS 的区别是：存储型 XSS 的恶意代码存在数据库里，反射型 XSS 的恶意代码存在 URL 里。
反射型 XSS 漏洞常见于通过 URL 传递参数的功能，如网站搜索、跳转等。
由于需要用户主动打开恶意的 URL 才能生效，攻击者往往会结合多种手段诱导用户点击。
POST 的内容也可以触发反射型 XSS，只不过其触发条件比较苛刻（需要构造表单提交页面，并引导用户点击），所以非常少见。
2.1.3. DOM 型 XSS
DOM 型 XSS 的攻击步骤：
- 攻击者构造出特殊的 URL，其中包含恶意代码。
- 用户打开带有恶意代码的 URL。
- 用户浏览器接收到响应后解析执行，前端 JavaScript 取出 URL 中的恶意代码并执行。
- 恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。
DOM 型 XSS 跟前两种 XSS 的区别：DOM 型 XSS 攻击中，取出和执行恶意代码由浏览器端完成，属于前端 JavaScript 自身的安全漏洞，而其他两种 XSS 都属于服务端的安全漏洞。
eval()、setTimeout()、setInterval()、Function()、innerHTML、document.write() 等 DOM 型 XSS 漏洞
2.2. XSS 攻击的预防
输入过滤
通过前面的介绍可以得知，XSS 攻击有两大要素：
- 攻击者提交恶意代码。
- 浏览器执行恶意代码。
针对第一个要素：我们是否能够在用户输入的过程，过滤掉用户输入的恶意代码呢？
- 既然输入过滤并非完全可靠，我们就要通过“防止浏览器执行恶意代码”来防范 XSS。这部分分为两类：
- 防止 HTML 中出现注入。
- 防止 JavaScript 执行时，执行恶意代码。
预防存储型和反射型 XSS 攻击
存储型和反射型 XSS 都是在服务端取出恶意代码后，插入到响应 HTML 里的，攻击者刻意编写的“数据”被内嵌到“代码”中，被浏览器所执行。
预防这两种漏洞，有两种常见做法：
- 改成纯前端渲染，把代码和数据分隔开。
- 对 HTML 做充分转义。
纯前端渲染的过程：
- 浏览器先加载一个静态 HTML，此 HTML 中不包含任何跟业务相关的数据。
- 然后浏览器执行 HTML 中的 JavaScript。
- JavaScript 通过 Ajax 加载业务数据，调用 DOM API 更新到页面上。
在纯前端渲染中，我们会明确的告诉浏览器：下面要设置的内容是文本（.innerText），还是属性（.setAttribute），还是样式（.style）等等。浏览器不会被轻易的被欺骗，执行预期外的代码了。
但纯前端渲染还需注意避免 DOM 型 XSS 漏洞（例如 onload 事件和 href 中的 javascript:x
版权归原作者 夏草v 所有， 如有侵权，请联系我们删除。