前端安全和解决方案

提到这个我可能想到的就是不要暴露太多的账号密码信息。一些页面的请求和操作要加上权限。

然后下面就详细的介绍前端可能遇到的安全问题以及解决方法。

首先比较常见的前端的安全性问题就是跨站脚本攻击(XSS)。跨站请求伪造(csrf)

跨站脚本攻击(XSS)

攻击者通过在目标网站上注入恶意脚本,使之在用户的浏览器上运行。利用这些恶意脚本,攻击者可获取用户的敏感信息如 Cookie、SessionID 等,进而危害数据安全。

比如:客将恶意 JavaScript 脚本长期保存在服务端数据库中,用户一旦访问相关页面数据,恶意脚本就会被执行。常见于搜索、微博、社区贴吧评论等。

2011年新浪微博曾被黑客 XSS 攻击,黑客诱导用户点击一个带有诱惑性的链接,便会自动发送一条带有同样诱惑性链接微博。攻击范围层层扩大,也是一种蠕虫攻击。

XSS攻击主要有两大步骤:

  • 攻击者提交恶意代码
  • 浏览器执行恶意代码

解决办法:

在使用 .innerHTML、.outerHTML、document.write() 时要特别小心,不要把不可信的数据作为 HTML 插到页面上,而应尽量使用 .textContent、.setAttribute() 等。

如果用 Vue/React 技术栈,并且不使用 v-html/dangerouslySetInnerHTML 功能,就在前端 render 阶段避免 innerHTML、outerHTML 的 XSS 隐患。

DOM 中的内联事件监听器,如 location、onclick、onerror、onload、onmouseover 等,<a> 标签的 href 属性,JavaScript 的 eval()、setTimeout()、setInterval() 等,都能把字符串作为代码运行。如果不可信的数据拼接到字符串中传递给这些 API,很容易产生安全隐患,请务必避免。

  • 使用 W3C 提出的 CSP (Content Security Policy,内容安全策略),定义域名白名单

  • 设置 Cookie 的 HttpOnly 属性,禁止JavaScript读取cookie
  • 验证码:防止脚本冒充用户提交危险操作。

跨站请求伪造(CSRF)

攻击者诱导受害者进入第三方网站,在第三方网站中,向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证,绕过后台的用户验证,达到冒充用户对被攻击的网站执行某项操作的目的

典型的CSRF攻击是这样的:

受害者登录A网站,并且保留了登录凭证(Cookie)
攻击者引诱受害者访问B网站
B网站向A网站发送了一个请求,浏览器请求头中会默认携带 A 网站的 Cookie
A 网站服务器收到请求后,经过验证发现用户是登录了的,所以会处理请求

例子1: <img src="http://bank.example/withdraw?amount=10000&for=hacker" > 
在受害者访问含有这个img的页面后,浏览器会自动向http://bank.example/withdraw?account=xiaoming&amount=10000&for=hacker发出一次HTTP请求。bank.example就会收到包含受害者登录信息的一次跨域请求

例子2:访问该页面后,表单会自动提交,相当于模拟用户完成了一次POST操作

<form action="http://bank.example/withdraw" method=POST>
    <input type="hidden" name="account" value="xiaoming" />
    <input type="hidden" name="amount" value="10000" />
    <input type="hidden" name="for" value="hacker" />
</form>
<script> document.forms[0].submit(); </script> 

  • 攻击一般发起在第三方网站,而不是被攻击的网站。被攻击的网站无法防止攻击发生。
  • 攻击利用受害者在被攻击网站的登录凭证,冒充受害者提交操作;而不是直接窃取数据。
  • 整个过程攻击者并不能获取到受害者的登录凭证,仅仅是“冒用”。

解决办法:

同源检测:既然CSRF大多来自第三方网站,那么我们就直接禁止第三方域名(或者不受信任的域名)对我们发起请求。 

表单请求携带CSRF Token:在浏览器向服务器发起请求时,服务器生成一个 CSRF Token。CSRF Token 其实就是服务器生成的随机字符串,然后将该字符串植入到返回的页面中,通常是放到表单的隐藏输入框中,这样能够很好的保护 CSRF Token 不被泄漏;
当浏览器再次发送请求的时候,就需要携带这个 CSRF Token 值一起提交;
服务器验证 CSRF Token 是否一致;从第三方网站发出的请求是无法获取用户页面中的 CSRF Token 值的。

点击劫持(ClickJacking)

点击劫持(Clickjacking)是一种通过视觉欺骗的手段来达到攻击目的手段。往往是攻击者将目标网站通过 iframe 嵌入到自己的网页中,通过 opacity 等手段设置 iframe 为透明的,使得肉眼不可见,这样一来当用户在攻击者的网站中操作的时候,比如点击某个按钮(这个按钮的顶层其实是 iframe),从而实现目标网站被点击劫持。

解决办法:

判断当前网页是否被 iframe 嵌套。如果有嵌套就让他跳转到原本的页面

加代码

if(selft===top){

    var theBody=document.getElementByTagName('body')[0];

     theBody.style.display='block';

}else{

     top.location=self.location;

}

也可以在你的服务器配置中设置X-Frame-Options

