【前端面试题库】待分类题库(一)

326 阅读9分钟

目录

  1. 理解xss,csrf,ddos攻击原理以及避免方式
  2. http状态码
  3. TCP 三次握手 与 四次挥手
  4. 跨域通信的几种方式
  5. 浏览器的本地存储?各自优劣如何?
  6. 常见的Webpack Loader
  7. 常见的Webpack Plugin
  8. 防抖与节流
  9. 对象深浅拷贝
  10. 数组扁平化
  11. ES6里的set和map
  12. osi7层模型,tcp5层模型

一、 理解xss,csrf,ddos攻击原理以及避免方式

1)XSS(Cross-Site Scripting跨站脚本攻击)

是一种代码注入攻击。攻击者在目标网站上注入恶意代码,当被攻击者登陆网站时就会执行这些恶意代码,这些脚本可以读取 cookie,session tokens,或者其它敏感的网站信息,对用户进行钓鱼欺诈,甚至发起蠕虫攻击等。

2)CSRFCross-site request forgery跨站请求伪造

攻击者诱导受害者进入第三方网站,在第三方网站中,向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证,绕过后台的用户验证,达到冒充用户对被攻击的网站执行某项操作的目的。

XSS避免方式:

  1. url参数使用encodeURIComponent方法转义
  2. 尽量不是有InnerHtml插入HTML内容
  3. 使用特殊符号、标签转义符。

CSRF避免方式:

  1. 添加验证码

  2. 使用token

    • 服务端给用户生成一个token,加密后传递给用户
    • 用户在提交请求时,需要携带这个token
    • 服务端验证token是否正确

3)DDoS又叫分布式拒绝服务

全称 Distributed Denial of Service,其原理就是利用大量的请求造成资源过载,导致服务不可用。

DDos避免方式:

  1. 限制单IP请求频率。
  2. 防火墙等防护设置禁止ICMP包等
  3. 检查特权端口的开放

二、 http状态码

    200响应成功
    301永久重定向
    302临时重定向
    304资源缓存
    403服务器禁止访问
    404服务器资源未找到
    500 502服务器内部错误
    504 服务器繁忙
    1xx	Informational(信息状态码)	  接受请求正在处理
    2xx	Success(成功状态码)            请求正常处理完毕
    3xx	Redirection(重定向状态码)	 需要附加操作已完成请求
    4xx	Client Error(客户端错误状态码)	服务器无法处理请求
    5xx	Server Error(服务器错误状态码)	服务器处理请求出错

三、TCP 三次握手 与 四次挥手

1) 三次握手

  • 第一步:客户端发送SYN报文到服务端发起握手,发送完之后客户端处于SYN_Send状态
  • 第二步:服务端收到SYN报文之后回复SYN和ACK报文给客户端
  • 第三步:客户端收到SYN和ACK,向服务端发送一个ACK报文,客户端转为established状态,此时服务端收到ACK报文后也处于established状态,此时双方已建立了连接

image.png

2) 四次挥手

刚开始双方都处于 establised 状态,假如是客户端先发起关闭请求,则:

  1. 第一次挥手:客户端发送一个 FIN 报文,报文中会指定一个序列号。此时客户端处于FIN_WAIT1状态。
  2. 第二次挥手:服务端收到 FIN 之后,会发送 ACK 报文,且把客户端的序列号值 + 1 作为 ACK 报文的序列号值,表明已经收到客户端的报文了,此时服务端处于 CLOSE_WAIT状态。
  3. 第三次挥手:如果服务端也想断开连接了,和客户端的第一次挥手一样,发给 FIN 报文,且指定一个序列号。此时服务端处于 LAST_ACK 的状态。
  4. 第四次挥手:客户端收到 FIN 之后,一样发送一个 ACK 报文作为应答,且把服务端的序列号值 + 1 作为自己 ACK 报文的序列号值,此时客户端处于 TIME_WAIT 状态。需要过一阵子以确保服务端收到自己的 ACK 报文之后才会进入 CLOSED 状态
  5. 服务端收到 ACK 报文之后,就处于关闭连接了,处于 CLOSED 状态。

四、 跨域通信的几种方式

解决方案:

  1. jsonp(利用script标签没有跨域限制的漏洞实现。缺点:只支持GET请求)
  2. CORS(设置Access-Control-Allow-Origin:指定可访问资源的域名)
  3. postMessage(message, targetOrigin, [transfer])(HTML5新增API 用于多窗口消息、页面内嵌iframe消息传递),通过onmessage监听 传递过来的数据
  4. Websocket是HTML5的一个持久化的协议,它实现了浏览器与服务器的全双工通信,同时也是跨域的一种解决方案。
  5. Node中间件代理
  6. Nginx反向代理
  7. 各种嵌套iframe的方式,不常用。
  8. 日常工作中用的最对的跨域方案是CORS和Nginx反向代理

五、 浏览器的本地存储?各自优劣如何?

浏览器的本地存储主要分为Cookie、WebStorage和IndexDB, 其中WebStorage又可以分为localStorage和sessionStorage

共同点: 都是保存在浏览器端、且同源的

