在前端开发中需要考虑的常见web安全问题和攻击原理以及防范措施

文章目录

        • 一、XSS攻击
            • 1、反射型XSS
            • 攻击原理
            • 2、DOM型XSS
            • 攻击原理
            • 3、存储型XSS
            • 攻击原理
          • 防范措施
        • 二、CSRF攻击
          • 攻击原理：
          • 防范措施：
        • 三、点击劫持
          • 攻击原理：
          • 防范措施：
        • 四、项目中如何预防安全问题

随着互联网的发展，Web应用程序越来越普及，但是Web安全问题也随之增加。前端开发者作为Web应用程序的构建者之一，需要了解和掌握Web安全的基本知识和解决方案。本文将介绍前端开发者必须知道的Web安全问题和防范措施。

一、XSS攻击

XSS攻击指的是跨站脚本攻击，是一种代码注入攻击。攻击者通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript，但实际上也可以包括Java、VBScript、ActiveX、Flash或者甚至是普通的HTML。攻击成功后，攻击者可能得到包括但不限于更高的权限（如执行一些操作）、私密网页内容、会话和cookie等各种内容。

XSS攻类型：

1、反射型XSS

当用户点击一个恶意链接，或者提交一个表单，或者进入一个恶意网站时，注入脚本进入被攻击者的网站。Web服务器将注入一个脚本，比如一个错误信息、搜索结果等，未进行过滤直接返回到用户的浏览器上。

攻击原理
  • 攻击者构造出特殊的url，其中包含恶意代码。
  • 用户打开带有恶意代码的url时，网站服务端将恶意代码从url取出，拼接在HTML中返回给用户。
  • 用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行。
  • 恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。
2、DOM型XSS

DOM 型 XSS 攻击，实际上就是前端 JavaScript 代码不够严谨，把不可信的内容插入到了页面。在使用 .innerHTML、.outerHTML、.appendChild、document.write()等API时要特别小心，不要把不可信的数据作为 HTML 插到页面上，尽量使用 .innerText、.textContent、.setAttribute() 等。

攻击原理
  • 攻击者构造出特殊数据，其中包含恶意代码。
  • 用户浏览器执行了恶意代码。
  • 恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。
3、存储型XSS

恶意脚本永久存储在目标服务器上。当浏览器请求数据时，脚本从服务器传回并执行，影响范围比反射型和DOM型XSS更大。存储型XSS攻击的原因仍然是没有做好数据过滤：前端提交数据至服务端时，没有做好过滤；服务端在接受到数据时，在存储之前，没有做过滤；前端从服务端请求到数据，没有过滤输出。

攻击原理
  • 攻击者将恶意代码提交到目标网站的数据库中。
  • 用户打开目标网站时，网站服务端将恶意代码从数据库取出，拼接在 HTML 中返回给浏览器。
  • 用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行。
  • 恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。
防范措施

  • 输入检查和过滤：对所有用户输入进行严格的检查和过滤，防止恶意代码注入。这包括对表单输入、URL参数、Cookie等进行检查。确保不允许直接在页面上输出用户提交的数据，特别是在HTML中，应该对特殊字符进行转义。

  • 使用POST代替GET：因为GET请求会将数据放在URL中，容易被恶意用户利用来执行XSS攻击。而POST请求则将数据放在请求体中，更安全。

  • 避免直接在Cookie中泄露用户隐私：比如email、密码等。其次通过使cookie和系统ip绑定来降低cookie泄露后的危险。

  • 验证码：防止脚本冒充用户提交危险操作。

  • 使用HTTPOnly标记来限制cookie的访问，防止cookie被盗用。
    当用户的登录凭证存储于服务器的 session 中，而在浏览器中是以 cookie 的形式存储的。很多XSS攻击目标都是窃取用户cookie伪造身份认证。可以通过在 cookie 中设置 HttpOnly 属性，js脚本将无法读取到 cookie 信息。

    cookies.set(name, value, {httpOnly: true // 默认为 true
})

  • 内容安全策略（CSP）：防XSS等攻击的利器。CSP 的实质就是白名单制度，开发者明确告诉客户端，哪些外部资源可以加载和执行，等同于提供白名单。它的实现和执行全部由浏览器完成，开发者只需提供配置。CSP 大大增强了网页的安全性。攻击者即使发现了漏洞，也没法注入脚本，除非还控制了一台列入了白名单的可信主机。

    • 通过 HTTP 头信息的Content-Security-Policy的字段

      //该页面只允许当前源和https://apis.example.com 这 2 个源的脚本加载和执行
Content-Security-Policy: script-src 'self' https://apis.example.com

    • 通过网页的标签

      //该页面只允许当前源和https://apis.example.com 这 2 个源的脚本加载和执行
