浏览器相关-叫啊叫啊叫都叫啊离开家的个卡可发了就分开了

islandsaying
144 阅读4分钟
  1. 浏览器安全
    1. xss攻击
      • 概念：跨站脚本攻击，上一种代码注入攻击，攻击者通过向网站注入恶意脚本，使之在用户的浏览器上运行，从而盗取用户的信息如cookie
      • 形成原因：网站没有对恶意代码进行过滤
      • 作用：获取页面数据如cookie，localstorage/dos攻击，发送攻击，占用服务器资源/流量劫持（将链接指向某网站）
    2. CSRF
      • 概念：跨站请求伪造攻击
  2. 浏览器缓存（见HTTP）
  3. 浏览器内核
    • chrome：blink内核
    • safari： webkit内核
    • IE：Trident内核
  4. 浏览器储存-本地储存/cookie，sessionstorage，localstorage区别
    1. 几种存储方式的区别，数据生命周期/数据存储大小/与服务端通信
      • cookie： 一般由服务器生成，可以设置过期时间/4K/每次都会携带在header中，影响请求性能
      • localstorage：除非被清理，否则一直存在/5M/不参与
      • sessionstorage： 页面关闭就清理/5M/不参与
      • indexDB：除非被清理，否则一直存在/无限/不参与
      • 总结：
        1. cookie已经不建议用于存储，
        2. 如果没有大量数据存储需求的话，可以使用localstorage和sessionstorage，对于不怎么改变的数据尽量使用localstorage，否则可以使用sessionstorage，
        3. 另外对于cookie，我们还需要注意安全性
    2. cookie安全性相关
      • value：如果用于保存用户登录态， 应该将该值加密，不能使用明文的用户标识
      • http-only：不能通过JS访问cookie，减少xss攻击
      • secure：只能在协议为https的请求中携带
      • same-site：规定浏览器不能在跨域请求中携带cookie，减少CSRF攻击
  5. 同源/跨域
    1. 同源: 同源指的是协议,端口号,域名必须一致. 同源政策的目的主要是为了保证用户的信息安全,它只是对js脚本的一种限制, 并不是对浏览器的限制, 对于一般的img, 或者script脚本请求都不会有跨域的限制.
    2. 跨域: 跨域问题其实就是浏览器的同源策略造成的, 同源策略限制了从同一个源加载的文档或脚本如何与另一个源的资源进行交互. 这是浏览器的一个用于隔离潜在恶意文件的重要安全机制.
      • 当前域下的js脚本不能够访问其他域下的cookie,localstorage和indexDB
      • 当前域下的js脚本不能够操作访问其他域下的dom
      • 当前域下的ajax无法发送跨域请求
    3. 如何解决跨域的问题
      • 跨域资源贡献(cors), 实现cors的关键是服务器, 只要服务器实现了cors请求, 就跨域通信了.
      • nginx代理跨域: 同源策略仅是针对浏览器的安全策略, 服务器端不会出现跨域问题. 实现思路: 通过nginx配置一个代理服务器，让浏览器去访问这个代理服务器，然后经由这个代理服务器访问真实链接得到的响应再返回给浏览器。
  6. 事件机制-事件委托，循环，宏任务/微任务
    1. 同步和异步
      • 同步：指当一个进程中执行某个请求时，如果这个请求需要等待一段时间才能返回，那么这个进程会一直等待下去，直到消息返回为止再继续向下执行。
      • 异步：指当一个进程中执行某个请求时，如果这个请求需要等待一段时间才能返回，这个时候进程会继续往下执行，不会阻塞等待消息的返回，当消息返回时系统再通知进程进行
    2. Event Loop
      • 在js的运行机制中， 主要把任务分为同步任务和异步任务
      • js运行时分为主线程和调用栈（执行栈），所有的同步任务都会放到调用栈中按照顺序等待主线程依次执行。而异步任务会在其得到结果后，将注册的回调函数放到异步任务队列中等待执行。
      • 异步任务队列可以分为宏任务和微任务队列，当前执行栈中的事件执行完毕后，js引擎首先会判断微任务队列中是否有任务可执行，当微任务队列中的任务都执行完毕后再去执行宏任务队列中的任务。再进行下一次循环。
      • 注：执行栈/任务队列
        • 执行栈：先进后出
        • 任务队列：先进先出
    3. 宏任务和微任务分别有哪些？
      • 宏任务：setTimeout，setInterval等定时事件，script脚本执行，I/O操作，UI渲染等
      • 微任务：promise，node中的process.nextTick,监听dom变化的MutationObserver
    4. 异步的一些 API，比如 setTimeout，setInterval，requestIdleCallback 和 requestAnimationFrame 还有 Promise，这几个有什么区别？
  7. 垃圾回收
  8. 浏览器渲染（html到页面展示的整个过程？）

    • 见http

avatar
文章
阅读
粉丝