随着互联网的不断发展，越来越多的 Web 应用采用了单页应用（Single Page Application）的架构模式，它使得前端开发变得更加便捷和高效，也带来了前端安全的挑战。在 SPA 应用中，大量的业务逻辑和数据处理都在前端完成，因此前端安全就显得尤为重要。本文将介绍 SPA 应用中的一些前端安全实践，帮助开发者加强对前端应用的安全性保障。
1、防止 XSS 攻击
XSS（Cross Site Scripting）攻击是一种常见的 Web 安全漏洞，攻击者通过在网页中嵌入恶意脚本，实现窃取用户敏感信息、篡改网页内容等攻击行为。在 SPA 应用中，前端往往需要直接渲染后端返回的 HTML 代码，因此容易遭受 XSS 攻击。
要防止 XSS 攻击，可以采取以下措施：
1.1、过滤用户输入
过滤用户输入是最基本也是最有效的防范 XSS 攻击的措施。可以通过在服务端对用户输入进行过滤和验证，只允许用户输入合法的内容。在前端也可以采用一些过滤器来过滤用户输入，例如将 < 转义为 <、将 > 转义为 > 等。
示例代码：
-- -------------------- ---- -------
-------- --------------- -
------ ----------------------- --------------- -
------ ------- -
---- ----
------ --------
---- ----
------ -------
---- ----
------ -------
---- -----
------ ---------
---- ----
------ --------
-
---
-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 攻击。
示例代码：
-- -------------------- ---- -------
-- ------- -----
-------- ----------------- ---- ----- -
----- --------- - --------------------------- -------------------------
----- ------- - ------------------- -- -------------------
-- -------- -- ---------------------------- -
-------
- ---- -
----------------------------------
-
-// 设置 SameSite 属性 document.cookie = "name=value; SameSite=Strict";
2.2、添加 CSRF Token
在客户端发起请求时，可以在请求头或请求参数中添加一个随机生成的 CSRF Token，服务端在验证请求时需要验证 Token 是否合法。这样能够有效防止 CSRF 攻击。
示例代码：
-- -------------------- ---- ------- -- -- ---- ----- ----- ----- - ------------------------------------ --------------------------------- ------- -- ----- --------------------------------------------- - ---------------------------------- -- ------- ----- ----- ---- - ----------------------------------- ----- ---------- - -------------------------------- --------------- - --------- --------------- - -------- ---------------- - ---------------------------------- -----------------------------
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。
示例代码：
-- -------------------- ---- -------
-- - ----- -------
-------- -------------------------- -
----- ----------- ------------- - ----------------
------------ -- -
-------------------------- - -----
-- ----
-- ----------- -
------ ---------------
- ---- -
------ -----
-
-总结
本文介绍了 SPA 应用中的一些前端安全实践，包括防止 XSS 攻击、防止 CSRF 攻击和防止 Clickjacking 攻击。这些实践都能够有效提升前端应用的安全性，值得开发者在开发过程中广泛应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b22a74add4f0e0ffb562fc