前端面试之对安全防御的理解分析

目录
  • 1.引言
  • 2.常见前端攻击策略
  • 3.攻击策略解释
    • 3.1 SQL注入
    • 3.2 XSS攻击
    • 3.3 CSRF攻击
  • 4.攻击防御的正确姿势
    • 4.1 SQL注入防御
    • 4.2 XSS防御
    • 4.3 CSRF防御

1.引言

每逢前端面试，80%的候选人都会被问到这个问题。这问题确确实实是一道八股文。为了应付面试，我自己也是反反复复背了好几次，但是记了又忘，忘了又记，如此优雅的恶性循环让我痛下决心去搞定其中的枝枝叶叶。废话不多说，上车吧。

2.常见前端攻击策略

  • SQL注入
  • XSS攻击
  • CSRF攻击

3.攻击策略解释

3.1 SQL注入

sql注入通常是在url头或者表单内部通过拼接sql语句实现攻击。

它的原理比较简单，当浏览器url头或者表单提交数据到后端时，后端会进行数据库操作，如果未经过处理请求参数，那么攻击者会通过任意sql语句获取关键敏感数据从而实现攻击。

3.2 XSS攻击

xss攻击也是十分经典的，在前端发展历程中也是打不死的小强，现在已经衍生出了许多xss攻击策略。

  • 存储型：经过后端+经过数据库

存储型攻击通常指攻击者在前端的表单上输入恶意脚本代码，后端将表单数据保存到数据库，之后通过读取数据库信息显示在前端。

如下所示，假设该表单是一个评论功能，后端将表单内容保存到数据库后展示在界面上。如果前端解析表单内容是通过innerHTML,那用户的cookie信息就会被窃取。

  • 反射型：经过后端+不经过数据库

反射型攻击有个十分经典的案例，用过qq的小伙伴都知道每年都会爆料某诱骗链接伪造qq登录骗取用户登录信息造成个人数据泄露。这类诱导链接十分有趣，我本人也上当过。它的标题经常是"什么，你竟然和同班xxx一起合过影"等刺激信息诱骗用户点击进而输入个人账号信息。然后攻击者后端会收到用户输入的账号和密码进而盗窃。

  • Dom型：前端

谈到dom型攻击，也是十分简单。根据名称就知道和dom元素相关。此类攻击方式是建立在dom节点上。如下例子

//正确的链接
<img src='http://www.baidu.com'/>
//错误的链接
<img src="http://error.com"/ onerror=()=>{alert(document.cookie())}>

看了上面的例子，相比有的小伙伴有了点头绪，攻击者修改img标签的src，并给dom添加错误触发事件，当图片无法加载就会触发脚本代码从而获取用户信息。

3.3 CSRF攻击

csrf攻击又称为跨站伪造攻击，具体解释就是你在访问淘宝页面，此时一个yellow网站的弹窗突然出现，由于你经受不住好奇心，于是想一探究竟。然后你就进入这个yellow网站，由于你在淘宝页面有了登录状态，前端自动保存了cookie信息，当你在进入yellow网站时已经向它的后端发起了http请求，此时cookie身份信息就被这个yellow网站窃取了。

4.攻击防御的正确姿势

4.1 SQL注入防御

此处我们只是讨论前端在sql注入的防御措施，通常我们在表单提交时对sql语句的特殊变量进行转译，这样可以将其作为普通字符串处理而组织获取敏感信息。

4.2 XSS防御

  • 针对登录方式的，可以采取扫码和动态验证码等结合方式
  • 针对窃取用户cookie的，我们可以在后端设置httponly防止前端读取用户的cookie
  • 不相信用户输入的任何数据，所有输入的数据应该在前端进行转译和限制，减少innerHTML的使用

4.3 CSRF防御

看了上面的CSRF攻击方式，我们可以总结以下防御手段

  • 后端设置secure,这个字段保证了只有是https的网站才会将cookie携带，因为https都是经过安全认证的，一般不会存在问题
  • 后端设置SameSites字段是Strict，这个字段称为严格模式，它会校验当前发起后端请求的网站是不是自己站点的，如果不符合不会携带cookie,有效的避免了危机。
  • token验证机制，这个很有意思啊，有个面试官曾经问过这么一个问题，听过token可以防止csrf攻击，那你token放在哪里？是cookie还是localstorage上？这个要好好考虑，这个必须是放在localstorage上，如果放在未经后端严格设置的cookie上，还是会被第三方通过cookie获取到你的token密钥。由于localstorage在浏览器上存在同源机制，第三方打死都无法获取你localstoarge的值，除非第三方偷你电脑。所以我们可以将token放到localstorage上预防csrf攻击。

