前端安全浅浅分享

喜之郎果冻o
191 阅读8分钟

一、前端安全概述

前端安全主要是指在用户浏览器中运行的代码的安全性。由于前端代码是公开的，容易被访问和利用，开发者必须采取一系列措施来保护代码及用户数据免受恶意攻击。前端安全涉及多个方面，包括但不限于跨站脚本攻击（XSS）、跨站请求伪造（CSRF）、内容安全策略（CSP）、输入验证和输出编码等。

二、常见的前端安全漏洞及防护措施

  1. 跨站脚本攻击（XSS）

描述：XSS 攻击通过在网页中注入恶意脚本，使其在用户浏览器中执行，攻击者可以窃取用户数据、劫持用户会话等。

防护措施：

  • 输入验证：对用户输入进行严格验证和过滤，防止注入恶意代码。

  • 输出编码：对动态生成的内容进行 HTML 编码，防止恶意代码执行。

  • CSP：配置内容安全策略，限制网页可以加载的资源类型和来源。

详细说明： XSS攻击通常分为三类：存储型XSS、反射型XSS和基于DOM的XSS。

  1. 存储型XSS：恶意代码被存储在服务器上，所有访问该服务器的用户都会执行恶意代码。
  2. 反射型XSS：恶意代码通过URL参数传递，并立即在响应中反射回用户。
  3. 基于DOM的XSS：恶意代码在客户端通过操作DOM结构注入和执行。

示例：

image.png 2. 跨站请求伪造（CSRF）

描述：CSRF 攻击通过利用受害者已认证的身份，诱导其发送伪造的请求，执行未授权的操作。

防护措施：

  • CSRF 令牌：在表单或 AJAX 请求中加入 CSRF 令牌，并在服务器端进行验证。

  • SameSite Cookie 属性：将 Cookie 设置为 SameSite，限制其在跨站请求中发送。

  • 验证请求来源：通过检查 Referer 或 Origin 头，确保请求来源合法。

详细说明：

  1. CSRF令牌：在表单中加入一个唯一的令牌，该令牌由服务器生成并验证，每次请求都需要携带这个令牌。
  2. SameSite Cookie属性：将Cookie属性设置为SameSite=Strict或SameSite=Lax，限制其在跨站请求中发送。
  3. 验证请求来源：在服务器端检查请求的Referer或Origin头，确保请求来源合法。

示例：

image.png 3. 安全传输（HTTPS）

描述：未加密的 HTTP 通信可能被窃听或篡改，导致敏感信息泄露。

防护措施：

  • 使用 HTTPS：确保所有页面和 API 使用 HTTPS 进行传输，防止数据在传输过程中被窃听或篡改。

详细说明：

  1. SSL证书：获取并安装有效的SSL证书，确保HTTPS通信。
  2. 强制HTTPS：配置服务器强制所有HTTP请求重定向到HTTPS。

配置示例： 在Nginx中配置HTTPS：

image.png

  1. 点击劫持（Clickjacking）

描述：点击劫持是一种攻击，攻击者通过在其网站上嵌入透明的 iframe 来覆盖目标网站的内容，从而诱使用户在不知情的情况下点击隐藏在 iframe 背后的按钮或链接。这种攻击可能会导致用户在不知情的情况下执行危险操作，如删除账户、转账等。

攻击方式：

攻击者创建一个页面，并在页面中嵌入一个透明的 iframe，指向目标网站的删除账户按钮。当用户在攻击者的网站上点击某个看似无害的按钮时，实际上是在点击目标网站的删除账户按钮。

防护措施：

  • X-Frame-Options 头：通过设置 X-Frame-Options 头，防止页面被嵌入到 iframe 中。

  • Content Security Policy (CSP) frame-ancestors：通过 CSP 的 frame-ancestors 指令，限制页面可以被嵌入的父页面。

详细说明：

  1. X-Frame-Options：可以设置为DENY（完全禁止嵌入）或SAMEORIGIN（只允许同源页面嵌入）。
  2. CSP frame-ancestors：通过配置CSP来指定允许嵌入的父页面。

示例：

image.png

  1. 本地存储安全

描述：本地存储（如 localStorage 和 sessionStorage）可以存储大量数据，但容易被攻击者访问和篡改。

防护措施：

  • 敏感数据加密：将敏感数据在存储前进行加密，确保即使被窃取也无法直接使用。

  • 避免存储敏感信息：尽量避免在本地存储中保存敏感信息，如用户密码、身份验证令牌等。

