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

前端安全策略保障

文章目录

  • 前言
  • 后台管理系统
  • 网络安全
    • XSS
    • CSRF
    • SQL注入
  • 后言

前言

hello world欢迎来到前端的新世界


😜当前文章系列专栏:前端系列文章
🐱‍👓博主在前端领域还有很多知识和技术需要掌握,正在不断努力填补技术短板。(如果出现错误,感谢大家指出)🌹
💖感谢大家支持!您的观看就是作者创作的动力

后台管理系统

  • 登录密码加密
  • 登陆密码的无感验证
  • 无感刷新token
  • 权限

以上这些都是保障后台管理安全的一些

网络安全

XSS

在这里插入图片描述
XSS(Cross-Site Scripting,跨站脚本攻击)是一种常见的web安全漏洞,攻击者利用这种漏洞向网页中插入恶意脚本代码,当用户访问包含恶意脚本的页面时,这些脚本就会在用户的浏览器上执行,从而导致攻击者能够窃取用户信息、篡改页面内容、劫持会话等恶意行为。XSS攻击通常分为存储型XSS反射型XSSDOM-based XSS三种类型,是web应用程序中常见的安全威胁之一。为防范XSS攻击,开发人员需要对用户输入数据进行严格验证和过滤,对输出数据进行适当的编码处理,并采用其他防护措施,如Content Security Policy(CSP) 等。

解决

输入验证和过滤: 对用户输入的数据进行严格验证,确保只接受符合预期格式的数据。使用输入过滤机制,移除或转义潜在的恶意代码,比如特殊字符、HTML标签和JavaScript代码等。

输出编码: 在将用户输入或其他动态数据输出到页面时,进行适当的编码处理,确保所有特殊字符都被正确转义。例如,使用HTML实体编码将特殊字符转换为其对应的实体表示,防止恶意脚本在浏览器中执行。

使用安全的API: 避免使用具有潜在风险的API,比如通过innerHTML直接插入用户输入的内容到DOM中。相反,使用更安全的API,如textContent或createTextNode来插入文本内容,避免执行脚本。

Content Security Policy(CSP): 配置CSP标头来限制页面可以加载的资源和执行的脚本。CSP可以指定允许的域名、禁止的脚本执行方式等,有效地减少XSS攻击的成功率。

避免内联脚本: 尽量避免在HTML标签的事件属性(如onclick)中使用内联脚本,而是使用外部脚本文件,并确保外部脚本文件是可靠的。

使用安全的框架和库: 选择经过广泛测试和维护的前端框架和库,它们通常会对XSS等已知的安全问题进行处理,减少安全漏洞的风险。

定期更新和修复: 及时关注前端框架、库以及其他相关组件的安全更新和修复,保持代码的最新版本,避免已知安全问题的利用。

CSRF

CSRF(Cross-Site Request Forgery,跨站请求伪造)是一种网络安全攻击,它利用用户在当前已登录的Web应用程序中的身份验证信息,以用户不知情的情况下执行非预期的动作。攻击者可以通过引诱受害者点击包含恶意请求的链接或访问恶意网站,在用户已经登录的情况下,以受害者的身份发送恶意请求到目标网站,触发对应的操作,比如修改用户资料、发表留言、转账等。

在这里插入图片描述
解决

随机令牌(CSRF Token): 在每个表单提交或敏感操作请求中包含一个随机生成的令牌,这个令牌与用户会话相关联,攻击者无法获取到合法的令牌,从而无法进行伪造请求。

同源检测: 使用同源检测来验证请求的来源是否合法,确保请求来自合法的站点,可以通过检查Origin和Referer头信息来实现。

自定义请求头: 在请求中增加自定义的头信息,由后端进行验证,确保请求来源合法可信。

双重确认: 对于一些敏感操作,如修改密码、转账等,除了检查身份认证外,还可以要求用户进行额外的确认操作,减少被攻击的可能性。

SQL注入

