前端面试题---框架篇_前段架构师面试题

Vue面试题

面试题：Vue2.x 生命周期有哪些？

Vue生命周期总共可以分为8个阶段：创建前后, 载入前后,更新前后,销毁前销毁后，以及一些特殊场景的生命周期:

面试题：第一次进入组件或者页面，会执行哪些生命周期？

beforeCreate

created

beforeMount

mounted

面试题：谈谈你对keep-alive的了解

在做电商有关的项目中，当我们第一次进入列表页需要请求一下数据，当我从列表页进入详情页，详情页不缓存也需要请求下数据，然后返回列表页，这时候我们使用keep-alive来缓存组件，防止二次渲染，这样会大大的节省性能。

keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，避免重新渲染，其有以下特性：

一般结合路由和动态组件一起使用，用于缓存组件；

提供include和exclude属性，两者都支持字符串或正则表达式，include表示只有名称匹配的组件会被缓存，exclude表示任何名称匹配的组件都不会被缓存，其中exclude的优先级比include高；

对应的两个钩子函数activated和deactivated，当组件被激活时，触发钩子函数activated,当组件被移除时，触发钩子函数deactivated.

 面试题：v-if和v-show区别

相同点：v-if与v-show都可以动态控制dom元素显示隐藏

不同点：

v-if显示隐藏是将dom元素整个添加或删除:

1、v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内dom元素适当地被销毁和重建。
2、v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

而v-show隐藏则是为该元素添加css--display:none，dom元素还在。

1、v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

总结：

如果需要非常频繁地切换，则使用v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

面试题：v-if和v-for优先级

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染

v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组或者对象，而 item 则是被迭代的数组元素的别名。

在 v-for 的时候，建议设置key值，并且保证每个key值是独一无二的，这便于diff算法进行优化。

不管是在同一个标签还是在不同标签，v-for的优先级都比v-if高。

v-if和v-for并不建议一起使用，因为一起使用时v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中，这会大大浪费性能。

注：在 vue3 中，由于 v-if 优先级要高于 v-for

面试题：ref是什么？

首先ref的引用是相当于一个DOM节点（如果是子组件则指向的是其实例），而且是一个string类型的值。
通俗的将就类似于原生js用document.getElementById("#id")
但是只是类似，他们的不同点是Vue是操控虚拟DOM ，也就是说在渲染初期并没有这个ref的属性，这个属性是在创建Vue实例以后才被加到虚拟DOM中的。

作用：

• 使用ref获取页面DOM元素
• 使用 ref获取子组件对象

面试题：nextTick是什么？

官方：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

nextTick 是 Vue 提供的一个全局的API ，由于Vue的异步更新策略导致我们对数据的修改不
会立马体现，此时如果想要立即获取更新后的dom的状态，就需要使用这个方法。

Vue在更新dom时是异步执行的。只要监听到数据变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新。这种在缓存时去重对于避免不必要的计算和dom操作是非常重要的。nextTick方法会在队列中加入一个回调函数，确保该函数在前面的dom操作完成后才调用。

面试题：路由导航守卫有哪些？

一、全局路由守卫
所谓全局路由守卫，就是小区大门，整个小区就这一个大门，你想要进入其中任何一个房子，都需要经过这个大门的检查
全局路由守卫有个两个：一个是全局前置守卫，一个是全局后置守卫

//全局前置守卫：初始化时执行、每次路由切换前执行
router.beforeEach((to,from,next)=>{}
 
//全局后置守卫：初始化时执行、每次路由切换后执行
router.afterEach((to,from)=>{}

二、路由独享的守卫

路由独享守卫是在路由配置页面单独给路由配置的一个守卫

beforeEnter:(to,from,next)=>{}，用法与全局守卫一致。只是，将其写进其中一个路由对象中，只在这个路由下起作用。

三、组件路由守卫

组件路由守卫是写在每个单独的 vue 文件里面的路由守卫

//进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {
},
//离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {
}

面试题：Vue中如何做样式穿透

何为scoped？

在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped，相当于实现了样式的模块化。

为什么需要穿透scoped？

scoped看起来很美，但是，在很多项目中，会出现这么一种情况，即：引用了第三方组件，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。此时只能通过特殊的方式，穿透scoped。

