DAY23刷面试题

最新推荐文章于 2024-07-27 22:26:21 发布
最新推荐文章于 2024-07-27 22:26:21 发布
阅读量1.7k 收藏
点赞数
分类专栏： 刷面试题 文章标签： 面试 html http
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luvzen0127/article/details/120692996
版权

昨天两场面试加笔试给孩子整懵了，有个面试问道了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
    评论
专栏目录
Vue进阶（三十三）Content-Security-Policy（CSP）详解
IT全栈 华强工作室
09-05 6532
跨域脚本攻击（XSS）是最常见、危害最大的网页安全漏洞。XSS 攻击利用了浏览器对于从服务器所获取的内容的信任。恶意脚本在受害者的浏览器中得以运行，因为浏览器信任其内容来源，即使有的时候这些脚本并非来自于它本该来的地方。为了防止它，要采取很多编程措施（比如大多数人都知道的转义、过滤HTML）。很多人提出，能不能根本上解决问题，即浏览器自动禁止外部注入恶意脚本？这就是"内容安全策略"（，缩写CSP）的由来。CSP。
内容安全策略（content-security-policy）
热门推荐
我的LOG
12-31 3万+
iframe 在使用iframe 的时候 <iframe style="border:0;width:100%;height:100%" src="https://github.com/join"/> 经查 报的是 Refused to frame ‘https://github.com/’ because an ancestor violates the following Content Security Policy directive: “frame-ancestors ‘non
http内容安全策略Content Security Policy(CSP)
focus on security
08-24 5708
内容安全策略CSP是安全性的附加层，有助于检测和缓解某些类型的攻击，包括跨站点脚本(https://owasp.org/www-community/attacks/xss/)和数据注入攻击。这些攻击可用于从数据盗窃，站点损坏到恶意软件分发的所有方面。 CSP被设计为完全向后兼容（除CSP版本2，其中有在向后兼容性一些明确提到的不一致性）。不支持它的浏览器仍然可以与实现它的服务器一起使用，反之亦然：不支持CSP的浏览器只是忽略它，照常运行，默认为Web内容的标准同源策略。如果站点不提供CSP标头，则浏览器同
前端设置Content-Security-Policy
petterDong的博客
06-05 2万+
Content-Security-Policy 1.什么是 Content-Security-Policy? 首先W3C的官方解释链接 Content-Security-Policy MDN的链接配置 Content-Security-Policy 简单来说: 跨域脚本攻击 XSS 是最常见、危害最大的网页安全漏洞。为了防止它们，浏览器自动禁止外部注入恶意脚本. CSP 的实质就是白名单制度，开发者明确告诉客户端，**哪些外部资源可以加载和执行，**等同于提供白名单。它的实现和执行全部由浏览器完成，开发者只
前端面试笔记11：前端安全之 CSP
qq_52287721的博客
01-02 3037
前端安全 CSP 文章目录前端安全 CSP什么是 CSP？如何开启 CSP?CSP 的用途 什么是 CSP？ CSP 指的是内容安全策略，它的本质是建立一个白名单，告诉浏览器哪些外部资源可以加载和执行。我们只需要配置规则，如何拦截由浏览器自己来实现。 如何开启 CSP? 通常有两种方式来开启 CSP，一种是设置 HTTP 首部中的 Content-Security-Policy，一种是设置 meta 标签的方式：<meta http-equiv="Content-Security-Policy"&gt
DAY12刷面试题
luvzen0127的博客
09-23 91
v-for与v-if优先级 v-for 比 v-if 具有更高的优先级 正常使用来说 v-if v-for computed和methods的区别 computed是基于缓存的(如果计算的属性没有变化是不会重新计算的，则执行缓存数据) methods是没有缓存的(也就是template只要render了[或者重复render]就会执行methods内所有的方法) ...
DAY13刷面试题
luvzen0127的博客
09-24 92
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊今天也是fw的一天，哭了，西湖的水我的泪QAQ 上午听了宣讲然后笔试，又是JAVA（感觉自己要去重学JAVA了，不然我笔试这辈子别想过）下午电话面试，就很窒息，单方面的我。对面说是了解基本情况，问的都是CSS\HTML基础的东西这样，虽然我有的答上来了，但是很深入的原理我就不知道了，有些东西我都没怎么用过，我就只能说我用过的一些，自我介绍也是要我随意一点不说项目，那我的自我介绍就剩下了…基本信息x.x 救命，说的东西就是降降降降降降维打击。最后说可能有复试也可能没有，要我等
怒刷面试题（前端）
weixin_50077305的博客
06-15 117
怒刷面试题（前端） ·基础 h5的新特性 data-v-03da18b4 http申请 网页有哪些部分 服务器渲染 跨域 栅格式布局 阻止冒泡的方法 css3和html5的认知 jq的认知 移动端的适配 适配不同浏览器 设计稿 数组重复去重 模块化、组件化 dom的事件流 网页卡顿 懒加载 出现卡顿怎么排查 pormise 前端性能优化 life 移动端兼容 异步 ·JS arrayObject.join(分隔符) 将数组以分隔符成字符串 var arr = str.split(’,’); 将字符串以分隔
day66-mybatis面试题
06-21
传智播客2015年JavaEE第33期笔记，mybatis面试题，JVM的内存结构（必问）?
python面试题234题
07-02
Python 编程面试题精华 本资源摘要信息涵盖了 Python 编程语言的多个方面，包括文件操作、内存管理、函数编程、数据结构、日期时间处理、字符串处理等。这其中包括了 8 个问题，每个问题都详细解释了相关概念和解决...
csdn面试题模板写博客
01-08
### CSDN 面试题模板写博客 在技术社区如CSDN上撰写博客时，采用一定的模板可以帮助作者更好地组织内容，提高文章的质量和可读性。对于面试题来说，更需要一种结构化的呈现方式来确保覆盖所有必要的知识点。 #### ...
PHP经典面试题集锦
12-19
【PHP经典面试题集锦】 在PHP面试中，掌握这些经典题目可以帮助你更好地理解语言核心概念和实际应用。以下是对一些关键知识点的详细解释： 1. **PHP获取前一天时间**： ```php $a = date("Y-m-d H:i:s", ...
2022年PHP新手面试题.doc
11-11
【PHP新手面试题详解】 1、用 PHP 打印出前一天的时间格式是-5-10 22:21:21。可以使用 `date()` 函数配合 `strtotime()` 函数来完成，如 `echo date('Y-m-d H:i:s', strtotime('-1 day'));`。 2、`echo()`, `print...
2024年C++面试题汇总及答案解析
soaring_casia的专栏
07-25 496
唯一的指针，不允许其他指针与他共享指向的对象。比如指针指向的内存被释放了，但是指针没有置nullptr. 多个指针指向同一个内存，当free掉一个指针之后，其他指针就变成了野指针。C++这些年虽然难度大，但是热度仍然不减，在编程排行榜基本上都是前几位，得益于它良好的薪资待遇。SPI协议是一种采用主从模式的串行，全双工，同步通信总线，包括时钟，输入，输出，片选四个信号线，片选信号用于选择slave设备，输入输出的每个bit都需要和时钟沿同步。区别：指针指向一块儿内存，他的内容是所指内存的地址。
追问试面试系列：类加载
最新发布
田维常
07-27 34
");运行结果：错误: 在类 java.lang.String 中找不到 main 方法, 请将 main 方法定义为:否则 JavaFX 应用程序类必须扩展javafx.application.Application面试回答：可以定义，但是当我们定义一个java.lang.String类和rt.jar包中的String一模一样时，是不能运行的。因为JVM在类加载过程中，会先去加载rt.jar包中的String类，而不会加载我们自定义的String类。
面试常考Linux指令
m0_51663233的博客
07-25 866
操作系统中每个文件都拥有特定的权限、所属用户和所属组。权限是操作系统用来限制资源访问的机制，在 Linux 中权限一般分为读(readable)、写(writable)和执行(executable)，分为三组。分别对应文件的属主(owner)，属组(group)和其他用户(other)，通过这样的机制来限制哪些用户、哪些组可以对特定的文件进行什么样的操作。通过ls -lt。
江苏科技大学24计算机考研数据速览，有专硕复试线大幅下降67分！
m0_72717598的博客
07-23 476
江苏科技大学（Jiangsu University of Science and Technology），坐落在江苏省镇江市，是江苏省重点建设高校，江苏省人民政府与中国船舶集团有限公司共建高校，国家国防科技工业局与江苏省人民政府共建高校 ，教育部卓越工程师教育培养计划高校，教育部本科教学工作水平评估优秀学校，江苏省高水平大学建设高峰计划B类建设高校，中国船舶与海洋工程产业知识产权联盟、江苏船舶与海洋类高校协同发展联盟牵头单位。其中，研究生新生学业奖学金特等奖3万，一等奖1.2万，二等奖0.8万；
消息队列的面试题
m0_67187271的博客
07-23 648
平台可以实时监测网络负载，根据当前网络状况动态调整直播流的编码质量，例如，在网络负载较低时，提供高清直播流（如1080p），而在网络负载较高时，自动降低编码质量（如720p或更低），以减少数据传输量。流量控制策略，视频平台能够有效管理网络资源，确保在高用户量和高数据传输速率的情况下，提供稳定、高质量的直播服务，同时避免网络拥塞，提高用户体验。：对于直播流，平台可以使用缓存和预加载技术，提前下载部分直播内容到用户的设备上，减少直播开始时的网络负载，同时提供更流畅的观看体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值