前端知识库-前端安全系列一（攻防）

前端安全是前端开发中不可忽视的重要领域，它涉及到用户数据的保护、应用的安全运行等多个方面。本文将重点介绍前端安全中的两种主要攻击方式：跨站点请求伪造（CSRF）和跨站脚本攻击（XSS），以及它们的防御策略。

CSRF攻击概述：CSRF（Cross-Site Request Forgery）是一种网络攻击技术，攻击者通过伪造用户的请求，利用用户当前已登录的身份，在用户不知情的情况下执行非法的操作。

CSRF攻击条件：

• 用户登录被攻击网站，并保存了cookie信息。
• 用户打开另一个tab访问攻击者的恶意网站。
• 被攻击网站未做任何CSRF防护。

CSRF攻击流程：

1. 用户登录A网站，生成登录cookie。
2. 用户在同一浏览器中打开B（伪造攻击网站）。
3. B网站通过脚本获取A的cookie并发送给攻击者后台。
4. 攻击者拿到cookie，通过cookie获取用户信息并进行非法操作。

CSRF防御策略：

• 使用POST方法：尽量使用POST方法提交表单，限制GET方法的使用，增加攻击难度。
• 设置HttpOnly属性：将cookie属性设置为HttpOnly，使攻击者无法获取cookie。
• 服务端增加token验证：每次登录时服务端生成token，并在每次请求中校验token。
• Referer识别：服务端通过header中的referer获取来源地址，如果是非法的则拒绝操作。

XSS攻击概述：XSS（Cross-Site Scripting）是指攻击者通过在网页中嵌入恶意脚本，当用户浏览该网页时，恶意脚本会在用户的浏览器中执行，从而窃取用户信息或进行其他恶意操作。

XSS攻击类型：

• 反射型：攻击者通过提供包含恶意脚本的链接，当用户点击链接时，恶意脚本被反射回用户的浏览器并执行。
• 存储型：攻击者将恶意脚本存储在受攻击的网站中，如博客、论坛等，当用户浏览这些页面时，恶意脚本被执行。
• DOM型：攻击者通过操纵客户端的DOM对象，将恶意脚本插入到页面中并执行。

XSS攻击流程：

1. 攻击者伪造包含恶意脚本的链接或内容。
2. 用户打开包含恶意脚本的链接或页面。
3. 恶意脚本在用户的浏览器中执行，获取用户信息进行不法操作。

XSS防御策略：

• 通用防御：

  在输出HTML时，加上Content Security Policy的Http Header，防止嵌入第三方的脚本文件（但需注意IE或低版本浏览器可能不支持）。

  在设置Cookie时，加上HttpOnly参数，防止Cookie信息被盗取（可兼容至IE6）。

  在开发API时，检验请求的Referer参数，但需注意IE或低版本浏览器中Referer参数可以被伪造。

• 反射型防御：

  后台渲染HTML时，使用htmlspecialchars、htmlentities等函数对输出进行过滤。

  前端通过后台API渲染页面时，尽量使用innerText或textContent输出文本内容。

• 存储型防御：

  服务端处理存储的数据时，将可能执行的脚本字符转成字符串。

• DOM型防御：

  避免客户端文档重写、重定向或其他敏感操作。

  避免使用客户端数据，尽量在服务器端实现动态页面。

  分析和强化客户端JS代码，特别是受到用户影响的DOM对象。

  在输出变量到页面时先进行编码转义。

点击劫持攻击概述：点击劫持（Clickjacking）是一种视觉欺骗手段，攻击者通过透明的iframe或其他方式覆盖目标网站，使用户在不知情的情况下点击恶意链接或按钮。

点击劫持攻击流程：

1. 攻击者伪造使用iframe伪造的网站。
2. 用户在伪造的网站上进行不安全的操作。
3. 攻击者通过不安全操作获取想要的信息。

点击劫持防御策略：

• JS防范：判断上层路由地址是否和原网站的地址保持一致，如果不一致则进行警告或重定向。
• Header配置：通过配置HTTP Header中的X-Frame-Options来防止网站被嵌入iframe中。如nginx配置add_header X-Frame-Options SAMEORIGIN;，或Node.js配置res.setHeader('X-Frame-Options','DENY');。

前端安全是前端开发中不可或缺的一部分，掌握常见的网站攻击手段及其防御策略是前端开发者必备的技能。在开发过程中，我们应注重安全性设计，杜绝已知的漏洞，了解可能会有的漏洞，并努力营造一个安全健康的互联网环境。