<style scoped>
    外层 >>> 第三方组件 {
        样式
    }
</style>

通过 >>> 可以使得在使用scoped属性的情况下，穿透scoped，修改其他组件的值。

面试题：scoped原理

 当我们使用了scope的时候，会给元素节点新增自定义属性：data-xx，然后在css中通过属性选择器的方式给元素添加样式，这就是scope的原理。

面试题：Vuex是单向数据流还是双向数据流？

单向数据流

面试题：讲一下MVVM

MVVM是一种软件架构模式，是MVC的改进版。简单来说，MVVM是Model-View-ViewModel的简写。即是模型-视图-视图模型。

model模型

指的是后端传过来的数据。

view视图

指的是所有看到的页面，可以理解为将数据以某种方式呈现给用户。

ViewModel

指的是视图模型，他是连接view和model的桥梁。

有两个不同方向：

1.模型->视图

解析：将后端数据转换为前端的页面。实现的方式是数据绑定。

2.视图->模型

解析：将前端页面转换为后端数据的实现方式：叫做Dom数据监听。

存在两个方向都能实现的情况下，叫做数据的双向绑定。

MVC是什么？

MVC的全称是Model View Controller。MVC是Model-View-Controller的简写。MVC的目的是讲M和V的代码进行分离，且MVC是单向通信，即View和Model，必须是通过Controller来承上启下，Controller指的是页面的逻辑，他对用户的请求进行接收，并将Model返回给用户。

MVC和MVVM的区别并不是VM完全取代了C，ViewModel存在目的在于抽离Controller中展示的业务逻辑，而不是替代Controller，其它视图操作业务等还是应该放在Controller中实现。也就是说MVVM实现的是业务逻辑组件的重用。

为什么出现MVVM？

MVC的架构模式只能满足轻量级的应用开发，在过去可以满足开发者的开发需求。

浏览器的兼容问题已经不再是前端的阻碍了，随着HTML5的发展，HTML5开发应用由于越来越趋近于原生APP，这导致HTML5的应用越来越庞大和越来越复杂，这就使得MVC架构已经无法满足和解决开发需求，前端的项目越来越大，项目的可维护性和扩张性、安全性成了主要的问题。

当年为了解决浏览器兼容性问题，出现了很多类库，其中最典型的就是jquery。但是这类库没有实现对业务逻辑的分成，所以维护性和扩展性极差。

MVVM对MVC的完善

MVVM就是将其中的View的状态和行为抽象化，让我们的视图UI和业务逻辑进行分离。

在MVVM架构下，View和Model没有直接的联系，而是通过ViewModel进行数据交互，Model和ViewModel之间的交互是双向的，因此View数据的变化会同步到Model中，Model数据的变化也会立即反应到View上面。

ViewModel通过双向数据绑定把View和Model层连接起来，而View和Model之间的同步工作是完全自动的，不需要进行人为的干涉，因此开发者只需要关注业务逻辑，不需要手动操作Dom，不需要关注数据状态的同步问题，复杂的数据状态的维护完全由MVVM来进行管理。

总结

MVVM模型的好处是，可以实现模型和视图之间的分离，MVVM模型的功效是获得了一个无需查看即可轻松更改的一致模型。实施MVVM的重要关键的要素是可测试性，可维护性和可扩展性。MVVM的对于模型和视图的隔离，大大方便了开发者对于数据状态的维护与管理。

面试题：双向绑定原理

Vue数据双向绑定原理是通过数据劫持结合发布者-订阅者模式的方式来实现的。

1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。

2.实现一个订阅者Watcher，每一个Watcher都绑定一个更新函数，watcher可以收到属性的变化通知并执行相应的函数，从而更新视图。

3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令（v-model，v-on等指令），如果节点存在v-model，v-on等指令，则解析器Compile初始化这类节点的模板数据，使之可以显示在视图上，然后初始化相应的订阅者（Watcher）。

面试题：什么是虚拟DOM

实际上它只是一层对真实DOM的抽象，以JavaScript 对象 (VNode 节点) 作为基础的树，用对象的属性来描述节点，最终可以通过一系列操作使这棵树映射到真实环境上。

在Javascript对象中，虚拟DOM 表现为一个 Object对象。（虚拟dom就是一个普通的js对象）并且最少包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性，不同框架对这三个属性的名命可能会有差别。

