DAY23刷面试题

昨天两场面试加笔试给孩子整懵了,有个面试问道了ts,而我只知道他和java长得挺像的,害,凉凉。

XSS和CSRF攻击知道吗?

XSS攻击

(1)概念
XSS攻击指的是跨站脚本攻击,是一种代码注入攻击,攻击者通过在网站注入恶意脚本,使之在用户浏览器上运行,从而盗取用户的信息,入cookie等。
XSS的本质是因为网站没有对恶意代码进行过滤,与正常的代码混合在一起了,浏览器没有办法分辨哪些脚本是可信的,从而导致了恶意代码的执行。
攻击者可以通过这种攻击方式可以进行以下操作:

  • 获取页面数据,如DOM、cookie、localStorage
  • DOS攻击,发送合理请求,占用服务器资源,从而使用户无法访问服务器
  • 破坏页面结构
  • 流量劫持

(2)攻击类型

  • 存储型:指的是恶意脚本会存储在目标服务器上,当浏览器请求数据时,脚本从服务器传回并执行。
  • 反射型:指的是攻击者诱导用户访问一个带有恶意代码的URL后,服务器端接收数据后处理,然后把带有恶意代码的数据发送到浏览器端,浏览器端解析这段带有XSS代码的数据后当做脚本执行,最终完成XSS攻击
  • DOM型:通过修改页面的DOM节点形成的XSS

(3)预防XSS攻击

  • 可以从浏览器的执行顺序来预防,一种是使用纯前端的方式,不用服务器端拼接后返回(不使用服务端渲染)。另一种是对需要插入到HTML中的代码做好充分的转义。对于DOM型的攻击,主要是前端脚本的不可靠造成的,对于数据获取渲染和字符串拼接的时候应该对可能出现的恶意代码情况进行判断。
  • 使用CSP,CSP的本质是建立一个白名单,告诉浏览器哪些外部资源可以加载和执行,从而防止恶意代码的注入攻击。

1、CSP指的是内容安全策略,他的本质是建立一个白名单,告诉浏览器哪些外部资源可以加载和执行。我们只需要配置规则,如何拦截由浏览器自己来实现。
2、通常有两种方式来开启CSP:一种是设置HTTP首部中的Content-Security-Policy,一种是设置meta标签的方式

  • 对一些敏感信息进行保护,比如cookie使用http-only,使得脚本无法获取;也可以使用验证码,避免脚本伪装成用户执行一些操作。
CSRF攻击

(1)概念
CSRF攻击指的是跨站请求伪造攻击,攻击者诱导用户进入一个第三方网站,然后该网站向被攻击网站发送跨站请求。如果用户在被攻击网站中保存了登录状态,你们攻击者就可以利用这个登录状态,绕过后台的用户验证,冒充用户想服务器执行一些操作。

(2)攻击类型

  • GET类型:比如在网站中的一个img标签里构建一个请求,当用户打开这个网站的时候就会自动发起提交。
  • POST类型:比如构建一个表单,然后隐藏它,当用户进入页面时,自动提交这个表单。
  • 链接类型:比如在a标签的href属性里构造一个请求,然后诱导用户去点击。

(3)预防CSRF攻击

  • 进行同源检测
  • 使用 CSRF Token验证
  • 对cookie进行双重验证
  • 在设置cookie属性的时候设置samesite,限制cookie不能作为第三方使用

v-if和v-show

  • 手段:v-if是动态的向DOM树内添加或者删除DOM元素;v-show通过设置DOM元素的display样式属性控制显隐
  • 编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重构内部的事件监听和子组件;v-show只是简单的基于css的切换
  • 编译条件:v-if如果初始条件为假,则什么也不做;只有在条件第一次为真时才开始局部编译;v-show是在任何条件下,无论首次条件是否为真,都被编译,然后被缓存,而且DOM元素保留
  • 性能消耗:v-if有更高的切换消耗;v-show有更高的初始渲染消耗;
  • 使用场景:v-if适合运营条件不大可能改变;v-show适合切换频繁

HTTP缓存(强缓存、协商缓存)

强缓存
当浏览器去请求某个文件的时候,服务端就在respone header里面对该文件做了缓存配置。缓存的时间、缓存类型都由服务端控制,具体表现为:
respone header 的cache-control,常见的设置是max-age public private no-cache no-store等

在浏览器加载资源时,先看cache-control里的max-age,判断数据有没有过期,如果没有直接使用该缓存,有些用户可能会在没有过期的时候就点了刷新按钮,这个时候浏览器就回去请求服务端,要想避免这样做,可以在cache-control里面加一个immutable。

状态码:200