<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://apis.example.com">
二、CSRF攻击

跨站请求伪造（CSRF）是一种黑客攻击技术，攻击者通过伪装来自受信任的用户的请求来攻击受信任的网站，利用网站对于用户网页浏览器的信任，挟持用户当前已登陆的Web应用程序，去执行并非用户本意的操作。

攻击原理：

  • 用户登录、浏览并信任正规网站WebA，同时，WebA通过用户的验证并在用户的浏览器中产生Cookie。

  • 攻击者WebB通过在WebA中添加图片链接等方式诱导用户User访问网站WebB。

  • 在用户User被诱导访问WebB后，WebB会利用用户User的浏览器访问第三方网站WebA，并发出操作请求。

  • 用户User的浏览器根据WebB的要求，带着步骤一中产生的Cookie访问WebA。

防范措施：

  • 使用随机的Token来验证用户请求的合法性。
    服务端给用户生成一个token，加密后传递给用户，用户在提交请求时，需要携带这个token，服务端验证token是否正确。

  • 同源检测：阻止不同域的访问
    请求来源限制，此种方法成本最低，但是并不能保证 100% 有效，因为服务器并不是什么时候都能取到 Referer，而且低版本的浏览器存在伪造 Referer 的风险。

  • 涉及到数据修改操作严格使用 post 请求而不是 get 请求
    get 的 URL 会被放在浏览器历史和 WEB 服务器日志里面，如果把关键数据放在 get 里面，被人偷窥了浏览器，会造成数据泄露。而 post 日志没有记录，也不会保留 URL，只要数据库服务器不被入侵，基本还是安全的。

  • 使用验证码
    强制用户必须与应用进行交互，才能完成最终请求。此种方式能很好的遏制 CSRF，但是用户体验相对差。

三、点击劫持

点击劫持（click hijacking）也称为 UI 覆盖攻击。它通过一些内容（如游戏）误导被攻击者点击，虽然被攻击者点击的是他所看到的网页，但其实所点击的是另一个置于原网页上面的透明页面。

攻击原理：

  • 攻击者构建了一个非常有吸引力的网页

  • 将被攻击的页面放置在当前页面的 iframe 中

  • 使用样式将 iframe 叠加到非常有吸引力内容的上方

  • 将iframe设置为100%透明

  • 用户在不知情的情况下点击按钮，触发执行一些其他命令。

防范措施：

  • 使用X-Frame-Options防止网页被iframe：X-FRAME-OPTIONS是微软提出的一个http头，专门用来防御利用iframe嵌套的点击劫持攻击。

    • DENY // 拒绝任何域加载
    • SAMEORIGIN // 允许同源域下加载
    • ALLOW-FROM // 可以定义允许frame加载的页面地址

  • 判断当前页面是否被嵌入到 iframe 中。

    if(top.location != self.location){top.location = window.location;
}
四、项目中如何预防安全问题

  • 强化安全意识：在项目启动阶段，就需要强调安全问题的重要性，强化所有项目成员的安全意识。让每个人都明白自己在保障项目安全方面的责任，并积极参与到安全工作中来。

  • 建立安全管理制度：制定一套完善的安全管理制度，明确各项安全管理要求和标准。包括安全培训制度、安全操作规程、安全检查制度等，确保每个环节都得到有效管理。

  • 实施安全性设计：从设计阶段开始，就需要注意安全性设计。遵循安全性设计原则和标准，考虑可能出现的攻击和漏洞，采取相应的防范措施。同时，需要加强数据加密、访问控制、权限管理等关键环节的安全性设计。

  • 加强代码审查：建立代码审查机制，确保代码质量和安全性。通过定期的代码审查，可以发现并纠正潜在的安全漏洞和错误。同时，需要关注最新的安全漏洞和补丁，及时修复和升级系统。

  • 实施安全培训：对项目成员进行安全培训，提高他们的安全意识和技能。培训内容包括安全基础知识、安全漏洞防范、应急响应等。定期组织安全培训和演练，增强项目成员的安全意识和应对能力。

  • 建立安全测试机制：在项目开发过程中，建立安全测试机制。包括安全性测试、可靠性测试、性能测试等。通过模拟各种攻击场景和漏洞利用方式，发现并修复潜在的安全问题。同时，需要关注最新的漏洞利用方式和攻击手段，及时调整测试策略。

  • 做好数据保护：保护项目中的敏感数据是预防安全问题的关键之一。采取加密、访问控制、数据备份等措施，确保数据的机密性和完整性。同时，需要关注数据的安全审计和监控，及时发现并应对数据安全事件。

  • 定期审查和更新：定期审查和更新项目的安全策略和流程，以适应新的安全威胁和业务需求。同时，需要关注最新的安全漏洞和补丁，及时修复和升级系统。

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

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