SQL注入是一种针对后端数据库的攻击方式,它利用未经过滤或转义的用户输入数据插入到SQL查询语句中,从而导致恶意代码被执行或数据库信息泄漏。尽管SQL注入主要是后端安全问题,但前端也可以采取一些措施来减少SQL注入的风险。

  • 输入验证和过滤:前端可以对用户输入的数据进行基本的验证,确保只接受符合预期格式的数据。但前端验证只是为了提升用户体验和减轻服务端压力,并不能替代后端的验证和过滤。

  • 参数化查询(Prepared Statements):前端可以使用参数化查询或预编译语句的方式来构建SQL查询,以确保用户输入的数据不会直接拼接到查询语句中,而是作为参数传递给查询。这样可以有效地防止SQL注入攻击。

  • 防御性编程:在编写前端代码时,要养成良好的编码习惯,遵循最佳实践,比如避免使用拼接字符串的方式构建动态SQL查询,而是使用预定义的查询模板和参数。

后言

创作不易,要是本文章对广大读者有那么一点点帮助 不妨三连支持一下,您的鼓励就是博主创作的动力

相关文章:

前端安全策略保障

文章目录 前言后台管理系统网络安全XSSCSRFSQL注入 后言 前言 hello world欢迎来到前端的新世界 😜当前文章系列专栏:前端系列文章 🐱‍👓博主在前端领域还有很多知识和技术需要掌握,正在不断努力填补技术短板。(如果出…...

【实施】Sentry-self-hosted部署

Sentry-self-hosted部署 介绍 Sentry 是一个开源的错误追踪(error tracking)平台。它主要用于监控和追踪应用程序中的错误、异常和崩溃。Sentry允许开发人员实时地收集和分析错误,并提供了强大的工具来排查和修复问题,研发最近是…...

Django多表查询

目录 一.多表查询引入 1.数据准备 2.外键的增删改查 (1)一对多外键的增删改查 1.1外键的增加 1.2外键的删除 1.3外键的修改 (2)多对多外键的增删改查 2.1增加 2.2删除 2.3更改 2.4清空 3.正反向概念 二.多表查询 1.子查询(基于…...

基于Springboot的非物质文化网站(有报告)。Javaee项目,springboot项目。

演示视频: 基于Springboot的非物质文化网站(有报告)。Javaee项目,springboot项目。 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。 项目介…...

1亿美元投资!加拿大量子公司Photonic告别隐身状态

​(图片来源:网络) 至今加拿大量子公司Photonic总融资额已达1.4亿美元,将推动可扩展、容错的量子计算和网络平台的快速开发。 官宣完成1亿美元新一轮融资 Photonic总部位于加拿大不列颠哥伦比亚省温哥华市,是一家基…...

Allegro的引流方式有哪些?Allegro买家号测评提高店铺的权重和排名

为了让更多的人发现你的平台并提高转化率,正确的引流是至关重要的。那么Allegro的引流方式有哪些? 首先,对于Allegro平台来说,一个有效且常用的引流方式就是通过搜索引擎优化(SEO)。通过合理地选择关键词、…...

Pytorch多GPU并行训练: DistributedDataParallel

1 模型并行化训练 1.1 为什么要并行训练 在训练大型数据集或者很大的模型时一块GPU很难放下,例如最初的AlexNet就是在两块GPU上计算的。并行计算一般采取两个策略:一个是模型并行,一个是数据并行。左图中是将模型的不同部分放在不同GPU上进…...

802.11ax-2021协议学习__$27-HE-PHY__$27.5-Parameters-for-HE-MCSs

802.11ax-2021协议学习__$27-HE-PHY__$27.5-Parameters-for-HE-MCSs 27.3.7 Modulation and coding scheme (HE-MCSs)27.3.8 HE-SIG-B modulation and coding schemes (HE-SIG-B-MCSs)27.5 Parameters for HE-MCSs27.5.1 General27.5.2 HE-MCSs for 26-tone RU27.5.3 HE-MCSs f…...

假如我是AI Agent专家,你会问什么来测试我的水平

1. 假如我是AI Agent专家,你会问什么来测试我的水平 作为AI Agent专家,您可能需要回答一系列关于AI代理的设计、实现和优化方面的问题。以下是一些可能的问题: AI代理的基本原理:AI代理的基本工作原理是什么?它们如何…...

github 私人仓库clone的问题

github 私人仓库clone的问题 公共仓库直接克隆就可以,私人仓库需要权限验证,要先申请token 1、登录到github,点击setting 打开的页面最底下,有一个developer setting 这里申请到token之后,注意要保存起来&#xff…...

基于 React 的 HT for Web ,由厦门图扑团队开发和维护 - 用于 2D/3D 图形渲染和交互

本心、输入输出、结果 文章目录 基于 React 的 HT for Web ,由厦门图扑团队开发和维护 - 用于 2D/3D 图形渲染和交互前言什么是 HT for WebHT for Web 的特点如何使用 HT for Web相关链接弘扬爱国精神 基于 React 的 HT for Web ,由厦门图扑团队开发和维…...

我把微信群聊机器人项目开源

▍PART 序 开源项目地址》InsCode - 让你的灵感立刻落地 目前支持的回复 ["抽签", "天气", "讲笑话", "讲情话", "梦到", "解第", "动漫图", "去水印-", "历史今天", "星座-…...

数据可视化在监控易中的艺术与实践

在数字化运维管理中,数据可视化成为一种日益重要的工具,它将复杂的数据通过图形化的方式呈现,帮助运维团队更加直观和快速地理解系统的运行状况。监控易(MeiXin Era)将数据可视化引入到运维监控中,通过科学…...

贪心 455.分发饼干

455.分发饼干 题目: 小朋友胃口值数组g[i],饼干尺寸数组 s[j],当饼干尺寸s[j]大于等于g[i]的时候,对应小朋友被满足,小朋友每一个最多一块饼干 ,求给定条件下最多被满足的小朋友数量。 思路:…...

前后端分离项目在Linux的部署方法、一台Nginx如何部署多个Web应用

需求场景:目前有三个前后端分离项目(vue+springboot),Linux服务器一台,nginx一个,比如服务器地址为www.xxxxxxx.com 我想通过80端口访问服务①(即访问www.xxxxxxx.com);通过81端口访问服务②(即www.xxxxxxx.com:81);通过82端口访问服务③(即www.xxxxxxx.com:82) ①部…...

python之 flask 框架(2)项目拆分的 执行逻辑

项目的结构图 app.py # 导入__init__.py 比较特殊 from APP import create_appapp create_app() if __name__ __main__:app.run(debugTrue)init.py # __inti__.py # 初始化文件,创建Flask应用 from flask import Flask from .views import bluedef create_ap…...

Angular 模块介绍及使用(二)

Angular 模块概念 Angular 模块是一个重要的概念。模块提供了一种组织和封装组件、指令、管道和服务的方式,以及在应用程序中定义和配置这些功能。 下面是一些常见的 Angular 模块概念的介绍: 根模块:根模块是 Angular 应用程序的入口模块…...

Google云的平台工程

GCP(Google Cloud Platform)是Google云,为其内部(Google search、Gmail、YouTube等)和外部客户提供IaaS、PaaS以及Serverless computing等云服务的平台。 本文将带领你走进GCP,并深入体验其产品功能&#x…...

【Android】画面卡顿优化列表流畅度五之下拉刷新上拉加载更多组件RefreshLayout修改

之前也写过类似组件的介绍: 地址:下拉刷新&上拉加载更多组件SmartRefreshLayout 本来打算用这个替换的,但在进行仔细研究发现不太合适。功能都很好,但嵌入不了当前的工程体系里。原因就是那啥体制懂的都懂。这样的组件需要改…...

【Android】导入三方jar包/系统的framework.jar

1.Android.mk导包 1).jar包位置 与res和src同一级的libs中(没有就新建) 2).Android.mk文件 LOCAL_STATIC_ANDROID_LIBRARIES:android静态库,经常用于一些support的导包 LOCAL_JAVA_LIBRARIES:依赖的java库,一般为系统的jar…...

React Native 开发环境搭建(全平台详解)

React Native 开发环境搭建(全平台详解) 在开始使用 React Native 开发移动应用之前,正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南,涵盖 macOS 和 Windows 平台的配置步骤,如何在 Android 和 iOS…...

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet,点击确认后如下提示 最终上报fail 解决方法 内核升级导致,需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

Opencv中的addweighted函数

一.addweighted函数作用 addweighted()是OpenCV库中用于图像处理的函数,主要功能是将两个输入图像(尺寸和类型相同)按照指定的权重进行加权叠加(图像融合),并添加一个标量值&#x…...

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log,共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题,不能使用ELK只能使用…...

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

NFT模式:数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

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

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