1.前端安全问题

1.Xss
跨站脚本攻击是代码注入的一种。它允许恶意使用者将程式码注入到网页上，其他使用者在观看网页时就会受到影响,XSS 通过修改 HTML 节点或者执行 JS 代码来攻击网站
防御：采用csp内容安全策略，本质上也是建立白名单，规定了浏览器只能够执行特定来源的代码，通常可以通过 HTTP Header 中的 Content-Security-Policy 来开启 CSP。如需配置csp，可在nginx中配置，修改 nginx 网站配置文件：在需要配置内容安全策略的站点 conf 文件下增加以下类似代码，前面是 add_header Content-Security-Policy 后面就可以定义你自己的规则

add_header Content-Security-Policy 
"default-src 'self' wangshuashua.com; 
script-src 'self' hm.baidu.com www.googletagmanager.com; 
img-src 'self' https://cdn.wangshuashua.com https ://img.ikewen.com data：https://cravatar.cn; 
style-src 'self' 'unsafe-inline' fonts.googleapis.com; 
font-src 'self' fonts.gstatic.com; 'unsafe-inline''unsafe-eval' blob：date：;";

2.CSRF****跨站请求伪造，CSRF 就是利用用户的登录态发起恶意请求，案例，通过放置图片，用户点击就会拿到登录信息防御

Get 请求不对数据进行修改
不让第三方网站访问到用户 Cookie（Cookie设置sameSite）
阻止第三方网站请求接口（验证 Referer，一般后台处理）
请求时附带验证信息，比如验证码或者 token（常用）

2.TCP连接过程

客户端和服务端有各自的IP地址，但是都有各自的进程链接，通过Ip和端口进行精准识别（套接字socket，也是握手的先决条件）。三次握手（SYN ACK ），首先客户端发送自己的Tcp报文，开启SYN（同步，想和服务端进行通信同步）和sequence序号（随机生成，保证通道的唯一性），服务端接受SYN同时发出ACK（确认），发送自己的序号和确认号（客户端序号+1），第三次客户端的序号就是服务端的确认号+1，黑客不断发请求不进行下一步操作使得服务器挂载很多资源去计算序号，这就是DDoS攻击，客户端ACK。
四次挥手，客户端服务端都可以主动断开TCP连接，客户端开启FIN和ACK报文（结束确认），发出HTTP请求时序号不断递增，FIN+ACK -> ACK -> FIN+ACK -> ACK 服务端先确认要关闭，再发结束确认报文最后客户端确认，则关闭连接。可能还存在未发送完成的数据，所以要四次挥手
HTTP是什么
Http其实就是protocol协议。涉及客户端服务端两个对象。包含请求报文和相应报文

3.Vue3 升级了哪些功能

1.增加emits属性

emits可以定义属性或者对象，类似props。显示声明父组件的自定义事件。

export default {
  emits: {
    // 没有验证函数
    click: null,
    // 具有验证函数
    submit: (payload) => {
      if (payload.email && payload.password) {
        return true
      } else {
        console.warn(`Invalid submit event payload!`)
        return false
      }
    }
  }
}

vue3移除了.native属性是因为如果不通过emits显示声明，事件会自动绑定到子组件的根节点。也就造成了如果事件名称是click的情况子组件emit('click',123)会触发两次（组件内部一次，根节点一次），所以通过emits声明事件很有必要

2.Fragmment

vue3中会自动给temlate中的标签加上幽冥节点，所以不需要再写一个根节点。可以同时出现多个根节点

3.移除.sync

vue3中移除了vue2中sync的双向绑定，而改为v-model的参数。与vue2中.sync触发方式基本一致

<my-input v-model:title='title'></my-input>
//子组件
defineProps:['title'], 
const emit = defineEmits(['update:title'])
emit('update:title',123)

4.异步组件

// vue2中
components:{
  son:()=>import('./son.vue')
}
// vue3中
import {defineAsyncComponent} from 'vue'
components:{
  son:defineAsyncComponent ( ()=>import('./son.vue') )
}

5.移除filter

由于vue2中filter和method功能类似，vue3中进行了移除

6.增加了Telepot 内置组件，将组件发送到固定dom（比如body）

// to的参数可以是选择器 也可以是实际的dom节点
<telepot to='body'></telepot>

7.Composition API实现逻辑复用

抽离逻辑代码到一个函数中，并用useXxx格式命名。此函数类似vue2的mixin，不同的是 mixin是一个配置化对象，hooks是一个函数。可以更好的禁行逻辑复用

<template>
  <p>mouse position {{ x }} {{ y }}</p>
</template>

<script>
import useMousePosition from './useMousePosition'

export default {
  name: 'MousePosition',
  setup() {
    const { x, y } = useMousePosition()
    return {
      x,
      y,
    }
  },
}
</script>

useMousePosition.js

import { ref, onMounted, onUnmounted } from 'vue'

function useMousePosition() {
  const x = ref(0)
  const y = ref(0)
  function update(e) {
    x.value = e.pageX
    y.value = e.pageY
  }
  onMounted(() => {
    window.addEventListener('mousemove', update)
  })
  onUnmounted(() => {
    window.removeEventListener('mousemove', update)
  })
  return { x, y }
}

export default useMousePosition

【前端面试】-面试题