1、我们都知道，传统dom数据发送变化的时候，我们都需要不断的去操作dom，才能更新dom的数据。
而虚拟dom可以很好的跟踪当前dom状态，因为他会根据当前数据生成一个描述当前dom结构的虚拟dom，然后数据发送变化时，又会生成一个新的虚拟dom，而这两个虚拟dom恰恰保存了变化前后的状态。然后通过diff算法，计算出两个前后两个虚拟dom之间的差异，得出一个更新的最优方法（哪些发生改变，就更新哪些）。可以很明显的提升渲染效率以及用户体验。

创建虚拟DOM就是为了更好将虚拟的节点渲染到页面视图中，所以虚拟DOM对象的节点与真实DOM的属性一一照应。

DOM是很慢的，其元素非常庞大，页面的性能问题，大部分都是由DOM操作引起的

真实的DOM节点，哪怕一个最简单的div也包含着很多属性，由此可见，操作DOM的代价仍旧是昂贵的，频繁操作还是会出现页面卡顿，影响用户的体验。

面试题：diff算法

diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。

换句话说：

diff的过程就是调用名为patch的函数，比较新旧节点，一边比较一边给真实的DOM打补丁。

diff 比较规则：

1、diff 比较两个虚拟dom只会在同层级之间进行比较，不会跨层级进行比较。而用来判断是否是同层级的标准就是

1. 是否在同一层
2. 是否有相同的父级

2、diff是采用先序深度优先遍历得方式进行节点比较的，即，当比较某个节点时，如果该节点存在子节点，那么会优先比较他的子节点，直到所有子节点全部比较完成，才会开始去比较改节点的下一个同层级节点。

参考资料：(26条消息) vue中的diff算法_star@星空的博客-CSDN博客_diff算法 vue

(26条消息) vue 虚拟dom和diff算法详解_ら陈佚晨的博客-CSDN博客_vue虚拟dom的diff算法

面试题：Vue组件传值

父组件向子组件传值

父组件用v-bind给子组件绑定数据，然后在子组件里面定义props来做接收，接受父组件传来的数据并指定类型，这是比较常见的情况

子组件向父组件传值

子组件用this.$emit()传递，父组件使用v-on事件绑定，然后接受子组件的数据。

兄弟组件传值

使用全局的EventBus，$on接收数据的那个组件 ，$emit发送数据的那个组件。

面试题：Vuex

1.概念

在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

2.何时使用？

多个组件需要共享数据时。

3.如何实现组件间共享

父向子传值        父组件用v-bind给子组件绑定数据，子组件里面用props来接受

子向父传值        子组件用this.$emit()传递，父组件 v-on事件绑定

兄弟组件之间共享数据 使用全局的EventBus

        $on接收数据的那个组件

        $emit发送数据的那个组件

有五个属性：

• state：相当于vue中的data
• mutations：相当于vue中的methods(==同步==)
• actions：相当于vue中的methods(==异步==)
• getters：相当于vue中的computed
• Modules：模块

面试题：介绍一下SPA以及SPA有什么缺点？

SPA（单页面应用）
SPA（ Single-page Application ）只有一个html页面，所有跳转方式都是通过组件切换完成的。

优点：

1.用户体验好，流畅。

2.因为是单页面，所以对服务器的压力较小。

3.良好的前后端工作分离模式。

4.代码的可复用，且由于是组件化开发，有利于后期的维护。

缺点：
1.页面复杂度变大，开发难度较大。

2.不利于SEO（搜索引擎优化）

3.首次加载的时候用时较长。

MPA（多页面应用）
MPA（Multi-page Application）就是指一个应用中有多个页面，页面跳转时是整页刷新，拥右多个html页面，常见于PC端网站。

优点：
1.首屏加载较快，只需要加载本页面的HTML、CSS、JS
2.有利于优化SEO。
3.页面复杂度不高，开发成本较低。

缺点：
1.网站的后期维护难度较大。
2.页面之间的跳转受网络以及设备等影响，耗时较长，出现空白等待的页面，用户体验不高
3.代码重复度大。
4.对服务器的压力较大

面试题：Vue双向绑定和单向绑定

单向数据流