强缓存总结

  • cache-control: max-age=xxxx,public
    客户端和代理服务器都可以缓存该资源;
    客户端在xxx秒的有效期内,如果有请求该资源的需求的话就直接读取缓存,statu code:200 ,如果用户做了刷新操作,就向服务器发起http请求
  • cache-control: max-age=xxxx,private
    只让客户端可以缓存该资源;代理服务器不缓存
    客户端在xxx秒内直接读取缓存,statu code:200
  • cache-control: max-age=xxxx,immutable
    客户端在xxx秒的有效期内,如果有请求该资源的需求的话就直接读取缓存,statu code:200 ,即使用户做了刷新操作,也不向服务器发起http请求
  • cache-control: no-cache
    跳过设置强缓存,但是不妨碍设置协商缓存;一般如果你做了强缓存,只有在强缓存失效了才走协商缓存的,设置了no-cache就不会走强缓存了,每次请求都回询问服务端。
  • cache-control: no-store
    不缓存,这个会让客户端、服务器都不缓存,也就没有所谓的强缓存、协商缓存了。

协商缓存

如果命中强制缓存,我们无需发起新的请求,直接使用缓存内容,如果没有命中强制缓存,如果设置了协商缓存,这个时候协商缓存就会发挥作用了。

状态码:304

上面已经说到了,命中协商缓存的条件有两个:

  • max-age=xxx 过期了
  • 值为no-store

使用协商缓存策略时,会先向服务器发送一个请求,如果资源没有发生修改,则返回一个 304 状态,让浏览器使用本地的缓存副本。如果资源发生了修改,则返回修改后的资源。

设置协商缓存
response header里面的设置

etag: '5c20abbd-e2e8'
last-modified: Mon, 24 Dec 2018 09:49:49 GMT

etag:每个文件有一个,改动文件了就变了,就是个文件hash,每个文件唯一
last-modified:文件的修改时间,精确到秒
请求资源时,把用户本地该资源的 etag 同时带到服务端,服务端和最新资源做对比。
如果资源没更改,返回304,浏览器读取本地缓存。
如果资源有更改,返回200,返回最新的资源。
response header中的etag、last-modified在客户端重新向服务端发起请求时,会在request header中换个key名

etag的作用

  • 一些文件也许会周期性的更改,但是他的内容并不改变(仅仅改变的修改时间),这个时候我们并不希望客户端认为这个文件被修改了,而重新get;
  • 某些文件修改非常频繁,比如在秒以下的时间内进行修改,(比方说1s内修改了N次),if-modified-since能检查到的粒度是秒级的,这种修改无法判断(或者说UNIX记录MTIME只能精确到秒);
  • 某些服务器不能精确的得到文件的最后修改时间。

对浏览器的缓存机制的理解

浏览器缓存的全过程:

  • 浏览器第一次加载资源,服务器返回 200,浏览器从服务器下载资源文件,并缓存资源文件与 response header,以供下次加载时对比使用;
  • 下一次加载资源时,由于强制缓存优先级较高,先比较当前时间与上一次返回 200 时的时间差,如果没有超过 cache-control 设置的 max-age,则没有过期,并命中强缓存,直接从本地读取资源。如果浏览器不支持HTTP1.1,则使用 expires 头判断是否过期;
  • 如果资源已过期,则表明强制缓存没有被命中,则开始协商缓存,向服务器发送带有 If-None-Match 和 If-Modified-Since 的请求;
  • 服务器收到请求后,优先根据 Etag 的值判断被请求的文件有没有做修改,Etag 值一致则没有修改,命中协商缓存,返回 304;如果不一致则有改动,直接返回新的资源文件带上新的 Etag 值并返回 200;
  • 如果服务器收到的请求没有 Etag 值,则将 If-Modified-Since 和被请求文件的最后修改时间做比对,一致则命中协商缓存,返回 304;不一致则返回新的 last-modified 和文件并返回 200;

很多网站的资源后面都加了版本号,这样做的目的是:每次升级了 JS 或 CSS 文件后,为了防止浏览器进行缓存,强制改变版本号,客户端浏览器就会重新下载新的 JS 或 CSS 文件 ,以保证用户能够及时获得网站的最新更新。

为什么需要浏览器缓存?

对于浏览器的缓存,主要针对的是前端的静态资源,最好的效果就是,在发起请求之后,拉取相应的静态资源,并保存在本地。如果服务器的静态资源没有更新,那么在下次请求的时候,就直接从本地读取即可,如果服务器的静态资源已经更新,那么我们再次请求的时候,就到服务器拉取新的资源,并保存在本地。这样就大大的减少了请求的次数,提高了网站的性能。这就要用到浏览器的缓存策略了。

所谓的浏览器缓存指的是浏览器将用户请求过的静态资源,存储到电脑本地磁盘中,当浏览器再次访问时,就可以直接从本地加载,不需要再去服务端请求了。

