【2025版】最新前端必知的跨站脚本攻击（XSS）示例与解决方案，从零基础到精通，收藏这篇就够了！

O了，看破就是要说破，我是V哥，一个永远18的程序员，喜欢广交天下志同道合的朋友，喜欢分享技术经验，讲真，这会促进我的荷尔蒙分泌，所以会一直坚持下去，欢迎关注威哥爱编程，技术路上我们一起成长。

程序员肉肉

1145人浏览 · 2025-02-21 10:30:29

程序员肉肉 · 2025-02-21 10:30:29 发布

跨站脚本攻击（Cross-Site Scripting，通常缩写为XSS）是一种常见的网络安全漏洞，它允许攻击者将恶意脚本注入到其他用户会浏览的页面中。

XSS攻击的示例代码可以帮助我们了解攻击者可能使用的技术。但请注意，了解这些示例的目的是为了更好地防御XSS攻击，而不是用于恶意目的。

XSS 攻击通常分为三种类型

1. 反射型XSS：攻击者诱使用户点击一个链接，该链接包含恶意脚本，当用户点击时，恶意脚本被发送到服务器，然后立即反射回用户的浏览器执行。

2. 存储型XSS：恶意脚本被存储在目标服务器上（例如在数据库中），当其他用户访问存储了恶意脚本的页面时，脚本会被执行。

3. DOM-based XSS：当页面的Document Object Model（DOM）被恶意脚本修改，并且这些修改导致浏览器执行了恶意操作时发生的XSS攻击。

XSS 示例

1. 反射型XSS示例：

反射型XSS通常发生在应用程序接收输入并将其作为响应的一部分返回给用户时，而没有进行适当的处理。

假设有一个搜索功能的URL如下：

http://example.com/search?query=<script>alert('XSS')</script>

如果网站没有对输入进行适当的过滤和转义，那么当用户点击这个链接时，<script> 标签内的JavaScript代码就会在用户的浏览器中执行。

易受攻击的服务器端代码示例（伪代码）:

$query = $_GET['search'];   $result = doSearchQuery($query); // 执行搜索   echo "Search results for: " . $query;

2. 存储型XSS示例：

如果一个网站允许用户在留言板上发布消息，并且没有对用户输入进行过滤，攻击者可以发布如下消息：

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

这条消息被存储在数据库中，之后每当有其他用户访问留言板页面时，这条消息中的JavaScript代码就会被执行。

易受攻击的服务器端存储和显示代码示例（伪代码）:

$comment = $_POST['comment'];   saveCommentToDatabase($comment); // 存储评论到数据库      // 其他用户查看评论   $comment = getCommentFromDatabase(); // 从数据库获取评论   echo "Comment: " . $comment;

3. DOM-based XSS示例：

如果一个网页有一个JavaScript函数，它使用document.location来获取当前页面的URL，并且没有对URL进行适当的处理，那么攻击者可以通过修改页面的URL来执行恶意脚本：

<a href="javascript:alert('XSS')">Click me</a>

如果原始页面的JavaScript代码是这样的：

var currentUrl = document.location;

攻击者可以通过修改页面URL来注入JavaScript代码。

易受攻击的JavaScript代码示例:

var userContent = document.getElementById('userInput').value;   document.getElementById('content').innerHTML = userContent;

攻击者可以通过以下方式利用这个漏洞：

<span id="userInput"><script>alert('XSS')</script></span>

了解了攻击，那需要如何防御 XSS 攻击呢，作为有经验的程序员是必须要懂滴。

XSS 解决方案

输入过滤：对所有用户输入进行过滤，不允许<script>、<iframe>等潜在危险的HTML标签被输入。
输出编码：在将用户输入的数据输出到页面时，进行HTML编码，将<、>等字符转换成HTML实体。
使用HTTP-only Cookies：设置HTTP-only标志，使得Cookie不能通过客户端脚本访问。
内容安全策略（CSP）：通过CSP可以限制网页可以加载哪些资源，减少XSS攻击的机会。
使用安全的框架和库：现代Web框架和库通常提供了自动的XSS防护。
避免直接内联JavaScript：尽量避免在HTML中直接内联JavaScript代码，使用外部JavaScript文件可以更容易地管理权限和内容。
使用自动化工具：使用自动化工具来检测和修复XSS漏洞。
错误处理：确保错误信息不会暴露敏感信息，并且不执行用户输入的脚本。

通过这些措施，可以显著降低XSS攻击的风险，保护用户和网站的数据安全。

下面是防御XSS攻击的代码示例

以下是一些基本的防御措施，用于防止XSS攻击。

输入过滤示例（HTML特殊字符编码）:

$safeQuery = htmlspecialchars($_GET['search'], ENT_QUOTES, 'UTF-8');   echo "Search results for: " . $safeQuery;

输出编码示例（HTML特殊字符编码）:

echo "Comment: " . htmlspecialchars($comment, ENT_QUOTES, 'UTF-8');

使用内容安全策略（CSP）:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">

使用现代Web框架的自动转义功能:

{{ user_input|escape }}

JavaScript中避免直接插入HTML:

var userContent = document.getElementById('userInput').value;   // 使用textContent而不是innerHTML来防止HTML注入   document.getElementById('content').textContent = userContent;

请记住，这些示例仅用于说明目的，实际应用中需要根据具体情况选择合适的防御策略。