单向数据流在 Vue 中实际表现就是：当 Model 中的 data 发生变化的时候会单向修改 View 中的值，而 View 中的值发生变化的时候，Model 不会感知。实际应用就是 v-bind 单向数据。

双向数据绑定

和单向数据流相比，双向数据绑定就是多了 View 变化会通知到 Model 层。即 MVVM 的具体实现。无论 Model 还是 View 中的值发生变化，都会通过 ViewModel 通知到对方，实现同步。实际应用就是 v-model 双向数据绑定。

面试题：props和data优先级谁高？

props > methods > data > computed > watch

面试题：computed、methods、watch有什么区别？

从作用机制上：

1. methods，watch 和 computed 都是以函数为基础的，但各自却都不同
2. watch 和 computed 都是以 Vue 的依赖追踪机制为基础的，当某一个数据发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。
3. 对 methods：methods 里面是用来定义函数的，它需要手动调用才能执行。而不像 watch 和 computed 那样，“自动执行”预先定义的函数，相比于 watch / computed，methods 不处理数据逻辑关系，只提供可调用的函数。

watch 和 computed 区别：

1. 功能上：computed是计算属性，watch是监听一个值的变化，然后执行对应的回调。
2. 是否调用缓存：computed 只有当依赖的数据变化时才会计算, 会缓存数据。watch 每次都需要执行函数。watch 更适用于数据变化时的异步操作。
3. 是否调用return：computed中的函数必须要用return返回，watch中的函数不是必须要用return
4. watch擅长处理的场景：一个数据影响多个数据 -------搜索框。
5. computed擅长处理的场景：一个数据受多个数据影响 -- 使用场景：当一个值受多个属性影响的时候--------购物车商品结算

面试题：性能优化篇

1. 内容优化
(1)减少HTTP请求数：这条策略是最重要最有效的，因为一个完整的请求要经过DNS寻址，与服务器建立连接，发送数据，等待服务器响应，接收数据这样一个消耗时间成本和资源成本的复杂的过程。

常见方法：合并多个CSS文件和js文件，利用CSS Sprites整合图像，Inline Images(使用 data：URL scheme在实际的页面嵌入图像数据 )，合理设置HTTP缓存等。

(2)减少DNS查找
(3)避免重定向
(4)使用Ajax缓存
(5)延迟加载组件，预加载组件
(6)减少DOM元素数量：页面中存在大量DOM元素，会导致javascript遍历DOM的效率变慢。
(7)避免404：HTTP请求时间消耗是很大的，因此使用HTTP请求来获得一个没有用处的响应（例如404没有找到页面）是完全没有必要的，它只会降低用户体验而不会有一点好处。

2. 服务器优化
(1)使用内容分发网络（CDN）：把网站内容分散到多个、处于不同地域位置的服务器上可以加快下载速度。
(2)提前刷新缓冲区
(3)对Ajax请求使用GET方法
(4)避免空的图像src

3. Cookie优化
(1)减小Cookie大小
(2)针对Web组件使用域名无关的Cookie

4. CSS优化
(1)将CSS代码放在HTML页面的顶部
(2)避免使用CSS表达式
(3)使用<link>来代替@import

5. javascript优化
(1)将JavaScript脚本放在页面的底部。
(2)将JavaScript和CSS作为外部文件来引用：在实际应用中使用外部文件可以提高页面速度，因为JavaScript和CSS文件都能在浏览器中产生缓存。
(3)删除重复的脚本

6. 图像优化
(1)优化图片大小
(2)通过CSS Sprites优化图片
(3)不要在HTML中使用缩放图片
(4)favicon.ico要小而且可缓存

面试题：网络请求篇

跨域面试题：

• 跨域的原理

  跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的。
  同源策略,是浏览器对 JavaScript 实施的安全限制，只要协议、域名、端口有任何一个不同，都被当作是不同的域。
  跨域原理，即是通过各种方式，避开浏览器的安全限制。

• 解决方案

1. 最简单也最常见：使用jsonp ，即json with padding（内填充），顾名思义，就是把JSON填充到一个盒子里
2. 一劳永逸：直接在服务器端设置跨域资源访问 CORS（Cross-Origin Resource Sharing），设置Request Header头中Access-Control-Allow-Origin为指定可获取数据的域名
3. 简单有效：直接请求一张图片
4. 找”爸爸”：通过修改document.domain来跨子域
5. 哥俩好：通过window.name来跨域接收数据
6. 新石器时代：使用HTML5的window.postMessage方法跨域

