前端安全是保障网页和应用程序免受各种攻击的重要方面。以下详细介绍常见的前端安全问题及相应的防范措施。
XSS（跨站脚本攻击）
- 原理：攻击者通过在目标网站注入恶意脚本，当用户访问该网站时，恶意脚本会在用户浏览器中执行，从而获取用户的敏感信息，如 cookie、会话令牌等。
- 类型
- 反射型 XSS： 攻击者诱导用户点击包含恶意脚本的链接，服务器将恶意脚本作为响应返回给浏览器并执行。例如，搜索框未对用户输入进行过滤，攻击者构造包含恶意脚本的搜索参数，当用户点击该链接时，恶意脚本会在页面中执行。
- 存储型 XSS： 攻击者将恶意脚本存储到目标网站的数据库中，当其他用户访问包含该恶意脚本的页面时，脚本会自动执行。比如，在论坛、评论区等允许用户输入的地方注入恶意脚本。
- 防范措施
- 输入过滤： 对用户输入进行严格的验证和过滤，只允许合法的字符和格式。例如，使用正则表达式过滤特殊字符。
- 输出编码： 在将用户输入显示到页面上时，对其进行 HTML 实体编码，将特殊字符转换为对应的 HTML 实体，防止脚本被执行。在 JavaScript 中，可以使用以下函数进行编码：
function htmlEncode(str) {return str.replace(/[&<>"']/g, function (match) {switch (match) {case '&': return '&';case '<': return '<';case '>': return '>';case '"': return '"';case "'": return ''';}});
}
- 设置 CSP（内容安全策略）： 通过 HTTP 头或 标签设置 CSP，限制页面可以加载的资源来源，防止恶意脚本的加载和执行。例如：
<meta http-equiv="Content-Security-Policy" content="default-src'self'; script-src'self'">
CSRF（跨站请求伪造）
- 原理：攻击者诱导用户在已登录的网站上执行恶意操作，利用用户的身份信息向目标网站发送恶意请求。例如，用户在已登录的银行网站上，攻击者诱导用户访问包含恶意请求的页面，该请求会以用户的身份向银行网站发起转账等操作。
- 防范措施
- 验证请求来源： 检查请求的 Referer 头或 Origin 头，确保请求来自合法的来源。在服务器端可以通过检查请求头来判断请求是否合法。
- 使用 CSRF 令牌： 在表单或请求中添加 CSRF 令牌，服务器在处理请求时验证令牌的有效性。在 HTML 表单中添加 CSRF 令牌：
<form action="/submit" method="post"><input type="hidden" name="csrf_token" value="your_csrf_token"><input type="text" name="data"><input type="submit" value="Submit">
</form>
- SameSite 属性：设置 cookie 的 SameSite 属性，限制 cookie 在跨站请求中的使用。SameSite 属性有三个值：Strict、Lax 和 None。可以根据实际需求选择合适的值，例如：
document.cookie = "session_id=12345; SameSite=Strict";
SQL 注入
- 原理：攻击者通过在输入框中输入恶意的 SQL 语句，破坏原有的 SQL 查询逻辑，从而获取或修改数据库中的数据。例如，在登录表单的用户名输入框中输入 ’ OR ‘1’='1，可能会绕过登录验证。
- 防范措施
- 使用参数化查询： 在服务器端使用参数化查询，将用户输入作为参数传递给 SQL 查询，而不是直接拼接 SQL 语句。在 Node.js 中使用 mysql2 进行参数化查询：
const mysql = require('mysql2');
const connection = mysql.createConnection({host: 'localhost',user: 'root',password: 'password',database: 'test'
});
const username = req.body.username;
const password = req.body.password;
const query = 'SELECT * FROM users WHERE username = ? AND password = ?';
connection.query(query, [username, password], function (error, results) {if (error) throw error;// 处理查询结果
});
- 输入验证：对用户输入进行严格的验证，只允许合法的字符和格式。
点击劫持
- 原理：攻击者通过透明的 iframe 覆盖在目标网站上，诱导用户在不知情的情况下点击 iframe 中的按钮或链接，从而执行恶意操作。
- 防范措施
- 设置 X-Frame-Options 头： 在服务器端设置 X-Frame-Options 头，限制页面是否可以被其他网站通过 iframe 嵌入。可以设置的值有 DENY、SAMEORIGIN 和 ALLOW-FROM。例如，在 Node.js 中使用 Express 框架设置该头：
const express = require('express');
const app = express();
app.use(function (req, res, next) {res.setHeader('X-Frame-Options', 'DENY');next();
});
// 其他路由和中间件
app.listen(3000, function () {console.log('Server is running on port 3000');
});
- 使用 CSP 的 frame-ancestors 指令： 通过 CSP 的 frame-ancestors 指令限制页面可以被嵌入的来源。例如：
<meta http-equiv="Content-Security-Policy" content="frame-ancestors'self'">
保护敏感信息
- 避免在 URL 中暴露敏感信息
- 不要将用户的敏感信息（如密码、信用卡号等）作为 URL 参数传递，因为 URL 可能会被记录在浏览器历史记录、服务器日志中，容易造成信息泄露。
- 安全存储和传输敏感信息
- 在客户端存储敏感信息时，尽量使用安全的存储方式，如 localStorage 结合加密算法进行加密存储。在传输敏感信息时，使用 HTTPS 协议，确保数据在传输过程中不被窃取和篡改。
定期更新依赖库
- 前端项目通常会使用各种开源的库和框架，这些库可能存在安全漏洞。定期检查并更新项目中的依赖库到最新版本，以修复已知的安全漏洞。可以使用工具如 npm outdated 检查依赖库的更新情况，使用 npm update 更新依赖库。
安全的第三方脚本管理
- 谨慎引入第三方脚本
- 只从可信任的来源引入第三方脚本，如 Google Analytics、Font Awesome 等。在引入第三方脚本前，仔细评估其安全性和隐私政策。
- 使用子资源完整性（SRI）
- 对于引入的第三方脚本，可以使用 SRI 来确保脚本文件在传输过程中没有被篡改。在 < script > 标签中添加 integrity 属性，指定脚本文件的哈希值。例如：
<script src="https://example.com/script.js"integrity="sha384-abcdef1234567890"crossorigin="anonymous">
</script>