当前位置: 首页 > news >正文

前端安全防护实战:XSS、CSRF防御与同源策略详解(react 案例)

前端安全防护实战中,主要涉及三个方面:XSS (Cross-Site Scripting) 攻击的防御、CSRF (Cross-Site Request Forgery) 攻击的防御,以及浏览器的同源策略。以下是这三个方面的详细说明:

XSS 防御详解

XSS 概述

XSS攻击是一种让攻击者能够在受害者的浏览器中注入恶意脚本的攻击方式,这些脚本通常会窃取用户的敏感信息,如Cookie、session token等,甚至控制用户的账户权限。

防御措施
  1. 输入过滤与转义:对用户提交的所有数据进行严格的检查与转义,确保在HTML、JavaScript、CSS上下文中不会被执行。例如,使用textContent代替innerHTML,或者使用相应的转义函数如encodeURIComponent()encodeURI()以及专门为HTML、JS、CSS设计的安全函数进行输出编码。

  2. Content Security Policy (CSP):设置响应头中的Content-Security-Policy,限制页面只能加载指定来源的脚本、样式和图片,有效防止外部注入的恶意内容被执行。

  3. HttpOnly Cookie:对于包含敏感信息的Cookie,设置HttpOnly属性,使其不能通过JavaScript被访问,这样即使存在XSS漏洞,攻击者也无法直接盗取这类Cookie。

  4. 框架提供的安全API:利用现代框架提供的安全API,如在Vue、React等框架中,可以通过它们的安全DOM操作方法来避免XSS风险。

CSRF 防御详解

CSRF 概述

CSRF攻击是指攻击者通过诱使用户在其已登录的可信网站上执行恶意操作,利用用户的认证状态发起非授权请求。

防御措施
  1. Token验证:在重要请求中加入CSRF Token,服务器端在渲染表单时生成一个随机Token,并将其存储在服务器端或客户端(如Cookie中)。当接收到请求时,服务器验证Token的一致性。

  2. 双重Cookie验证:服务器在接收POST请求时,不仅验证CSRF Token,还要求另一个只有浏览器才能自动附带的Cookie(如Session ID),由于浏览器同源策略,攻击者无法在第三方站点伪造这个Cookie。

  3. SameSite Cookie属性:设置Cookie的SameSite属性为strictlax,这可以防止第三方网站在跨域请求中携带该Cookie。

同源策略详解

同源策略概述

同源策略是浏览器的一个核心安全模型,它规定了来自不同源(协议、域名、端口任一不同即视为不同源)的文档或脚本之间不能相互读写数据,以此隔离潜在的安全风险。

同源策略的应用与例外
  • 应用:浏览器默认阻止非同源资源之间的交互,如不同源的脚本不能读取对方的DOM、Cookie等。
  • 例外:现代浏览器允许通过CORS(Cross-Origin Resource Sharing)机制实现跨域资源共享,通过设置特定的HTTP头部,允许服务器明确声明哪些其他源可以访问资源。

综上所述,全面的前端安全防护需要综合运用多种手段,包括但不限于上述的XSS防御、CSRF防御策略以及对同源策略的合理利用和管理。同时,持续关注并遵循最新的安全最佳实践也至关重要。

在React中实现XSS和CSRF防御的例子:

XSS防御实例 - 使用 dangerouslySetInnerHTML 时转义用户输入

