常见的前端安全问题

devtools/2025/3/19 5:12:43/

前端安全是 Web 开发中至关重要的一环,以下是常见的前端安全问题及对应的防御措施:


1. XSS(跨站脚本攻击)

攻击原理
攻击者向页面注入恶意脚本(如 JavaScript),在用户浏览器中执行,窃取 Cookie、会话信息或篡改页面内容。

类型

  • 存储型 XSS:恶意脚本存储在服务器(如评论区)。

  • 反射型 XSS:通过 URL 参数注入脚本。

  • DOM 型 XSS:直接操作 DOM 触发漏洞。

防御措施

  • 输入转义:对用户输入的内容进行转义(如 < → &lt;)。

  • Content Security Policy (CSP):通过 HTTP 头限制脚本来源,禁止内联脚本和未授权域。

    Content-Security-Policy: default-src 'self'; script-src 'self' trusted.com
  • 使用安全的框架:如 React/Vue 自动转义 HTML,避免直接操作 innerHTML

  • 设置 HttpOnly Cookie:防止 JavaScript 读取敏感 Cookie。


2. CSRF(跨站请求伪造)

攻击原理
诱导用户访问恶意页面,利用已登录的 Cookie 伪造用户身份发起请求(如转账)。

防御措施

  • CSRF Token:服务端生成随机 Token 并验证(如隐藏表单字段)。

  • SameSite Cookie 属性:设置 Cookie 的 SameSite=Strict 或 Lax,限制跨域携带。

  • 验证 Referer/Origin:检查请求来源是否为合法域名。

  • 关键操作二次验证:如短信验证码、密码确认。


3. 点击劫持(Clickjacking)

攻击原理
通过透明 iframe 覆盖在正常页面上,诱导用户点击隐藏按钮(如授权操作)。

防御措施

  • X-Frame-Options:通过 HTTP 头禁止页面被嵌入 iframe。

    X-Frame-Options: DENY
  • CSP 的 frame-ancestors 指令:限制页面嵌入的父级来源。

    Content-Security-Policy: frame-ancestors 'self'

4. 不安全的第三方依赖

风险
第三方库/插件可能包含漏洞或被篡改(如通过 CDN 加载恶意脚本)。

防御措施

  • 使用可信来源:从官方渠道获取依赖。

  • 子资源完整性(SRI):校验 CDN 资源哈希值。

    <script src="https://cdn.example.com/lib.js" integrity="sha384-xxxxx">
    </script>
  • 定期更新依赖:使用 npm audit 或工具(如 Snyk)扫描漏洞。


5. 不安全的本地存储

风险
敏感数据(如 Token)存储在 localStorage 或 sessionStorage 中,易被 XSS 窃取。

防御措施

  • 避免存储敏感数据:优先使用 HttpOnly Cookie

  • 加密存储数据:如需本地存储,使用加密算法(如 AES)保护。


6. CORS 配置错误

风险
不当的跨域资源共享(CORS)配置导致数据泄露。

防御措施

  • 严格限制 Origin:仅允许可信域名访问 API。

    Access-Control-Allow-Origin: https://your-domain.com
  • 避免通配符 *:除非必要,否则不开放全部域。


7. 输入验证不足

风险
未对用户输入进行验证,导致 SQL 注入、命令注入等。

防御措施

  • 前后端双重验证前端做基础校验(如格式、长度),后端做严格校验。

  • 使用参数化查询:防止 SQL 注入(后端责任,但需前后端协作)。


防御核心原则

  1. 最小权限原则:仅授予必要权限(如 API 访问、Cookie 范围)。

  2. 纵深防御:多层级防护(前端 + 后端 + 基础设施)。

  3. 保持更新:定期更新依赖和工具链。

  4. 安全审计:使用自动化工具(如 OWASP ZAP)扫描漏洞。

通过以上措施,可以显著降低前端安全风险。始终记住:前端安全需要与后端、运维协同防护,单一层面的防御不足以应对复杂攻击。


http://www.ppmy.cn/devtools/168248.html

相关文章

Linux-数据结构-线性表-单链表

一.链表的概念 【1】线性表的链式存储 解决顺序存储的缺点&#xff0c;插入和删除&#xff0c;动态存储问题。 【2】特点&#xff1a; 线性表链式存储结构的特点是一组任意的存储单位存储线性表的数据元素&#xff0c;存储单元可以是连续的&#xff0c;也可以不连续。可以被存…

2024山东大学计算机复试上机真题

2024山东大学计算机复试上机真题 2024山东大学计算机复试机试真题 历年山东大学计算机复试上机真题 历年山东大学计算机复试机试真题 在线评测&#xff1a;传动门&#xff1a;pgcode.cn 最长递减子序列 题目描述 输入数字 n&#xff0c;和 n 个整数&#xff0c;输出该数字…

Windows11 新机开荒(二)电脑优化设置

目录 前言&#xff1a; 一、注册微软账号绑定权益 二、此电脑 桌面图标 三、系统分盘及默认存储位置更改 3.1 系统分盘 3.2 默认存储位置更改 四、精简任务栏 总结&#xff1a; 前言&#xff1a; 本文承接上一篇 新机开荒&#xff08;一&#xff09; 上一篇文章地址&…

Flink State 是处理有状态流计算的核心机制,其典型应用场景及具体说明

1. 实时数据去重(Deduplication) 场景:在实时处理中避免重复处理相同数据(如订单ID、日志唯一标识)。实现:使用 KeyedState(如 ValueState 或 MapState)记录已处理的数据标识。示例:ValueState<Boolean> seenState = getRuntimeContext().getState(new ValueSta…

基于Springboot+服务器磁盘的本地文件存储方案

[local-file-system]基于服务器磁盘的本地文件存储方案 仅提供后端方案 github 环境 JDK11linux/windows/mac 应用场景 适用于ToB业务&#xff0c;中小企业的单体服务&#xff0c;仅使用磁盘存储文件的解决方案 仅使用服务器磁盘存储 与业务实体相结合的文件存储方案&…

golang算法二叉搜索树

98. 验证二叉搜索树 给你一个二叉树的根节点 root &#xff0c;判断其是否是一个有效的二叉搜索树。 有效 二叉搜索树定义如下&#xff1a; 节点的左子树只包含 小于 当前节点的数。 节点的右子树只包含 大于 当前节点的数。 所有左子树和右子树自身必须也是二叉搜索树。 示…

文件系统 linux ─── 第19课

前面博客讲解的是内存级文件管理,接下来介绍磁盘级文件管理 文件系统分为两部分 内存级文件系统 : OS加载进程 ,进程打开文件, OS为文件创建struct file 和文件描述符表 ,将进程与打开的文件相连, struct file 内还函数有指针表, 屏蔽了底层操作的差异,struct file中还有内核级…

IDEA 一键完成:打包 + 推送 + 部署docker镜像

1、本方案要解决场景&#xff1f; 想直接通过本地 IDEA 将最新的代码部署到远程服务器上。 2、本方案适用于什么样的项目&#xff1f; 项目是一个 Spring Boot 的 Java 项目。项目用 maven 进行管理。项目的运行基于 docker 容器&#xff08;即项目将被打成 docker image&am…