使用浏览器缓存,有以下优点:

  • 减少了服务器的负担,提高了网站的性能
  • 加快了客户端网页的加载速度
  • 减少了多余网络数据传输

点击刷新按钮或者按 F5、按 Ctrl+F5 (强制刷新)、地址栏回车有什么区别?

  • 点击刷新按钮或者按 F5: 浏览器直接对本地的缓存文件过期,但是会带上If-Modifed-Since,If-None-Match,这就意味着服务器会对文件检查新鲜度,返回结果可能是 304,也有可能是 200。
  • 用户按 Ctrl+F5(强制刷新): 浏览器不仅会对本地文件过期,而且不会带上 If-Modifed-Since,If-None-Match,相当于之前从来没有请求过,返回结果是 200。
  • 地址栏回车: 浏览器发起请求,按照正常流程,本地检查是否过期,然后服务器检查新鲜度,最后返回内容。

HTTP状态码

状态码是由3位数组成,第一个数字定义了响应的类别,且有五种可能取值:

1xx:指示信息–表示请求已接收,继续处理。

2xx:成功–表示请求已被成功接收、理解、接受。

3xx:重定向–要完成请求必须进行更进一步的操作。

4xx:客户端错误–请求有语法错误或请求无法实现。

5xx:服务器端错误–服务器未能实现合法的请求。
平时遇到比较常见的状态码有:200, 204, 301, 302, 304, 400, 401, 403, 404, 422, 500。

  • 200 OK 表示客户端请求成功
  • 204 No Content 成功,但不返回任何实体的主体部分
  • 206 Partial Content 成功执行了一个范围(Range)请求
  • 301 Moved Permanently 永久性重定向,响应报文的Location首部应该有该资源的新URL
  • 302 Found 临时性重定向,响应报文的Location首部给出的URL用来临时定位资源
  • 303 See Other 请求的资源存在着另一个URI,客户端应使用GET方法定向获取请求的资源
  • 304 Not Modified 服务器内容没有更新,可以直接读取浏览器缓存
  • 400 Bad Request 表示客户端请求有语法错误,不能被服务器所理解
  • 401 Unauthonzed 表示请求未经授权,该状态代码必须与 WWW-Authenticate 报头域一起使用
  • 403 Forbidden 表示服务器收到请求,但是拒绝提供服务,通常会在响应正文中给出不提供服务的原因
  • 404 Not Found 请求的资源不存在,例如,输入了错误的URL
  • 500 Internel Server Error 表示服务器发生不可预期的错误,导致无法完成客户端的请求
  • 503 Service Unavailable 表示服务器当前不能够处理客户端的请求,在一段时间之后,服务器可能会恢复正常

HTTP协议

HTTP协议是超文本传输协议,定义了客户端和服务器之间交换报文的格式和方式,默认端口是80。使用TCP作为传输层协议,保证了数据传输的可靠性。

  • 优点:
    • 支持客户端/服务器模式
    • 简单快速:协议简单,通信速度快
    • 无连接:限制每次连接只处理一个请求
    • 无状态:状态指的是通信过程的上下文信息
    • 灵活:允许传输任意类型的数据对象。正在传输的类型由cintent-type加以标记
  • 缺点:
    • 无状态:HTTP服务区不会保存客户的任何信息
    • 明文传输:协议中的报文使用的是文本形式,这就直接暴露给外界
    • 不安全

HTTPS协议

超文本传输安全协议(Hypertext Transfer Protocol Secure,简称:HTTPS)是一种通过计算机网络进行安全通信的传输协议。HTTPS经由HTTP进行通信,利用SSL/TLS来加密数据包。HTTPS的主要目的是提供对网站服务器的身份认证,保护交换数据的隐私与完整性。

HTTPS的优点和缺点

优点:

  • 使用HTTPS协议可以认证用户和服务器,确保数据发送到正确的客户端和服务器;
  • 使用HTTPS协议可以进行加密传输、身份认证,通信更加安全,防止数据在传输过程中被窃取、修改,确保数据安全性;
  • HTTPS是现行架构下最安全的解决方案,虽然不是绝对的安全,但是大幅增加了中间人攻击的成本;

缺点:

  • HTTPS需要做服务器和客户端双方的加密个解密处理,耗费更多服务器资源,过程复杂;

  • HTTPS协议握手阶段比较费时,增加页面的加载时间;

  • SSL证书是收费的,功能越强大的证书费用越高;

  • HTTPS连接服务器端资源占用高很多,支持访客稍多的网站需要投入更大的成本;

  • SSL证书需要绑定IP,不能再同一个IP上绑定多个域名。

VUE的生命周期

beforCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值