• JSONP：

  • ajax 请求受同源策略影响，不允许进行跨域请求，而 script 标签 src 属性中的链接却可以访问跨域的 js 脚本，利用这个特性，服务端不再返回 JSON 格式的数据，而是返回一段调用某个函数的 js 代码，在 src 中进行了调用，这样实现了跨域。

    步骤：

  1. 通过定义函数名去接受返回的数据
  2. 接口参数，必须要带一个自定义函数名，要不然后台无法返回数据
  3. script的src属性设置接口地址
  4. 去创建一个script标签

//动态创建 script
 2 var script = document.createElement('script');
 3 
 4 // 设置回调函数
 5 function getData(data) {
 6     console.log(data);
 7 }
 8 
 9 //设置 script 的 src 属性，并设置请求地址
10 script.src = 'http://localhost:3000/?callback=getData';
11 
12 // 让 script 生效
13 document.body.appendChild(script);

参考文献：https://blog.csdn.net/weixin_30363263/article/details/81587025

前端必备八股文 - 丹青-水墨 - 博客园 (cnblogs.com)

http和https：

http 和 https 的基本概念

http: 是一个客户端和服务器端请求和应答的标准（TCP），用于从 WWW 服务器传输超文本到本地浏览器的超文本传输协议。
https:是以安全为目标的 HTTP 通道，即 HTTP 下 加入 SSL 层进行加密。其作用是：建立一个信息安全通道，来确保数据的传输，确保网站的真实性。

http 和 https 的区别及优缺点？

• http 是超文本传输协议，信息是明文传输，HTTPS 协议要比 http 协议安全，https 是具有安全性的 ssl 加密传输协议，可防止数据在传输过程中不被窃取、改变，确保数据的完整性。
• http 协议的默认端口为 80，https 的默认端口为 443。
• http 的连接很简单，是无状态的。https 握手阶段比较费时，会使页面加载时间延长 50%，增加 10%~20%的耗电。
• https 缓存不如 http 高效，会增加数据开销。
• Https 协议需要 ca 证书，费用较高，功能越强大的证书费用越高。
• SSL 证书需要绑定 IP，不能再同一个 IP 上绑定多个域名，IPV4 资源支持不了这种消耗。

https 协议的工作原理

客户端在使用 HTTPS 方式与 Web 服务器通信时有以下几个步骤：

1. 客户端使用 https url 访问服务器，则要求 web 服务器建立 ssl 链接。
2. web 服务器接收到客户端的请求之后，会将网站的证书（证书中包含了公钥），传输给客户端。
3. 客户端和 web 服务器端开始协商 SSL 链接的安全等级，也就是加密等级。
4. 客户端浏览器通过双方协商一致的安全等级，建立会话密钥，然后通过网站的公钥来加密会话密钥，并传送给网站。
5. web 服务器通过自己的私钥解密出会话密钥。
6. web 服务器通过会话密钥加密与客户端之间的通信。

从输入URL到页面加载的全过程

• 首先在浏览器中输入URL

• 查找缓存：浏览器先查看浏览器缓存-系统缓存-路由缓存中是否有该地址页面，如果有则显示页面内容。如果没有则进行下一步。

  • 浏览器缓存：浏览器会记录DNS一段时间，因此，只是第一个地方解析DNS请求；
  • 操作系统缓存:如果在浏览器缓存中不包含这个记录，则会使系统调用操作系统， 获取操作系统的记录(保存最近的DNS查询缓存)；
  • 路由器缓存：如果上述两个步骤均不能成功获取DNS记录，继续搜索路由器缓存；
  • ISP缓存：若上述均失败，继续向ISP搜索。

• DNS域名解析：浏览器向DNS服务器发起请求，解析该URL中的域名对应的IP地址。DNS服务器是基于UDP的，因此会用到UDP协议。。

• 建立TCP连接：解析出IP地址后，根据IP地址和默认80端口，和服务器建立TCP连接

• 发起HTTP请求：浏览器发起读取文件的HTTP请求，该请求报文作为TCP三次握手的第三次数据发送给服务器

• 服务器响应请求并返回结果：服务器对浏览器请求做出响应，并把对应的html文件发送给浏览器