详细说明：

  1. 加密存储：使用加密算法（如AES）加密敏感数据后再存储到本地。
  2. 定期清理：定期清理本地存储中的敏感数据，减少被利用的风险。

image.png

6.SQL注入

描述：SQL 注入是一种非常危险的攻击方式，并且已经存在很长一段时间了。攻击操纵数据库查询以获得未经授权的数据库访问，以执行恶意活动，例如损坏数据库或窃取敏感数据。

防护措施：

  • 首先，你需要确保前端输入字段经过正确验证和处理。防止用户在输入的字段中插入恶意代码。

  • 验证前端后，清理后端收到的数据也很重要。后端不要信任前端输入的任何数据，因为任何人都可以获取你的 API 端点并开始发送恶意输入。因此，后端也需要进行验证。此外，利用Burp Scanner 、 sqlmap、jSQL Injection和Invicti等工具来检测应用程序中潜在的 SQL 攻击和相关漏洞。

详细说明：

  1. 输入验证和清理：使用正则表达式和白名单对输入进行验证，确保仅接受合法的输入。
  2. 参数化查询：使用参数化查询或预备语句，避免将用户输入直接拼接到SQL查询中。

image.png

三. 案例分析

案例分析 1：防范 XSS 攻击

背景

某在线留言板系统允许用户提交和展示评论内容。未对输入进行充分验证和输出编码的情况下，攻击者可以提交包含恶意脚本的评论，导致其他用户访问页面时执行这些脚本。

攻击示例

image.png

攻击者在评论内容中插入恶意脚本：

当其他用户访问留言板页面时，这段脚本会执行，弹出一个警告框。如果攻击者插入的恶意脚本更加复杂，可以窃取用户的 cookie、劫持会话等。

防护措施

  1. 输入验证：在服务器端和客户端都对用户输入进行验证，确保不包含恶意代码。

  2. 输出编码：在展示评论内容时进行 HTML 编码，防止脚本执行。

  3. CSP：配置内容安全策略，限制可以加载和执行的脚本。

代码示例

image.png

当我们使用v-html去解析 富文本 时，遇到script标签会自动解析并运行。若不将数据进行清洗直接输出到页面上，就容易产生XSS漏洞。

例如：我们在富文本中插入一段字符串 "hello vue<img src="../qwe" οnerrοr="alert(1)">"

此时 img标签解析不了src中的路径 就会报错并弹窗。同理 ，若插入其他脚本，则可以悄无声息地获取页面中的各种信息。

image.png

解决方案：

  1. 插件，例如vue-dompurify-html

image.png

image.png

2.使用html自带的清洗器：sanitize-html

image.png

案例分析 2：防范 CSRF 攻击

背景

某用户账户设置页面允许用户修改账户信息。如果没有采取 CSRF 防护措施，攻击者可以诱导用户点击一个恶意链接，发送伪造的请求修改用户信息。

攻击示例

攻击者创建一个恶意网页，包含一个自动提交的表单，伪造修改账户信息的请求：

如果用户在登录状态下访问该页面，会在不知情的情况下修改其账户信息。

防护措施

  1. CSRF 令牌：在表单或 AJAX 请求中加入 CSRF 令牌，并在服务器端进行验证。

代码示例

安全的实现：

image.png

image.png

在表单中加入 csrf_token 隐藏字段，并在提交请求时附带该令牌。

案例分析 3：防范点击劫持（Clickjacking）

背景

攻击示例

假设我们有一个重要的操作按钮。

当用户点击按钮时，实际上点击的是嵌入的 iframe，执行了攻击者的未授权操作。

防护措施

  1. X-Frame-Options 头：通过设置 X-Frame-Options 头，防止页面被嵌入到 iframe 中。

  2. Content Security Policy (CSP) frame-ancestors：通过 CSP 的 frame-ancestors 指令，限制页面可以被嵌入的父页面。

代码示例

Vue.js 前端防护示例：

在 Vue.js 项目中，我们可以通过 JavaScript 检测页面是否被嵌入到 iframe 中，并跳出 iframe。

image.png

服务器端安全配置：

在服务器端配置响应头：

image.png

通过设置 X-Frame-Options 和 Content-Security-Policy 头，防止页面被嵌入到恶意的 iframe 中。

四. 总结

通过在 Vue.js 应用中实施这些安全措施，我们可以有效地防范 XSS、CSRF 和点击劫持等常见的前端攻击。开发者在编写代码时，应该始终保持安全意识，确保用户数据和隐私不受侵害。希望这些案例分析和代码示例能帮助您更好地理解和实现前端安全防护措施。

avatar
文章
阅读
粉丝