前端安全最佳实践：如何防止 XSS、CSRF 等常见的安全漏洞

最新推荐文章于 2025-03-31 23:59:21 发布

m0_74825447

最新推荐文章于 2025-03-31 23:59:21 发布

阅读量1.7k

点赞数 9

文章标签：前端安全 xss

原文链接：https://blog.csdn.net/chaosweet/article/details/143796778

版权

文章目录

前言

随着互联网技术的飞速发展，前端应用的功能越来越强大，用户体验也越来越好。然而，这也使得前端应用面临更多的安全威胁。其中，跨站脚本攻击（XSS）和跨站请求伪造（CSRF）是最常见且危害较大的两种攻击方式。本文将详细介绍这两种攻击的原理，并提供详细的防范措施，帮助开发者构建更加安全的前端应用。

一、跨站脚本攻击（XSS）

1.1 原理

跨站脚本攻击（Cross-Site Scripting，简称 XSS）是一种攻击手段，攻击者通过在网页中插入恶意脚本，当其他用户浏览该网页时，这些恶意脚本会在用户的浏览器中执行，从而盗取用户信息、篡改网页内容或进行其他恶意操作。XSS 攻击主要分为三种类型：

反射型 XSS：恶意脚本通过 URL 参数或其他输入点传递到服务器，然后直接返回给用户。这种类型的 XSS 攻击通常发生在搜索结果页、错误消息页等动态生成的页面上。
存储型 XSS：恶意脚本被存储在服务器上，当其他用户访问相关页面时，脚本会被执行。这种类型的 XSS 攻击常见于评论系统、论坛、博客等允许用户提交内容的场景。
DOM 型 XSS：恶意脚本通过修改页面的 DOM 结构来执行，通常发生在客户端 JavaScript 代码中。这种类型的 XSS 攻击不涉及服务器端的处理，完全在客户端发生。

1.2 防范措施

输入验证和过滤
输入验证和过滤是防止 XSS 攻击的第一道防线。开发者需要对用户提交的所有数据进行严格的验证和过滤，确保数据中不包含恶意脚本。常用的验证方法包括正则表达式匹配、黑名单过滤等。
```
function sanitizeInput(input) {
  // 使用正则表达式过滤掉可能的恶意脚本
  return input.replace(/[<>&"']/g, function(char) {
    return '&#' + char.charCodeAt(0) + ';'
  })
}
```

输出编码
在将数据输出到 HTML 页面时，对数据进行适当的编码，可以有效防止恶意脚本的执行。常见的编码方法包括 HTML 实体编码、JavaScript 编码等。

function escapeHtml(unsafe) {
  return unsafe
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#039;")
}

const userComment = "<script>alert('XSS');</script>"
const safeComment = escapeHtml(userComment)
document.getElementById('comment').innerHTML = safeComment

Content Security Policy (CSP)
Content Security Policy (CSP) 是一种安全机制，用于限制网页可以加载的资源。通过设置 CSP 头，可以有效地防止恶意脚本的执行。CSP 头可以通过 HTTP 响应头或 <meta> 标签设置。
```
Content-Security-Policy: default-src 'self'; script-s
```

最低0.47元/天解锁文章