相关文章

2024QS世界大学排名完整榜单

2024QS世界大学排名完整榜单

第1位: 麻省理工学院 第2位: 剑桥大学 第3位: 牛津大学 第4位: 哈佛大学 第5位: 斯坦福大学 第6位: 帝国理工学院 第7位: 苏黎世联邦理工大学&#xff08;瑞士联邦理工学院&#xff09; 第8位: 新加坡国立大学 第9位: 伦敦大学学院 第10位: 加州大学伯克利分校 第11位…
阅读更多...
Self-RAG：通过自我反思学习检索、生成和批判

Self-RAG：通过自我反思学习检索、生成和批判

论文地址&#xff1a;https://arxiv.org/abs/2310.11511 项目主页&#xff1a;https://selfrag.github.io/ Self-RAG学习检索、生成和批评&#xff0c;以提高 LM 的输出质量和真实性&#xff0c;在六项任务上优于 ChatGPT 和检索增强的 LLama2 Chat。 问题&#xff1a;万能L…
阅读更多...
10分钟完成权限系统全流程开发

10分钟完成权限系统全流程开发

背景 首先问下chatgpt,权限系统的模型有哪些&#xff1f; 基于上述的结论&#xff0c;我们选择基于角色的访问控制(RBAC)&#xff0c;请从数据库设计、接口文档、代码实现、单元测试四个方面分别详细描述每个部份需要实现的内容。 数据库实现 针对上述的数据库设计部份&#…
阅读更多...
格局打开！前端未死，只是要求变高了

格局打开！前端未死，只是要求变高了

本文笔者会从以下几个方面分享&#xff0c;希望能够帮助正在迷茫的前端小伙伴提供一点思路&#xff01; 逛技术博客 不局限框架 全栈工程师兴起 关注前沿 写技术文章 录制前端视频 总结 2024年了&#xff0c;没工作的找到工作了吗&#xff1f;有工作的加薪了吗&#xff1f;加薪…
阅读更多...
【高等数学之极限】

【高等数学之极限】

一、引言 我们先思考一下&#xff0c;上面三个表达式&#xff0c;是否可以将极限值直接代入求值&#xff0c;我们在计算之前需要先分析一下&#xff0c;如果将极限值代入&#xff0c;那么表达式将会变成什么形式? 经过上面的分析&#xff0c;我们发现第一个式子可以直接带入&a…
阅读更多...
浪花 - 主页开发

浪花 - 主页开发

一、简易版主页 1. 主页展示用户列表 <template><!--推荐用户列表--><van-cardv-for"user in userList":desc"user.profile":title"${user.username}(${user.planetCode})":thumb"user.avatarUrl"><template #…
阅读更多...
VUE表单中多个el-upload上传组件共享回调函数解决方案

VUE表单中多个el-upload上传组件共享回调函数解决方案

产品需求界面&#xff1a; 在产品配置页面表单中需要上传多个图片&#xff0c;项目中上传组件采用Element Plus 中的 el-upload&#xff0c;目前问题是每个上传组件都需要实现自己的回调&#xff0c;比如:on-change&#xff0c;采用官方推荐标准代码如下&#xff1a; <el-fo…
阅读更多...
java中的时间API

java中的时间API

Created: January 19, 2024 2:31 PM 1、旧版时间API的缺点 在java1.0中使用java.utol.Date类表示时间&#xff0c;该类存在很多问题&#xff0c;例如时间零点是1900年1月0日&#xff0c;例如想到表示2024年1月19日就需要如下定义&#xff0c;此外Date也无法表示时间、包含默认…
阅读更多...
西瓜书读书笔记整理（十二） —— 第十二章 计算学习理论

西瓜书读书笔记整理（十二） —— 第十二章 计算学习理论

第十二章 计算学习理论&#xff08;上&#xff09; 12.1 基础知识12.1.1 什么是计算学习理论&#xff08;computational learning theory&#xff09;12.1.2 什么是独立同分布&#xff08;independent and identically distributed, 简称 i . i . d . i.i.d. i.i.d.&#xff0…
阅读更多...
Mysql运维篇（一） 日志类型

Mysql运维篇（一） 日志类型

一路走来&#xff0c;所有遇到的人&#xff0c;帮助过我的、伤害过我的都是朋友&#xff0c;没有一个是敌人&#xff0c;如有侵权请留言&#xff0c;我及时删除。 一、mysql相关日志 首先&#xff0c;我们能接触到的&#xff0c;一般我们排查慢查询时&#xff0c;会去看慢查询…
阅读更多...
设置Json对象输出字段顺序

