【面试题】2023年前端最新面试题-web安全

原文见语雀：（https://www.yuque.com/deepstates/interview/tluabi）

● 网络前端安全
○ xss
○ csrf
○ 点击挟持攻击
○ url跳转漏洞
○ sql注入攻击
○ os命令注入攻击
○ 海量接口请求
● 前端兜底安全
○ 兜底容灾

⭐️⭐️⭐️ 相关知识点见：
网络前端安全
Web攻击方式有哪几种？
● XSS
● CSRF
● 点击挟持攻击
● url跳转漏洞
● SQL注入攻击：就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。
● os命令注入攻击
● 海量接口请求

XSS
XSS基本概念和缩写？
XSS，cross-site scripting ，跨域脚本攻击。

XSS攻击原理？
原理：向页面注入html标签或js脚本。
eg:提交区（评论区）写img标签，script标签，利用合法渠道向页面注入js

XSS防御措施？
宗旨：让xss不可执行。
1、前端替换关键字，如替换<为< > 为>
2、后台替换。
3、任何内容写到页面之前都必须加以encode，避免不小心把html tag 弄出来。

CSRF
CSRF基本概念和缩写？
CSRF，Cross-site request forgery，通常被称为跨站请求伪造。

CSRF攻击原理？

1、前提：①用户在注册网站A登录过，②接口有漏洞。
2、引诱点击，往往是一个链接（这个链接自动携带cookie，不会带token），指向网站A的api，接口是get类型。浏览了A，浏览器自动生成新的cookie，网站A拿到cookie，接口运行。

CSRF防御措施？
● token验证：注册网站，或者访问网站，服务器自动向本地存储一个token。
● refer验证：服务器判断页面是不是我这个站点来的页面。
● 对 Cookie 设置 SameSite 属性
● 验证码：应用程序和用户进行交互过程中，特别是账户交易这种核心步骤，强制用户输入验证码，才能完成最终请求。

网页验证码是干嘛的，是为了解决什么安全问题。
一、区分用户是计算机还是人的公共全自动程序。
二、CSRF防御措施之一。可以防止恶意破解密码、刷票、论坛灌水； 有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试。

CSRF ,XSS的区别？
1、XSS是向页面注入js去运行，然后在js函数体中做他想做的事情。
CSRF是利用网站漏洞，自动执行接口。用户需要登陆网站。
2、XSS是获取信息，不需要提前知道其他用户页面的代码和数据包。
CSRF是代替用户完成指定的动作，需要知道其他用户页面的代码和数据包。

SQL注入
SQL注入防御措施？
1、永远不要信任用户的输入，要对用户的输入进行校验，可以通过正则表达式，或限制长度，对单引号和双"-"进行转换等。
2、永远不要使用动态拼装SQL，可以使用参数化的SQL或者直接使用存储过程进行数据查询存取。
3、永远不要使用管理员权限的数据库连接，为每个应用使用单独的权限有限的数据库连接。
4、不要把机密信息明文存放，请加密或者hash掉密码和敏感的信息。

前端兜底安全
前端兜底容灾？
一、前端容灾指的是当后端接口挂了，依然可以保证页面展示信息完整。我们以百度首页中新闻模块举例，当你打开百度的时候，服务端渲染好的页面出来以后，需要请求新闻接口拿到数据渲染新闻模块。你的老板告诉你，不论任何情况，必须展示新闻和广告，即使新闻接口挂了。这个时候怎么办，也就是前端容灾的范畴了。
二、兜底容灾方法
● localstorage缓冲接口数据
新闻模块的接口，每次有返回的时候，都存入localstorage中，以接口路径为key，返回数据为value，当新闻接口请求失败的时候先从localstorage中读上次成功请求时候的数据，展示出来。
● 备份一份静态数据到CDN
让业主方同学提供一份兜底新闻数据，存放在CDN上，新闻接口返回失败，用户localstorage中也没有数据的时候，去CDN对应地址拉取数据渲染
● 利用Service worker的caches API做页面接口缓存
Service worker提供了fetch事件可供监听，当页面发出请求的时候，会先过fetch方法，你可以在这里定义任何你需要的缓存策略，比如请求成功后，将结果存入caches。Service worker中，你甚至可以缓存当前页面的HTML，让网站离线运行。
通过上面这些手段，可以保证只要给用户吐出HTML就能保证页面完整性。对于让页面始终可吐出HTML这件事，那就又属于后端，运维同学所做的了。可以借助上面我介绍到的集群的方式，也可以通过CDN的方式(动态DNS)来解决。