当前位置: 首页 > 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 通过在后台与服务器进行少…...

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

<6>-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

工程地质软件市场:发展现状、趋势与策略建议

一、引言 在工程建设领域&#xff0c;准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具&#xff0c;正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

UR 协作机器人「三剑客」:精密轻量担当(UR7e)、全能协作主力(UR12e)、重型任务专家(UR15)

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

iOS性能调优实战:借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...