设置Json对象输出字段顺序

场景 通过情况下对前端输出json格式不需要关注字段顺序&#xff0c;但某些特殊场景需要设置字段输出顺序(例nginx需要对特殊字段顺序进行加密处理)&#xff1b;框架有默认的顺序&#xff0c;如 jackson 默认使用字段声明的顺序&#xff0c; fastjson 默认是使用字典序。 jackso…
阅读更多...
一篇文章带你了解 什么是u(ustd）带你了解他的前世今生

一篇文章带你了解 什么是u(ustd）带你了解他的前世今生

在数字货币的繁荣世界中&#xff0c;USDT无疑是其中一位重要的角色。它的前世今生&#xff0c;是一个从无到有&#xff0c;从小到大&#xff0c;经历了种种波折和争议的故事。 2014年11月下旬&#xff0c;一个名为Realcoin的注册地为马恩岛和香港的公司决定改变自己的名字&…
阅读更多...
TZOJ:3525：Find Your Present (找到你的礼物)

TZOJ:3525：Find Your Present (找到你的礼物)

标签:位运算 描述 In the new year party, everybody will get a "special present".Now its your turn to get your special present, a lot of presents now putting on the desk, and only one of them will be yours.Each present has a card number on it, an…
阅读更多...
C和指针课后答案

C和指针课后答案

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 前言 第八章课后答案 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参…
阅读更多...
C++参悟：正则表达式库regex（更新中）

C++参悟：正则表达式库regex（更新中）

正则表达式库regex&#xff08;更新中&#xff09; 一、概述二、快速上手Demo1. 查找字符串2. 匹配字符串3. 替换字符串 三、类关系梳理1. 主类1. basic_regex 2. 算法3. 迭代器4. 异常5. 特征6. 常量1. syntax_option_type2. match_flag_type3. error_type 一、概述 C标准库为…
阅读更多...
Halcon基于描述符的模板匹配

Halcon基于描述符的模板匹配

Halcon基于描述符的模板匹配 与基于透视形变的模板匹配类似&#xff0c;基于描述符的模板匹配能够在物体处于透视形变的状态下进行匹配&#xff0c;并且已标定和未标定的相机图像都适用。与透视形变不同的是&#xff0c;它的模板不是根据边缘轮廊创建的&#xff0c;而是根据特…
阅读更多...
【根据loss曲线看模型微调效果】如何使用loss曲线诊断机器学习模型性能

【根据loss曲线看模型微调效果】如何使用loss曲线诊断机器学习模型性能

一、Loss曲线 在模型的预训练或者微调过程中&#xff0c;我们一般通过观察loss曲线来得出模型对于数据集的学习效果等信息。那么我们如何根据loss曲线得到一些信息呢&#xff1f; 通常数据集会被划分成三部分&#xff0c;训练集&#xff08;training dataset&#xff09;、验证…
阅读更多...
UVA10678 The Grazing Cow 题解a

UVA10678 The Grazing Cow 题解a

一个字&#xff1a;水…… 思路 一头牛被栓在两个柱子之间&#xff0c;牛可以在绳子上来回移动&#xff0c;问它能吃到草的最大面积。 高中学椭圆的定义&#xff0c;椭圆是平面上到两定点的距离之和为常值的点之轨迹&#xff0c; 也可定义为到定点距离与到定直线间距离之比为…
阅读更多...
集美大学“第15届蓝桥杯大赛(软件类)“校内选拔赛 H卯酉东海道

集美大学“第15届蓝桥杯大赛(软件类)“校内选拔赛 H卯酉东海道

dijk spfa思想 然后你需要存一下每个点 * l种颜色&#xff0c;你开个数组存一下 st[i][j] 为到达i点且到达以后是j颜色的最小距离是否已经确定了 #include<bits/stdc.h> using namespace std; using ll long long; const int N 3e510; struct Edge{ll to,col,w;bool …
阅读更多...
C++进阶--哈希表的的闭散列和开散列（哈希桶）实现

C++进阶--哈希表的的闭散列和开散列（哈希桶）实现

哈希表的的闭散列和开散列&#xff08;哈希桶&#xff09;实现 一、哈希概念二、哈希冲突三、哈希函数3.1 直接定址法--&#xff08;常用&#xff09;3.2 除留余数法--&#xff08;常用&#xff09;3.3 平方取中法--&#xff08;了解&#xff09;3.4 折叠法--&#xff08;了解&…
阅读更多...
最新文章

Copyright @ 2022~2023