鱼与前端🐟

前言Web安全一直是老生常谈的一个问题，下面就讲解关于CSRF的内容关键词：CSRF的由来、CSRF攻击流程、CSRF类型、CSRF特点、CSRF和XSS的区别、CSRF防御手段。 CSRF是什么？跨站请求伪造（Cross-site request forgery），也被称为 one-click attack 或者 session riding，通常缩写为 CSRF 或者 XSRF， 是一种挟制用户在当前已登录的 Web 应用程序上执行非本意的操作的攻击方法。如:攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。 CSRF攻击流程 综上所述，要想完成一次CSRF攻击，就要进行以下两个步骤： 登陆受信任的网站A并在本地生成cookie 在没有登出a的情况下访问了b网站 看到这里，你也许会说：“如果我不满足以上两个条件中的一个，我就不会受到CSRF的攻击”。是的，确实如此，但你不能保证以下情况不会发生： 你不能保证你登录了一个网站后，不再打开一个ta ...

前言Web安全一直是老生常谈的一个问题，下面就讲解关于XSS的内容关键词：XSS的由来、XSS类型、XSS预防手段、XSS检测。 XSS是什么？Cross-Site Scripting（跨站脚本攻击）简称 XSS，是一种代码注入攻击，攻击者通过在目标网站上面注入恶意的脚本，让其在用户的浏览器上面运行。利用这些脚本就能轻易获取到用户的cookie，sessionID等，产生进一步安全威胁。 在命名上为了和css区分，改为了xss 在处理输入的时候，以下内容不可信： 来自用户的 UGC 信息 来自第三方的链接 URL 参数 POST 参数 Referer （可能来自不可信的来源） Cookie （可能来自其他子域注入） XSS分类根据攻击来源，可以分为存储型，反射型和DOM型 存储型攻击流程： 攻击者将恶意代码提交到网站的数据库中 用户响应服务端的恶意代码 恶意代码窃取用户敏感信息发送到攻击者网站，或冒充用户行为执行操作。 常见场景：论坛发帖，商品评论，用户私信 反射型攻击流程： 攻击者构造出特殊的URL里面包含恶意代码 用户被诱导点击特殊URL，执行恶意操作。 反射型和存 ...

前言emm,最近都在忙活八股算法,没什么时间去梳理一下最近发生的事情,以此来做个记录吧. 正文时至四月,春招可以说是完完全全的走掉了,这个春招里我就拿到过一个小厂的offer,由于自己自信后面能够拿到更好的就拒掉了(事实证明并没有),所以这段时间是没有好好把握住的,有点可惜.不过实际上八股文加算法总共的学习时间也就从3月份开始的一个半月,这一个半月的知识浓度比之前大特别多.每天都在消化吸收,挑战自己不熟练的,没有见过的一些新事物,比如算法,比如计网.这两个东西应该是很多人不想面对的吧.好在我坚持了下来,这段时间陆陆续续的刷了一百多道中等加简单难度的leetcode,感悟非常的深,其实部分算法题也不见得特别困难,可能是我做的难度原因.甚至有些题目能让我回想起以前OJ刷题时候的记忆,除开比较用智商的题目,大多数的题都有专门的方法去解决,也算是比较套路化.截到目前为止,我能罗列出来的算法有滑动窗口,动态规划,dfs,bfs,贪心,回溯以及部分排序,虽然不能说完全熟悉他的做题方法,但是碰到类似的题目也知道该用什么方法去解决了.算是这段时间的一点小进步.数据结构方面大概就是一些简单题显露出来的 ...