• 关闭TCP连接：通过四次挥手释放TCP连接

WEB安全篇

面试题：XSS攻击

什么是XSS攻击？

XSS攻击全称跨站脚本攻击，是一种在web应用中的计算机安全漏洞，它允许恶意web用户将代码植入到提供给其它用户使用的页面中。

XSS攻击有哪几种类型？

常见的 XSS 攻击有三种：反射型XSS攻击、DOM-based 型XXS攻击以及存储型XSS攻击。

1.反射型XSS攻击

反射型 XSS 一般是攻击者通过特定手法（如电子邮件），诱使用户去访问一个包含恶意代码的 URL，当受害者点击这些专门设计的链接的时候，恶意代码会直接在受害者主机上的浏览器执行。反射型XSS通常出现在网站的搜索栏、用户登录口等地方，常用来窃取客户端 Cookies 或进行钓鱼欺骗。

2.存储型XSS攻击

也叫持久型XSS，主要将XSS代码提交存储在服务器端（数据库，内存，文件系统等），下次请求目标页面时不用再提交XSS代码。当目标用户访问该页面获取数据时，XSS代码会从服务器解析之后加载出来，返回到浏览器做正常的HTML和JS解析执行，XSS攻击就发生了。存储型 XSS 一般出现在网站留言、评论、博客日志等交互处，恶意脚本存储到客户端或者服务端的数据库中。

3.DOM-based 型XSS攻击

基于 DOM 的 XSS 攻击是指通过恶意脚本修改页面的 DOM 结构，是纯粹发生在客户端的攻击。DOM 型 XSS 攻击中，取出和执行恶意代码由浏览器端完成，属于前端 JavaScript 自身的安全漏洞。

面试题：SQL注入

SQL 注入（SQL Injection）是发生在 Web 程序中数据库层的安全漏洞，是网站存在最多也是最简单的漏洞。主要原因是程序对用户输入数据的合法性没有判断和处理，导致攻击者可以在 Web 应用程序中事先定义好的 SQL 语句中添加额外的 SQL 语句，在管理员不知情的情况下实现非法操作，以此来实现欺骗数据库服务器执行非授权的任意查询，从而进一步获取到数据信息。

简而言之，SQL 注入就是在用户输入的字符串中加入 SQL 语句，如果在设计不良的程序中忽略了检查，那么这些注入进去的 SQL 语句就会被数据库服务器误认为是正常的 SQL 语句而运行，攻击者就可以执行计划外的命令或访问未被授权的数据。

避免SQL注入：

1. 过滤输入内容，校验字符串

过滤输入内容就是在数据提交到数据库之前，就把用户输入中的不合法字符剔除掉。可以使用编程语言提供的处理函数或自己的处理函数来进行过滤，还可以使用正则表达式匹配安全的字符串。

2. 参数化查询

参数化查询目前被视作是预防 SQL 注入攻击最有效的方法。参数化查询是指在设计与数据库连接并访问数据时，在需要填入数值或数据的地方，使用参数（Parameter）来给值。

3. 安全测试、安全审计

除了开发规范，还需要合适的工具来确保代码的安全。我们应该在开发过程中应对代码进行审查，在测试环节使用工具进行扫描，上线后定期扫描安全漏洞。通过多个环节的检查，一般是可以避免 SQL 注入的。

面试题：接口安全

Token授权机制：用户使用用户名密码登录后服务器给客户端返回一个Token（通常是UUID），并将Token-UserId以键值对的形式存放在缓存服务器中。服务端接收到请求后进行Token验证，如果Token不存在，说明请求无效。Token是客户端访问服务端的凭证。

时间戳超时机制（Timestamp）：用户每次请求都带上当前时间的时间戳timestamp，服务端接收到timestamp后跟当前时间进行比对，如果时间差大于一定时间（比如5分钟），则认为该请求失效。时间戳超时机制是防御DOS攻击的有效手段。

签名机制：将 Token 和 时间戳 加上其他请求参数再用MD5或SHA-1算法（可根据情况加点盐）加密，加密后的数据就是本次请求的签名sign，服务端接收到请求后以同样的算法得到签名，并跟当前的签名进行比对，如果不一样，说明参数被更改过，直接返回错误标识。签名机制保证了数据不会被篡改。