前端安全-面试题（2024）

1. 面试总结话术：

前端常见的安全问题主要包括以下几种：

1. 跨站脚本攻击（XSS）：攻击者通过在目标网站注入恶意脚本，当用户访问网站时，恶意脚本会被执行，从而窃取用户信息或进行其他恶意操作。这种攻击通常利用表单提交、URL参数等方式注入脚本。

1. 1. 存储型 xss 恶意代码存在数据库里，。
   2. 反射型 xss 恶意代码存在 URL 里
   3. DOM 型 xss 取出和执行恶意代码由浏览器端完成，属于前端 JavaScript 自身的安全漏洞，而其他两种 XSS 都属于服务端的安全漏洞

1. 跨站请求伪造（CSRF）：攻击者诱导用户访问恶意网站或链接，利用用户在已登录状态下对其他网站的信任，以用户的身份发送伪造请求，执行非法操作。

1. 1. 攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。

1. 点击劫持（ClickJacking）：攻击者通过隐藏或覆盖页面上的元素，诱导用户点击看似正常的按钮或链接，实际上执行了攻击者预设的操作。
2. HTTP头部注入攻击：攻击者通过修改HTTP头部信息，如Cookie、Referer等，伪造用户身份或欺骗服务器执行非法操作。
3. 文件上传漏洞：如果前端没有对用户上传的文件进行严格的验证和过滤，攻击者可能会上传恶意文件，如包含恶意代码的图片、脚本文件等，从而执行恶意操作。
4. 敏感信息泄露：前端代码中可能包含敏感信息，如API密钥、数据库连接字符串等，如果这些信息被泄露，攻击者可能会利用它们进行恶意操作。
5. 不安全的第三方库：前端开发中经常使用第三方库和插件，如果这些库存在安全漏洞，攻击者可能会利用它们进行攻击。因此，在选择和使用第三方库时，需要仔细评估其安全性。

为了防范这些安全问题，前端开发者可以采取以下措施：

• 对用户输入进行严格的验证和过滤，防止注入攻击。
• 使用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 的攻击步骤：

1. 攻击者将恶意代码提交到目标网站的数据库中。
2. 用户打开目标网站时，网站服务端将恶意代码从数据库取出，拼接在 HTML 中返回给浏览器。
3. 用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行。
4. 恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。

这种攻击常见于带有用户保存数据的网站功能，如论坛发帖、商品评论、用户私信等。

2.1.2. 反射型 XSS

反射型 XSS 的攻击步骤：

1. 攻击者构造出特殊的 URL，其中包含恶意代码。
2. 用户打开带有恶意代码的 URL 时，网站服务端将恶意代码从 URL 中取出，拼接在 HTML 中返回给浏览器。
3. 用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行。
4. 恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。

反射型 XSS 跟存储型 XSS 的区别是：存储型 XSS 的恶意代码存在数据库里，反射型 XSS 的恶意代码存在 URL 里。

反射型 XSS 漏洞常见于通过 URL 传递参数的功能，如网站搜索、跳转等。

由于需要用户主动打开恶意的 URL 才能生效，攻击者往往会结合多种手段诱导用户点击。

POST 的内容也可以触发反射型 XSS，只不过其触发条件比较苛刻（需要构造表单提交页面，并引导用户点击），所以非常少见。

2.1.3. DOM 型 XSS

DOM 型 XSS 的攻击步骤：

1. 攻击者构造出特殊的 URL，其中包含恶意代码。
2. 用户打开带有恶意代码的 URL。
3. 用户浏览器接收到响应后解析执行，前端 JavaScript 取出 URL 中的恶意代码并执行。
4. 恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。

DOM 型 XSS 跟前两种 XSS 的区别：DOM 型 XSS 攻击中，取出和执行恶意代码由浏览器端完成，属于前端 JavaScript 自身的安全漏洞，而其他两种 XSS 都属于服务端的安全漏洞。
eval()、setTimeout()、setInterval()、Function()、innerHTML、document.write() 等 DOM 型 XSS 漏洞

2.2. XSS 攻击的预防

输入过滤
通过前面的介绍可以得知，XSS 攻击有两大要素：

1. 攻击者提交恶意代码。
2. 浏览器执行恶意代码。

针对第一个要素：我们是否能够在用户输入的过程，过滤掉用户输入的恶意代码呢？

• 既然输入过滤并非完全可靠，我们就要通过“防止浏览器执行恶意代码”来防范 XSS。这部分分为两类：
• 防止 HTML 中出现注入。
• 防止 JavaScript 执行时，执行恶意代码。

预防存储型和反射型 XSS 攻击

存储型和反射型 XSS 都是在服务端取出恶意代码后，插入到响应 HTML 里的，攻击者刻意编写的“数据”被内嵌到“代码”中，被浏览器所执行。

预防这两种漏洞，有两种常见做法：

• 改成纯前端渲染，把代码和数据分隔开。
• 对 HTML 做充分转义。

纯前端渲染的过程：

1. 浏览器先加载一个静态 HTML，此 HTML 中不包含任何跟业务相关的数据。
2. 然后浏览器执行 HTML 中的 JavaScript。
3. JavaScript 通过 Ajax 加载业务数据，调用 DOM API 更新到页面上。

在纯前端渲染中，我们会明确的告诉浏览器：下面要设置的内容是文本（.innerText），还是属性（.setAttribute），还是样式（.style）等等。浏览器不会被轻易的被欺骗，执行预期外的代码了。

但纯前端渲染还需注意避免 DOM 型 XSS 漏洞（例如 onload 事件和 href 中的 javascript:x