不同点:

  1. cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下sessionStoragelocalStorage不会自动把数据发送给服务器,仅在本地保存。

  2. 存储大小限制也不同,

  • cookie数据不能超过4K,sessionStorage和localStorage可以达到5M
  • sessionStorage:仅在当前浏览器窗口关闭之前有效;
  • localStorage:始终有效,窗口或浏览器关闭也一直保存,本地存储,因此用作持久数据;
  • cookie:只在设置的cookie过期时间之前有效,即使窗口关闭或浏览器关闭
  1. 作用域不同
  • sessionStorage:不在不同的浏览器窗口中共享,即使是同一个页面;
  • localstorage:在所有同源窗口中都是共享的;也就是说只要浏览器不关闭,数据仍然存在
  • cookie: 也是在所有同源窗口中都是共享的.也就是说只要浏览器不关闭,数据仍然存在

六、 常见的Webpack Loader

loader: 是一个导出为函数的javascript模块,根据rule匹配文件扩展名,处理文件的转换器。

  • file-loader: 加载文件资源,如 字体 / 图片 等,具有移动/复制/命名等功能;

  • url-loader: 通常用于加载图片,可以将小图片直接转换为 Date Url,减少请求;

  • babel-loader: 加载 js / jsx 文件, 将 ES6 / ES7 代码转换成 ES5,抹平兼容性问题;

  • ts-loader: 加载 ts / tsx 文件,编译 TypeScript;

  • style-loader: 将 css 代码以<style>标签的形式插入到 html 中;

  • css-loader: 分析@importurl(),引用 css 文件与对应的资源;

  • postcss-loader: 用于 css 的兼容性处理,具有众多功能,例如 添加前缀,单位转换 等;

  • less-loader / sass-loader: css预处理器,在 css 中新增了许多语法,提高了开发效率;

  • eslint-loader:通过 ESLint 检查 JavaScript 代码

七、常见的Webpack Plugin

plugin:本质是插件,基于事件流框架 Tapable,插件可以扩展 Webpack 的功能,在 Webpack 运行的生命周期中会广播出许多事件,Plugin 可以监听这些事件,在合适的时机通过 Webpack 提供的 API 改变输出结果。

  • UglifyJsPlugin: 压缩、混淆代码;

  • CommonsChunkPlugin: 代码分割;

  • ProvidePlugin: 自动加载模块;

  • html-webpack-plugin: 加载 html 文件,并引入 css / js 文件;

  • extract-text-webpack-plugin / mini-css-extract-plugin: 抽离样式,生成 css 文件;

  • DefinePlugin: 定义全局变量;

  • optimize-css-assets-webpack-plugin: CSS 代码去重;

  • webpack-bundle-analyzer: 代码分析;

  • compression-webpack-plugin: 使用 gzip 压缩 js 和 css;

  • happypack: 使用多进程,加速代码构建;

  • EnvironmentPlugin: 定义环境变量;

八、防抖与节流

函数防抖关注一定时间连续触发,只在最后执行一次,而函数节流侧重于一段时间内只执行一次。

1) 防抖

//定义:触发事件后在n秒内函数只能执行一次,如果在n秒内又触发了事件,则会重新计算函数执行时间。
//搜索框搜索输入。只需用户最后一次输入完,再发送请求
//手机号、邮箱验证输入检测 onchange oninput事件
//窗口大小Resize。只需窗口调整完成后,计算窗口大小。防止重复渲染。
const debounce = (fn, wait, immediate) => {
      let timer = null;
      return function (...args) {
        if (timer) clearTimeout(timer);
        if (immediate && !timer) {
          fn.call(this, args);
        }
        timer = setTimeout(() => {
          fn.call(this, args);
        }, wait);
      };
    };
const betterFn = debounce(() => console.log("fn 防抖执行了"), 1000, true);
document.addEventListener("scroll", betterFn);

2) 节流

//定义:当持续触发事件时,保证隔间时间触发一次事件。
//1. 懒加载、滚动加载、加载更多或监听滚动条位置;
//2. 百度搜索框,搜索联想功能;
//3. 防止高频点击提交,防止表单重复提交;
function throttle(fn,wait){
    let pre = 0;
    return function(...args){
        let now = Date.now();
        if( now - pre >= wait){
            fn.apply(this,args);
            pre = now;
        }
    }
}
function handle(){
    console.log(Math.random());
}
window.addEventListener("mousemove",throttle(handle,1000));

九 、 对象深浅拷贝

//浅拷贝 
1. Object.assign(target,source)
2. es6对象扩展运算符。


//深拷贝    
function deepClone(obj) {
      if (!obj || typeof obj !== "object") return;
      let res = Array.isArray(obj) ? [] : {};
      for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
          res[key] = typeof obj[key] === "object" ? deepClone(obj[key]) : obj[key];
        }
      }
      return res;
}

十、 数组扁平化

function flatten(arr) {
      return arr.reduce((result, item) => {
        return result.concat(Array.isArray(item) ? flatten(item) : item);
      }, []);
}

十一、 ES6里的set和map

  • Map对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。构造函数Map可以接受一个数组作为参数。
  • Set对象允许你存储任何类型的值,无论是原始值或者是对象引用。它类似于数组,但是成员的值都是唯一的,没有重复的值。

十二、 osi7层模型,tcp5层模型

osi7层模型:物理层-数据链路层-传输层-网络层-应用层-会话层-表示层

tcp5层模型:物理层-数据链路层-传输层-网络层-应用层

参考

总结

待补充

  • 实现一个Webpack Loader 和 插件
  • 实现babel插件