import React from 'react';function escapeHtml(text) {const map = {'&': '&amp;','<': '&lt;','>': '&gt;','"': '&quot;',"'": '&#39;','/': '&#x2F;'};return text.replace(/[&<>"'/]/g, (char) => map[char]);
}class UserComment extends React.Component {render() {const { comment } = this.props;// 对用户评论内容进行转义const safeComment = {__html: escapeHtml(comment)};return (<div dangerouslySetInnerHTML={safeComment} />);}
}// 使用组件
<UserComment comment={`User's untrusted input...`} />

CSRF防御实例 - 使用CSRF Token

假设后端已经提供了CSRF Token,我们将其存放在localStorage或Cookie中,并在每个非GET请求中带上这个Token。

import axios from 'axios';
import { useEffect, useState } from 'react';function useCsrfToken() {const [csrfToken, setCsrfToken] = useState(null);useEffect(() => {// 假设从localStorage获取Tokenconst storedToken = localStorage.getItem('csrfToken');if (storedToken) {setCsrfToken(storedToken);}// 在实际应用中,可能需要在登录成功后由后端提供并保存到localStorage}, []);function sendSafeRequest(method, url, data = null) {// 添加CSRF Token到请求头const headers = {'X-CSRF-Token': csrfToken,};return axios.request({method,url,data,headers,});}return { csrfToken, sendSafeRequest };
}function MyComponentThatMakesRequests() {const { csrfToken, sendSafeRequest } = useCsrfToken();async function handleSubmit(data) {try {const response = await sendSafeRequest('POST', '/api/protected-endpoint', data);// 处理响应...} catch (error) {// 处理错误...}}// ...
}

以上代码仅为示例,实际应用中需要根据项目的实际情况调整。比如CSRF Token的获取途径可能是从Cookie中带有HttpOnly标志的Token派生出来的,或者是通过初始接口请求获得并缓存起来的。另外,上面的sendSafeRequest只是一个简单的封装,真实场景下可能还需要处理更多复杂的网络交互逻辑。

相关文章:

前端安全防护实战:XSS、CSRF防御与同源策略详解(react 案例)

前端安全防护实战中&#xff0c;主要涉及三个方面&#xff1a;XSS (Cross-Site Scripting) 攻击的防御、CSRF (Cross-Site Request Forgery) 攻击的防御&#xff0c;以及浏览器的同源策略。以下是这三个方面的详细说明&#xff1a; XSS 防御详解 XSS 概述 XSS攻击是一种让攻…...

2024C题生物质和煤共热解问题的研究 详细思路

背景 随着全球能源需求的不断增长和对可再生能源的追求&#xff0c;生物质和煤共热解作为一种潜在的能源转化技术备受关注。生物质是指可再生能源&#xff0c;源自植物和动物的有机物质&#xff0c;而煤则是一种化石燃料。** 在共热解过程中&#xff0c;生物质和煤在高温和缺氧…...

智慧旅游引领未来风尚,科技助力旅行更精彩:科技的力量推动旅游业创新发展,为旅行者带来更加便捷、高效和智能的旅行服务

目录 一、引言 二、智慧旅游的概念与特点 &#xff08;一&#xff09;智慧旅游的概念 &#xff08;二&#xff09;智慧旅游的特点 三、科技推动旅游业创新发展 &#xff08;一&#xff09;大数据技术的应用 &#xff08;二&#xff09;人工智能技术的应用 &#xff08;…...

十.吊打面试官系列-Tomcat优化-通过压测Tomcat调优实战

前言 上一篇文章我们讲解了一下Tomcat底层的结构和执行原理&#xff0c;我们需要重点去掌握的是Tomcat的高内聚低耦合的设计&#xff0c;以及责任链模式&#xff0c;以及Tomcat NIO编程模式&#xff0c;这些是Tomcat比较核心的点&#xff0c;本篇文章我们将对Tomcat的参数做一…...

JVM调优—减少FullGC

背景 最近负责了一个审批流程新项目&#xff0c;带领了几个小伙伴&#xff0c;哼哧哼哧的干了3个月左右&#xff0c;终于在三月底完美上线了&#xff0c;好消息是线上客户用的很丝滑&#xff0c;除了几个非常规的业务提单之外&#xff0c;几乎没有什么大的问题&#xff0c;但是…...

力扣 256. 粉刷房子 LCR 091. 粉刷房子 python AC

动态规划 class Solution:def minCost(self, costs):row, col len(costs), 3dp [[0] * col for _ in range(row 1)]for i in range(1, row 1):for j in range(col):dp[i][j] costs[i - 1][j - 1]if j 0:dp[i][j] min(dp[i - 1][1], dp[i - 1][2])elif j 1:dp[i][j] m…...

C++STL细节,底层实现,面试题04

文章目录 19. STL19.1. 序列容器19.1.1. vector19.1.1.1. 底层实现和特点19.1.1.2. 常用函数19.1.1.3. emplace_back() vs push_back() 19.1.2. array19.1.2.1. 底层实现和特点19.1.2.2. 常用函数 19.1.3. deque19.1.3.1. 底层实现和特点19.1.3.2. 常用函数 19.1.4 list19.1.4.…...

Linux查看Oracle数据库的环境变量

Linux查看Oracle数据库的环境变量 在Linux上查看Oracle数据库的环境变量&#xff0c;通常涉及检查当前shell会话中已设置的环境变量。这些环境变量可能包括ORACLE_HOME、ORACLE_SID、PATH&#xff08;可能包含Oracle二进制文件的路径&#xff09;等。 以下是几种方法来查看这…...

pg数据库学习知识要点分析-1

知识要点1 对象标识OID 在PostgreSQL内部&#xff0c;所有的数据库对象都通过相应的对象标识符&#xff08;object identifier&#xff0c;oid&#xff09;进行管理&#xff0c;这些标识符是无符号的4字节整型。数据库对象与相应oid 之间的关系存储在对应的系统目录中&#xf…...

【Web】CTFSHOW 七夕杯 题解

目录 web签到 easy_calc easy_cmd web签到 CTF中字符长度限制下的命令执行 rce(7字符5字符4字符)汇总_ctf中字符长度限制下的命令执行 5个字符-CSDN博客7长度限制直接梭了 也可以打临时文件RCE import requestsurl "http://4ae13f1e-8e42-4afa-a6a6-1076acd08211.c…...

react native 设置屏幕锁定

原生配置 android 在android/app/src/main/AndroidManifest.xml在这个文件里的入口activity里添加 android:screenOrientation"portrait" <activityandroid:name".MainActivity"android:label"string/app_name" …...

探索 IPv6 协议:互联网的新一代寻址

目录 一.概述 IPv4 的问题和 IPv6 的新特性 IPv6 协议体系 二.IPv6 寻址架构&#xff1a;巨大的地址空间与灵活的寻址模式 IPv6 寻址概述 地址表示方法 地址前缀与地址类型标识 单播地址 任播地址 多播地址 特殊的 IPv6 地址 IPv6 主机与路由器寻址 地址分配 三.I…...

Ubuntu意外断电vmdk损坏--打不开磁盘“***.vmdk”或它所依赖的某个快照磁盘。

背景&#xff1a;电脑资源管理器崩溃卡死&#xff0c;强行断电重启&#xff0c;结果虚拟机打不开了&#xff0c;提示打不开磁盘“***.vmdk”或它所依赖的某个快照磁盘。 删除lck文件&#xff1a;失败vmware-vdiskmanager修复 &#xff1a;提示无法修复最终用 VMFS Recovery挂载…...

202466读书笔记|《一天一首古诗词》——借问梅花何处落,风吹一夜满关山

202466读书笔记|《一天一首古诗词》——借问梅花何处落&#xff0c;风吹一夜满关山 上册下册 《一天一首古诗词》作者李锡琴&#xff0c;蛮早前加入书架的已购买书籍&#xff0c;这次刚好有点时间&#xff0c;利用起来读完。 赏析没有细看&#xff0c;只读了诗词部分&#xff0…...

如何调用本地ollama的http请求接口

http://127.0.0.1:11434/api/generate 使用http post请求&#xff0c;参数 { "model": "qwen", "prompt": "为什么天空是蓝色?", "stream": false } 返回结果如下&#xff1a; {"model": "qwen",…...

【C】190 颠倒二进制位

颠倒给定的 32 位无符号整数的二进制位。 提示&#xff1a; 请注意&#xff0c;在某些语言&#xff08;如 Java&#xff09;中&#xff0c;没有无符号整数类型。在这种情况下&#xff0c;输入和输出都将被指定为有符号整数类型&#xff0c;并且不应影响您的实现&#xff0c;因…...

蓝桥杯备战5.图书管理员

[NOIP2017]图书管理员 (nowcoder.com) #include<bits/stdc.h> #define endl \n #define int long long using namespace std; const int N 2e510,M1e310; int a[N]; int n,q; int check(int l,int x) {int tmppow(10,l);for(int i1;i<n;i){if(a[i]%tmpx){cout<&…...

微型显示器可以实时监测大脑活动

美国团队开发基于LED的设备&#xff0c;以可视化大脑活动&#xff0c;在脑外科手术中指导神经外科医生 来自加州大学圣地亚哥分校和马萨诸塞州总医院的工程师和医生开发了一种薄膜显示设备&#xff0c;该设备结合了电极网格和特殊的GaN LED&#xff0c;可以在手术过程中实时跟…...

移动端适配方案

移动端适配 方案 1&#xff1a;rem html font-size 方案 2&#xff1a;vw rem html font-size rem 是相对于 html 元素的 font-size 来设置的单位&#xff0c;通过在不同屏幕尺寸下动态修改 html 元素的 font-size 可达到适配效果 在开发中&#xff0c;我们只需要考虑两个…...

【Ajax零基础教程】-----第一课 Ajax简介

一、什么是ajax ajax即 Asynchronous javascript And XML (异步 javaScript 和 XML) 是一种创建交互式&#xff0c;快速动态应用的网页开发技术&#xff0c;无需重新加载整个网页的情况下&#xff0c;能够更新页面局部数据的技术。 二、为什么使用Ajax 通过在后台与服务器进行少…...

云启出海,智联未来|阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

CMake基础:构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

Java入门学习详细版(一)

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

探索Selenium:自动化测试的神奇钥匙

目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...

API网关Kong的鉴权与限流:高并发场景下的核心实践

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 引言 在微服务架构中&#xff0c;API网关承担着流量调度、安全防护和协议转换的核心职责。作为云原生时代的代表性网关&#xff0c;Kong凭借其插件化架构…...

【Linux】Linux安装并配置RabbitMQ

目录 1. 安装 Erlang 2. 安装 RabbitMQ 2.1.添加 RabbitMQ 仓库 2.2.安装 RabbitMQ 3.配置 3.1.启动和管理服务 4. 访问管理界面 5.安装问题 6.修改密码 7.修改端口 7.1.找到文件 7.2.修改文件 1. 安装 Erlang 由于 RabbitMQ 是用 Erlang 编写的&#xff0c;需要先安…...

相关类相关的可视化图像总结

目录 一、散点图 二、气泡图 三、相关图 四、热力图 五、二维密度图 六、多模态二维密度图 七、雷达图 八、桑基图 九、总结 一、散点图 特点 通过点的位置展示两个连续变量之间的关系&#xff0c;可直观判断线性相关、非线性相关或无相关关系&#xff0c;点的分布密…...