随着互联网的不断发展，越来越多的 Web 应用采用了单页应用（Single Page Application）的架构模式，它使得前端开发变得更加便捷和高效，也带来了前端安全的挑战。在 SPA 应用中，大量的业务逻辑和数据处理都在前端完成，因此前端安全就显得尤为重要。本文将介绍 SPA 应用中的一些前端安全实践，帮助开发者加强对前端应用的安全性保障。
1、防止 XSS 攻击
XSS（Cross Site Scripting）攻击是一种常见的 Web 安全漏洞，攻击者通过在网页中嵌入恶意脚本，实现窃取用户敏感信息、篡改网页内容等攻击行为。在 SPA 应用中，前端往往需要直接渲染后端返回的 HTML 代码，因此容易遭受 XSS 攻击。
要防止 XSS 攻击，可以采取以下措施：
1.1、过滤用户输入
过滤用户输入是最基本也是最有效的防范 XSS 攻击的措施。可以通过在服务端对用户输入进行过滤和验证，只允许用户输入合法的内容。在前端也可以采用一些过滤器来过滤用户输入，例如将 < 转义为 <、将 > 转义为 > 等。
示例代码：
function escapeHtml(str) {
return str.replace(/[&<>"']/g, function(match) {
switch (match) {
case "&":
return "&";
case "<":
return "<";
case ">":
return ">";
case "\"":
return """;
case "'":
return "'";
}
});
}1.2、设置 CSP 策略
Content Security Policy（CSP）是一项新的 Web 安全标准，它允许网站管理员通过设置 HTTP 头来控制网页内嵌入的资源（例如 JavaScript、CSS、图片等）的来源。CSP 可以有效防范 XSS 攻击，因为攻击者往往需要在网页中注入外部脚本，而 CSP 可以限制脚本的来源，让攻击者难以注入恶意脚本。
示例代码：
<meta http-equiv="Content-Security-Policy"
content="default-src 'none';
script-src 'self' 'unsafe-inline' 'unsafe-eval';
style-src 'self' 'unsafe-inline';
img-src 'self';
connect-src 'self';
font-src 'self';">2、防止 CSRF 攻击
CSRF（Cross Site Request Forgery）攻击是一种常见的 Web 安全漏洞，攻击者通过伪造用户的请求，实现在用户不知情的情况下执行某些操作（例如转账、发表评论等），从而达到攻击的目的。
要防止 CSRF 攻击，可以采取以下措施：
2.1、验证请求来源
在服务端可以通过验证 HTTP Referer 或 Origin 头信息来判断请求的来源是否合法，只接受来自指定域名或 IP 地址的请求。在前端也可以通过设置 SameSite 属性来限制 Cookie 只能用于同一站点的请求，从而防止 CSRF 攻击。
示例代码：
// Express 中间件示例
function checkReferer(req, res, next) {
const whitelist = ["https://www.example.com", "http://localhost:3000"];
const referer = req.headers.referer || req.headers.origin;
if (referer && whitelist.includes(referer)) {
next();
} else {
res.status(403).send("Forbidden");
}
}// 设置 SameSite 属性 document.cookie = "name=value; SameSite=Strict";
2.2、添加 CSRF Token
在客户端发起请求时，可以在请求头或请求参数中添加一个随机生成的 CSRF Token，服务端在验证请求时需要验证 Token 是否合法。这样能够有效防止 CSRF 攻击。
示例代码：
// 生成 CSRF Token
const token = Math.random().toString(36).slice(2);
localStorage.setItem("csrfToken", token);
// 设置请求头
axios.defaults.headers.common["X-CSRF-Token"] = localStorage.getItem("csrfToken");
// 表单提交时添加 Token
const form = document.querySelector("#my-form");
const tokenInput = document.createElement("input");
tokenInput.type = "hidden";
tokenInput.name = "_csrf";
tokenInput.value = localStorage.getItem("csrfToken");
form.appendChild(tokenInput);3、防止 Clickjacking 攻击
Clickjacking 攻击是一种通过将一个网站嵌入到另一个网站中，从而欺骗用户点击不可见的按钮或链接，实现窃取用户信息或执行恶意操作的攻击方式。要防止 Clickjacking 攻击，可以采取以下措施：
3.1、禁止嵌入到 iframe 中
可以通过设置 HTTP 头或在页面中添加 meta 标签的方式禁止网页被嵌入到 iframe 中，从而防止 Clickjacking 攻击。
示例代码：
// 在 Express 中设置 HTTP 头
app.use(function(req, res, next) {
res.setHeader("X-Frame-Options", "DENY");
next();
});<!-- 在 HTML 中添加 meta 标签 --> <meta http-equiv="X-Frame-Options" content="DENY">
3.2、使用 JavaScript 防护
在 SPA 应用中，也可以通过 JavaScript 防护技术来防止 Clickjacking 攻击。例如可以在页面上随机生成一些不可见的元素，并在点击时根据生成的结果决定是否执行操作，从而防止被 Clickjacking。
示例代码：
// 在 React 中使用防护组件
function ClickjackingProtect(props) {
const [isVisible, setIsVisible] = useState(false);
useEffect(() => {
setIsVisible(Math.random() < 0.5);
}, []);
if (isVisible) {
return props.children;
} else {
return null;
}
}总结
本文介绍了 SPA 应用中的一些前端安全实践，包括防止 XSS 攻击、防止 CSRF 攻击和防止 Clickjacking 攻击。这些实践都能够有效提升前端应用的安全性，值得开发者在开发过程中广泛应用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b22a74add4f0e0ffb562fc