前言本篇关于尽可能手撕一切可以实现的代码，先从js开始下手 防抖code123456789101112function debounce(fn,timer){ var t = null; return function(){ let firstClick = !t; if(firstClick){ fn.apply(this,arguments); } t = setTimeout(() => { t = null; }, timer); }} 节流code12345678910function throttle(fn,delay){ var begin = 0; return function(){ var cur = +new Date(); if(cur-begin>=delay){ fn.apply(this,arguments); begin = cur; ...

前言本文整理了高频vue面试考点，并将难度分为简单中等困难三个难度。 简单MVC和MVVM的区别MVCMVC的全称是 Model View Controller 是模型，视图，控制器的缩写，是一种软件设计规范。 Model模型:是应用程序中用于处理程序数据逻辑的部分。通常模型对象负责从数据库里面存取数据 View视图:是应用程序中处理数据显示的部分。通常视图是依据模型数据渲染的。 Controller:是应用程序中处理用户交互的部分。通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。 MVC的思想:一句话就是Controller负责将Model的数据取出来用View显示出来，换句话说就是在Controller里面把Model的值赋给View MVVMMVVM新增了VM类ViewModel层:做了两件事情完成了双向绑定。 将Model模型转化为了View视图。即将后端的数据转化为所看到的页面。使用的方式是数据绑定。 将View视图转化为了Model模型。即将页面转化为了后端的数据。使用的方式是DOM事件监听。 MVVM和MVC最大的区别就是:他实现了View和M ...

前言本文通过OSI七层模型阐述前端常考的计网知识点 应用层HTTP参见HTTP灵魂之问 DNSDNS的作用就是通过域名查询到IP 因为IP存在数字和英文的组合IPv6，很不利于人类记忆，所以出现了域名。你可以把域名看成某个IP的别名，DNS就是去查询这个别名真正的名称是什么 在TCP握手之前就已经进行了DNS查询，这个查询是操作系统自己完成的，当在浏览器中想访问www.google.com会进行以下操作。 本地客户端向服务器发起请求查询 IP 地址 查看浏览器有没有该域名的 IP 缓存 查看操作系统有没有该域名的 IP 缓存 查看 Host 文件有没有该域名的解析配置 如果这时候还没得话，会通过直接去 DNS 根服务器查询，这一步查询会找出负责 com 这个一级域名的服务器 然后去该服务器查询 google.com 这个二级域名 接下来查询 www.google.com 这个三级域名的地址 返回给 DNS 客户端并缓存起来 以上介绍的是DNS迭代查询，还有一种是递归查询，区别是前者是由客户端去请求，后者是由系统配置的DNS去请求，得到结果之后将数据返回给客户端。 DN ...

前言记录HTTP前端常考考点，关联计算机网络。 1.0 1.x 2.0HTTP 1.0任何格式的内容都可以发送，这使得互联网不仅可以传输文字，还能传输图像、视频、二进制等文件。 除了GET命令，还引入了POST命令和HEAD命令。 http请求和回应的格式改变，除了数据部分，每次通信都必须包括头信息（HTTP header），用来描述一些元数据。 只使用 header 中的 If-Modified-Since 和 Expires 作为缓存失效的标准。 不支持断点续传，也就是说，每次都会传送全部的页面和数据。 通常每台计算机只能绑定一个 IP，所以请求消息中的 URL 并没有传递主机名（hostname） HTTP 1.1http1.1是目前最为主流的http协议版本，从1999年发布至今，仍是主流的http协议版本。 引入了持久连接（ persistent connection），即TCP连接默认不关闭，可以被多个请求复用，不用声明Connection: keep-alive。长连接的连接时长可以通过请求头中的 keep-alive 来设置 引入了管道机制（ pipelining） ...

前言老项目新谈，用vue3重构ing 主题演示待填充… 构建工具+技术栈编译软件：vscode开发框架: vue3打包工具：viteUI：element-plusicon：阿里巴巴其他：pinia， vue-router，git插件：pubsub，nanoid，less-loader后端： nodejs，mysql part0 路由&pinia定义路由，以及重定向。当时在router里面把路径写错了导致页面跳转问题出现。！！！vue3的路由写法123456789101112import { createRouter, createWebHashHistory} from "vue-router"const routes = [{ xxxx}]const router = createRouter({ history: createWebHashHistory(), routes,});export default routerpinia写法 part1 mainFrame这 ...

前言咱们常见的打包工具比如vite，vuecli底层都是通过webpack实现的，下面就来对webpack进行一个学习并且实战运用 为什么需要webpack这就要回顾一下没出现打包工具之前的弊端了。在以前，我们的js都是引入之后写在页面上的，有很多第三方的js比如jquery，lodash等，以及自己编写的js，此时需要注意引入的顺序，否则就会报错。可能会想到将它们合并到一个文件里面就不会报错，但是这样一来冗长的代码导致可读性差，可维护性弱的问题。此外还有作用域和文件太大的问题。 作用域问题我们知道，像jq这种库，全局声明是$符号，这个符号是绑定在window对象上面的，而lodash是绑定的下划线，我们自己的业务文件可能也绑定了类似于user这样的变量到window上面。这样一来我们的window对象就会被污染了，使得它变得非常臃肿。这就是作用域问题。 文件太大如果不合并，那么有多少个js，就加载多少个js，页面可能就会出现一边加载一边渲染的问题。如果将文件合并，这个巨大的js就会带来网络瓶颈，比如首页白屏问题 before webpack在webpack之前，我们使用的是grun ...

关键词类型、栈和堆、检测方式、数据类型转换 类型首先js的类型有基本数据类型和引用类型前者有七种 后者是一种根据以前的USONB理论 大致是Undefined,String,Symbol,Object,Null,Number,BigInt,Boolean 基本数据类型的作用？基础类型存储在栈内存，被引用或拷贝时，会创建一个完全相等的变量；占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储。 object为什么是引用类型？而引用类型 在创建对象的时候会在堆内存中开辟一个空间 用来存放对象的属性 在为对象添加属性的时候，是将属性放在堆内存中开辟的空间里。在栈内存中保存显示 对象名+一个地址 类似于指针 执行堆内存中对象开辟的空间引用类型存储在堆内存，存储的是地址，多个引用指向同一个地址，这里会涉及一个“共享”的概念；占据空间大、大小不固定。引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。引申出栈和堆的概念！ BigIntjs的精度只有2的53次方，所以当数据大于这个数的时候会出现解析不准确(最 ...