CDN劫持

让用户自动转入自己开发的网站。而很多用户却往往无法察觉到自己已经被劫持。其实验证被劫持的方法,就是输入任何网址看看所打开的网页是否和自己输入的网址一致,

解决办法:

使用SRI来解决CDN劫持。SRI 全称 Subresource Integrity - 子资源完整性,是指浏览器通过验证资源的完整性(通常从 CDN 获取)来判断其是否被篡改的安全特性。

通过给 link 标签或者 script 标签增加 integrity 属性即可开启 SRI 功能,比如

<script type="text/javascript" src="//s.url.cn/xxxx/aaa.js" 
    integrity="sha256-xxx sha384-yyy"
    crossorigin="anonymous"></script>
integrity 值分成两个部分,第一部分指定哈希值的生成算法(sha256、sha384 及 sha512),第二部分是经过 base64 编码的实际哈希值,两者之间通过一个短横(-)分割。integrity 值可以包含多个由空格分隔的哈希值,只要文件匹配其中任意一个哈希值,就可以通过校验并加载该资源。开启 SRI 能有效保证页面引用资源的完整性,避免恶意代码执行。
 

SQL注入(更偏向后端处理)

web应用程序对用户输入数据的合法性没有判断或过滤不严,攻击者可以在web应用程序中事先定义好的查询语句的结尾上添加额外的SQL语句,在管理员不知情的情况下实现非法操作,以此来实现欺骗数据库服务器执行非授权的任意查询,从而进一步得到相应的数据信息。 

 解决办法:

1、分级管理

对用户进行分级管理,严格控制用户的权限,对于普通用户,禁止给予数据库建立、删除、修改等相关权限,只有系统管理员才具有增、删、改、查的权限。

2、参数传值

在书写SQL语言时,禁止将变量直接写入到SQL语句,必须通过设置相应的参数来传递相关的变量。从而抑制SQL注入。数据输入不能直接嵌入到查询语句中。同时要过滤输入的内容,过滤掉不安全的输入数据。或者采用参数传值的方式传递输入变量。这样可以最大程度防范SQL注入攻击。

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

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

相关文章

使用八爪鱼爬虫抓取汽车网站数据,分析舆情数据

我是做汽车行业的&#xff0c;可以用八爪鱼爬虫抓取汽车之家和微博上的汽车文章内容&#xff0c;分析各种电动汽车口碑数据。 之前&#xff0c;我写过很多Python网络爬虫的案例&#xff0c;使用requests、selenium等技术采集数据&#xff0c;这次尝试去采集小米SU7在微博、汽车…

C语言笔记(自定义类型:结构体、枚举、联合体 )

前言 本文对自定义类型的结构体创建、使用、结构体的存储方式和对齐方式&#xff0c;枚举的定义、使用方式以及联合体的定义、使用和存储方式展开叙述&#xff0c;如有错误&#xff0c;请各位指正。 目录 前言 1 结构体 1.1 结构体的声明 1.2 结构体的自引用 1.3 结构体变…

网络安全问题与大忌

“老三样&#xff0c;堵漏洞、做高墙、防外攻&#xff0c;防不胜防。” 日前&#xff0c;中国工程院沈昌祥院士这样概括中国信息安全的基本状况。 信息安全提了这么些年&#xff0c;究竟国内的网络如何脆弱&#xff0c;如何不堪一击&#xff0c;恐怕常人是难以想象的。公安部计…

3.langchain中的prompt模板 (few shot examples in chat models)

本教程将介绍如何使用LangChain库和智谱清言的 GLM-4-Plus 模型来理解和推理一个自定义的运算符&#xff08;例如使用鹦鹉表情符号&#x1f99c;&#xff09;。我们将通过一系列示例来训练模型&#xff0c;使其能够理解和推断该运算符的含义。 环境准备 首先&#xff0c;确保…

【消息序列】详解(6):深入探讨缓冲区管理与流量控制机制

目录 一、概述 1.1. 缓冲区管理的重要性 1.2. 实现方式 1.2.1. HCI_Read_Buffer_Size 命令 1.2.2. HCI_Number_Of_Completed_Packets 事件 1.2.3. HCI_Set_Controller_To_Host_Flow_Control 命令 1.2.4. HCI_Host_Buffer_Size 命令 1.2.5. HCI_Host_Number_Of_Complete…

如何使用OCR技术批量识别图片中的文字并重命名文件,OCR 技术批量识别图片中的文字可能出现的错误

字符识别错误 形近字混淆&#xff1a;例如 “已” 和 “己”、“未” 和 “末” 等&#xff0c;由于外形极为相似&#xff0c;OCR 软件在识别时可能出现误判&#xff0c;将原本正确的字识别成与之形近的另一个字。比如在识别一篇手写的文章中&#xff0c;手写体的 “已” 可能就…

Qt | 开发技能提升档次哈

点击上方"蓝字"关注我们 01、Creator常用快捷键 >>> F1 查看帮助 F2 跳转到函数定义 Shift+F2 声明和定义之间切换 F3 查找下一个 F4 头文件和源文件之间切换 Ctrl+1 欢迎模式 Ctrl+2 编辑模…