以上就是前端面试之对安全防御的理解分析的详细内容，更多关于前端面试安全防御的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • PHP网络安全之命令执行漏洞及防御

    PHP网络安全之命令执行漏洞及防御

    目录 命令执行漏洞的原理 命令执行漏洞产生原因 命令执行漏洞的危害 命令执行的防御手段 DVWA介绍 命令执行漏洞的原理 程序应用有时需要调用一些执行系统命令的函数,如php中的system,exec,shell exec,passthru,popen,proc popen等,当用户可以控制这些函数的参数时,就可以将恶意系统命令拼接到正常命令中,从而造成命令注入攻击 两个条件 (1)用户可以控制函数输入 (2)存在可以执行代码的危险函数 命令执行漏洞产生原因 1.开发人员编写源码时,未针对代码中

  • 原生防火墙 网络安全防御新趋势

    作者: 淮河水手 出处: 电脑报 面对不断"更新"的病毒和攻击技术,你难道不想了解新的安全技术,装备新的安全产品,以保护自己的爱机.绝密的资料吗?不要担心,"安全新秀"将会为你介绍最新的安全技术.资讯,最新的安全产品,让你永远走在安全的前沿. 对于个人用户来说,主要是依靠基于操作系统的软件网络防火墙(如天网.瑞星等)来保护自己的系统安全,免受黑客和病毒的攻击.但这种传统的安全防御方式有很多令人不满意的地方(如占用过多的系统资源.系统速度变慢.效果不理想等).最近,N

  • 阿里云盾网站安全防御(WAF)的使用方法(图文)

    阿里云盾网站安全防御(WAF)的使用方法(图文)

    将2个网站搬到阿里云,一个是因为阿里云稳定,另一个就是牛逼轰轰的云盾了.之前在博客联盟群里模拟CC攻击过搭建在阿里云ECS上的博客,结果云盾毫无反应,而网站已经挂了. 这次特意细看了一下云盾上的CC防护功能,发现有部分朋友估计并未正确使用WAF.所以,我在本文就简单的分享一下阿里云盾-WAF网站防御的正确使用方法. 一.域名解析 大部分朋友,只是开启了云盾就不管了,这也就是很多朋友受到CC攻击后,云盾却毫无反应的原因了.实际上WAF防御必须配合域名解析来使用. 阿里云的WAF网站防御实际上相当于

  • Node.js中的不安全跳转如何防御详解

    Node.js中的不安全跳转如何防御详解

    导语: 早年在浏览器大战期间,有远见的Chrome认为要运行现代Web应用,浏览器必须有一个性能非常强劲的Java引擎,于是Google自己开发了一个高性能的开源的Java引擎,名字叫V8.在2009年,Ryan正式推出了基于Java语言和V8引擎的开源Web服务器项目,命名为Node.js. 对于任何web开发人员来说,不安全或未经验证的重定向都是重要的安全考虑因素.Express为重定向提供了本地支持,使它们易于实现和使用.Express是一种保持最低程度规模的灵活Node.js Web应用

  • 详解前端安全之JavaScript防http劫持与XSS

    详解前端安全之JavaScript防http劫持与XSS

    HTTP劫持.DNS劫持与XSS 先简单讲讲什么是 HTTP 劫持与 DNS 劫持. HTTP劫持 什么是HTTP劫持呢,大多数情况是运营商HTTP劫持,当我们使用HTTP请求请求一个网站页面的时候,网络运营商会在正常的数据流中插入精心设计的网络数据报文,让客户端(通常是浏览器)展示"错误"的数据,通常是一些弹窗,宣传性广告或者直接显示某网站的内容,大家应该都有遇到过. DNS劫持 DNS 劫持就是通过劫持了 DNS 服务器,通过某些手段取得某域名的解析记录控制权,进而修改此域名的解析

  • 网络安全及防御之SQL注入原理介绍

    网络安全及防御之SQL注入原理介绍

    目录 A.SQL注入概述 什么是SQL注入 SQL注入的原理 SQL注入的地位 SQL注入的来源 SQL注入的主要特点 SQL注入的危害 B.SQL注入攻击 SQL注入攻击 SQL注入威胁表达方式 SQL注入典型攻击手段 SQL注入是否存在注入的判断方式 SQL注入实战步骤 按照注入点类型来分类 按照数据提交的方式来分类 按照执行效果来分类 C.MySQL注入常用函数 MySQL的注释风格 MySQL--union操作符 MySQL--常用函数 MySQL--字符串连接函数 MySQL--inf

  • Windows server 2008 R2 服务器系统安全防御加固方法

    Windows server 2008 R2 服务器系统安全防御加固方法

    一.更改终端默认端口号 步骤: 1.运行regedit 2.[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Terminal Server\Wds \rdpwd\Tds \tcp],看见PortNamber值了吗?其默认值是3389,修改成所希望的端口即可,例如12345 3.[HKEY_LOCAL_MACHINE\SYSTEM\CurrentContro1Set\Control\Tenninal Server\WinStations\

  • 前端常见的安全问题以及防范措施总结大全

    前端常见的安全问题以及防范措施总结大全

    目录 前言 前端安全问题 跨站脚本攻击(XSS) 反射型XSS攻击 基于DOM的XSS攻击 存储型XSS攻击 这几种XSS攻击类型的区别 XSS防范措施 输入过滤 预防存储型和反射型XSS攻击 预防DOM型XSS攻击 ContentSecurityPolicy 其他措施 XSS攻击案例 跨站请求伪造(CSRF) CSRF是怎么攻击的? 常见的CSRF攻击类型 GET类型的CSRF POST类型的CSRF 链接类型的CSRF CSRF的特点 CSRF防范措施 同源检测 CSRFToken 给Coo

  • Web安全之XSS攻击与防御小结

    Web安全之XSS攻防 1. XSS的定义 跨站脚本攻击(Cross Site Scripting),缩写为XSS.恶意攻击者往Web页面里插入恶意Script代码,当用户浏览该页之时,嵌入其中Web里面的Script代码会被执行,从而达到恶意攻击用户的目的. 2. XSS的原理 攻击者对含有漏洞的服务器发起XSS攻击(注入JS代码). 诱使受害者打开受到攻击的服务器URL. 受害者在Web浏览器中打开URL,恶意脚本执行. 3. XSS的攻击方式 (1)反射型: 发出请求时,XSS代码出现在U

  • 前端面试之对安全防御的理解分析

    前端面试之对安全防御的理解分析

    目录 1.引言 2.常见前端攻击策略 3.攻击策略解释 3.1 SQL注入 3.2 XSS攻击 3.3 CSRF攻击 4.攻击防御的正确姿势 4.1 SQL注入防御 4.2 XSS防御 4.3 CSRF防御 1.引言 每逢前端面试,80%的候选人都会被问到这个问题.这问题确确实实是一道八股文.为了应付面试,我自己也是反反复复背了好几次,但是记了又忘,忘了又记,如此优雅的恶性循环让我痛下决心去搞定其中的枝枝叶叶.废话不多说,上车吧. 2.常见前端攻击策略 SQL注入 XSS攻击 CSRF攻击 3.

  • 前端面试知识点目录一览

    写在前面: 金三银四, 又到了一年一度的跳槽季, 相信大家都在准备自己面试笔记, 我也针对自己工作中所掌握或了解的一些东西做了一个目录总结,方便自己复习; 详细内容会在之后一一对应地补充上去(有些在我的个人主页笔记中也有相关记录), 这里暂且放一个我的面试知识点目录; 大家有兴趣可以自己根据目录去扩展, 欢迎在评论下方指点一二, 看还有哪些没考虑到的, 互相交流一哈... 基本功考察 关于Html 1. html语义化标签的理解; 结构化的理解; 能否写出简洁的html结构; SEO优化   

  • 前端面试JavaScript高频手写大全

    前端面试JavaScript高频手写大全

    目录 1. 手写instanceof 2. 实现数组的map方法 3. reduce实现数组的map方法 4. 手写数组的reduce方法 5. 数组扁平化 5. 1 es6提供的新方法 flat(depth) 5.2 利用cancat 6. 函数柯里化 7. 浅拷贝和深拷贝的实现 7.1浅拷贝和深拷贝的区别 8. 手写call, apply, bind 8.1 手写call 8.2 手写apply(arguments[this, [参数1,参数2.....] ]) 8.3 手写bind 9.

  • JavaScript前端面试扁平数据转tree与tree数据扁平化

    JavaScript前端面试扁平数据转tree与tree数据扁平化

    目录 一.写在前面 二.正文部分 2.1 扁平数据转为 tree 数据 2.2 tree 数据转为扁平数据 2.3 完整测试 demo 三.写在后面 一.写在前面 有时我们拿到的数据的数据结构可能不是理想的,那么此时就要求前端程序员,具有改造数据的能力.例如拿到扁平的数据, 但我们要应用在 tree 树形组件或 Cascader 级联选择器组件中,这样的组件要求数据结构是非扁平的的具有层级递进关系的 tree 结构. 总之就是说,提供数据的接口给到的数据,未必符合要求,而当我们又无法令他人为为我

  • 前端面试之输入npm run后执行原理

    前端面试之输入npm run后执行原理

    目录 引言 引言 在前端开发的工作当中,使用 npm run dev 的命令启动本地开发环境,是再正常不过的事了.那么,当输入完类似 npm run xxx 的命令后,究竟是如何触发各种构建工具的构建命令以及启动 Node 服务等功能的呢? 首先我们知道,Node 作为 JavaScript 的运行时,可以把 .js 文件当做脚本来运行,像这种: node index.js 当我们使用 npm 来管理项目(或者 yarn)时,会在根目录下生成一个 package.json 文件,其中的 scri

  • 前端面试的底气之实现一个深拷贝

    前端面试的底气之实现一个深拷贝

    目录 前言 青铜段位 白银段位 黄金段位 铂金段位 砖石段位 星耀段位 王者段位 总结 前言 深拷贝这个功能在开发中经常使用到,特别在对引用类型的数据进行操作时,一般会先深拷贝一份赋值给一个变量,然后在对其操作,防止影响到其它使用该数据的地方. 如何实现一个深拷贝,在面试中出现频率一直居高不下.因为在实现一个深拷贝过程中,可以看出应聘者很多方面的能力. 本专栏将从青铜到王者来介绍怎么实现一个深拷贝,以及每个段位对应的能力. 青铜段位 JSON.parse(JSON.stringify(data)

  • JS前端面试数组扁平化手写flat函数示例

    目录 前言 题目 实现扁平化的方法 封装 flatten 1. ES6 flat 2. toString 3. 使用正则替换 4. 循环递归 4.1 循环 + concat + push 4.2 增加参数控制扁平化深度 4.3 巧用 reduce 4.4 使用 Generator 函数 5. 使用堆栈 stack 避免递归 6.while 循环+ some方法 前言 由于上半年参加了校招的技术面试, 前前后后面了20多个人了, 每次面试都会让应聘者手写一下数组扁平化flat(),但是发现居然没有

  • JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】

    JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】

    本文实例讲述了JS前端面试必备--基本排序算法原理与实现方法.分享给大家供大家参考,具体如下: 排序算法是面试及笔试中必考点,本文通过动画方式演示,通过实例讲解,最后给出JavaScript版的排序算法 插入排序 算法描述: 1. 从第一个元素开始,该元素可以认为已经被排序 2. 取出下一个元素,在已经排序的元素序列中从后向前扫描 3. 如果该元素(已排序)大于新元素,将该元素移到下一位置 4. 重复步骤 3,直到找到已排序的元素小于或者等于新元素的位置 5. 将新元素插入到该位置后 6. 重复

  • JS一次前端面试经历记录

    本文实例讲述了JS一次前端面试经历.分享给大家供大家参考,具体如下: 最近公司在做一些战略调整,部门有不少老员工前辈们都陆陆续续的离职或者被离职了.而我所在的团队--网易菠萝,也被归并到游戏运营中心了.因为产品策划还没有出来.暂时没什么需求做,闲得有点e-g-g疼的,每天从早到晚都是待在公司看看书.刷刷知乎等.我真是命途多舛啊,还没有真正步入社会,就见证了一个上百人的事业部说没落就没落.甚至已看破红尘,连参加省公务员考试的计划都做好了.这可不是开玩笑的哈,已经在报名费和复习资料上花了两三百块啦,

  • 高级前端面试手写扁平数据结构转Tree

    目录 前言 什么是好算法,什么是坏算法 时间复杂度 计算方法 空间复杂度 计算方法: 不考虑性能实现,递归遍历查找 不用递归,也能搞定 最优性能 小试牛刀 前言 招聘季节一般都在金三银四,或者金九银十.最近在这五六月份,陆陆续续面试了十几个高级前端.有一套考察算法的小题目.后台返回一个扁平的数据结构,转成树. 我们看下题目:打平的数据内容如下: let arr = [ {id: 1, name: '部门1', pid: 0}, {id: 2, name: '部门2', pid: 1}, {id:

随机推荐