kafka消费者组和分区数之间的关系是怎样的?

消费者组和分区数之间的关系决定了Kafka中消息的消费方式和负载均衡。合理配置分区数和消费者数量对于优化Kafka的性能和资源利用率至关重要。以下是这种关系的几个关键点&#xff1a; 一个分区只能被同一组的一个消费者消费&#xff1a;这是为了保证消息的顺序性。在同一个消费…

Element Plus的快速入门

一、什么是Element Plus Element : 是饿了么团队研发的&#xff0c;基于Vue3&#xff0c;面向设计师和开发者的组件库。 组件&#xff1a;组成网页的部分&#xff0c;例如超链接&#xff0c;按钮&#xff0c;图片&#xff0c;表格&#xff0c;表单&#xff0c;分页条等等。 …

健身房小程序服务渠道开展

健身不单单是锻炼身体、保持身材&#xff0c;也是一种社交方式&#xff0c;城市里门店不少&#xff0c;每家都有一定流量和老客&#xff0c;但仅靠传统线下拉客/自然流量前往和线上朋友圈、短视频发硬广等方式还不够。 商家需要找到更多潜在目标客户&#xff0c;而消费者也对门…

MRI联合超声影像学预测乳腺癌分子水平表达

MRI联合超声影像学预测乳腺癌分子水平表达的研究是一个跨学科的方向,涉及医学影像学、分子生物学和计算机视觉等领域。目标是通过影像学手段(如MRI和超声)来预测乳腺癌的分子标志物,进一步了解肿瘤的生物学特征,并辅助诊断、预后评估以及治疗方案的选择。 一、可能的研究…

网络渗透测试工具推荐与简介

推荐一批网络渗透测试工具&#xff1a; AIEngine - 这是一个基于Python/Ruby/Java/Lua的互动/可编程的下一代数据包检测引擎&#xff0c;具有无需人工干预的学习功能&#xff0c;支持网络入侵检测系统(NIDS)、DNS域名分类、网络数据收集、网络专家分析等功能。 Denyhosts - 用…

Docker--通过Docker容器创建一个Web服务器

Web服务器 Web服务器&#xff0c;一般指网站服务器&#xff0c;是驻留于因特网上某种类型计算机的程序。 Web服务器可以向浏览器等Web客户端提供文档&#xff0c;也可以放置网站文件以供全世界浏览&#xff0c;或放置数据文件以供全世界下载。 Web服务器的主要功能是提供网上…

HTMLCSS:3D金字塔加载动画

效果演示 这段代码通过CSS3的3D变换和动画功能&#xff0c;创建了一个旋转的金字塔加载动画&#xff0c;每个侧面都有不同的颜色渐变&#xff0c;底部还有一个模糊的阴影效果&#xff0c;增加了视觉的立体感。 HTML <div class"pyramid-loader"><div cl…

C++中定义类型名的方法

什么是 C 中的类型别名和 using 声明&#xff1f; 类型别名与using都是为了提高代码的可读性。 有两种方法可以定义类型别名 一种是使用关键字typedef起别名使用别名声明来定义类型的别名&#xff0c;即使用using. typedef 关键字typedef作为声明语句中的基本数据类型的一…

Java 查询最大最小值 详解

在 Java 中&#xff0c;查询最大值和最小值是常见需求。以下将详细介绍 最大值和最小值的查询方法&#xff0c;包括适用于数组、集合、以及更复杂的数据结构的解决方案。 1. 使用 Math 类 Java 提供了 Math.max 和 Math.min 方法&#xff0c;可用于直接比较两个值。 适用场景…

git标签和分支

在 Git 中&#xff0c;标签&#xff08;Tag&#xff09;和分支&#xff08;Branch&#xff09;都是用来标识代码快照的工具&#xff0c;但是它们有着不同的用途和行为方式。 分支&#xff08;Branch&#xff09; 目的&#xff1a;分支主要用于开发过程中的不同功能或版本的开…

selinux及防火墙

selinux说明 SELinux 是 Security-Enhanced Linux 的缩写&#xff0c;意思是安全强化的 linux 。 SELinux 主要由美国国家安全局&#xff08; NSA &#xff09;开发&#xff0c;当初开发的目的是为了避免资源的误用。 httpd进程标签&#xff08;/usr/share/nginx/html &#…

vue 富文本图片如何拖拽

在Vue项目中实现富文本编辑器&#xff08;如vue-quill-editor&#xff09;的图片拖拽功能&#xff0c;需要结合Quill.js及其相关插件进行配置 安装必要的依赖包&#xff1a; 你需要安装vue-quill-editor作为富文本编辑器的基础组件。为了支持图片拖拽功能&#xff0c;你还需要…

秋招面试基础总结,Java八股文基础(串联知识),四万字大全

目录 值传递和引用传递 静态变量和静态代码块的执行顺序 Java​​​​​​​集合的框架&#xff0c;Set,HashSet,LinkedHashSet这三个底层是什么 多线程篇 Java实现多线程的方式 假设一个线程池&#xff0c;核心线程数是2&#xff0c;最大线程数是3&#xff0c;阻塞队列是4…