前端场景题

在加载一个页面时，如果特别慢可能会是什么原因？

（1）http请求过多
（2）页面回流和重绘较多
（3）接收数据时间长，下载资源过大

有哪些性能优化方法？

（1）减少http请求：使用雪碧图，减少重定向，使用缓存
（2）对http传输进行压缩，客户端可以通过Accept-Encoding来声明，服务端通过content-Encoding来声明，一般使用gzip无损压缩
（3）优化网络连接：使用CDN，使用DNS与解析
（4）减少重绘和回流
（5）优化资源加载：将css文件放在head中，js文件放在body底部

跨域问题如何解决？

（1）利用window.postMessage和onMessage
（2）使用websocket实现全双工通信
（3）nginx配置代理服务器

常见的网络攻击？防御措施？

（1）XSS攻击（跨站脚本注入）
通过将恶意代码注入到网页中，在网页渲染时加载并执行而已代码

防御措施：
（1）对输入进行过滤，对输出进行编码
（2）采用内容安全策略（CSP），指定从可信任的网站加载资源
（3）设置http-only禁止js读取cookie

（2）CSRF攻击（跨站请求伪造）
通过恶意引导用户一次点击劫持cookie进行攻击

特点：
1、CSRF通常发生在第三方域名
2、csrf攻击者不能获取到cookie信息，只是使用

防御措施：
（1）验证http的origin、referer字段 ，禁止外域对我们发起请求

使用origin确定域名来源

如果origin存在，直接使用origin中的字段确认来源域名即可

但是origin在以下两种情况并不存在：

• IE11同源策略，IE11不会给跨站CORS请求上添加origin请求头
• 302重定向，在302重定向后origin不包含在重定向的请求中

使用referer确定域名来源

攻击者可以在自己的请求中隐藏referer，当https页面跳转至http页面时，所有浏览器referer都会丢失

如果origin和referer都不存在，直接阻止该请求

（2）CSRF Token
CSRF攻击冒用cookie信息也能攻击成功，这是因为服务器把攻击者发送的请求当成了用户自己的请求，那么我们要求用户请求都携带一个CSRF攻击者无法获取到的Token。服务器通过校验请求是否携带正确的Token，来把正常的请求和攻击的请求区分开

CSRF Token的防护策略分为三个步骤：
1.将CSRF Token输出到页面中
首先，用户打开页面的时候，服务器需要给这个用户生成一个Token，该Token通过加密算法对数据进行加密，为了安全起见，该Token最好存在服务器的session中，之后每次页面加载，使用JS遍历DOM树，对于DOM中的所有a和form标签添加token，但是对于页面加载后动态生成的HTML代码，这种方法没有作用

2.页面提交的请求携带这个Token

对于Get请求，Token将附在请求地址后；而对于post请求，要在form最后加上<input value=“token”>

3.服务器验证Token是否正确

当用户提交token给服务器时，首先需要解密token，对比加密字符串以及时间戳，如果加密字符串一致并且时间未过期，那么这个token就是有效的

缺点：在会话中存储token比较繁琐，且不能在通用的拦截上统一处理所有的接口

（3）双重cookie验证

基本流程：

• 在用户访问网站页面时，像请求域名注入一个cookie，内容为随机字符串
• 当发起请求时，取出cookie并添加到url参数中
• 后端接口验证cookie中的字段与url参数中的字段是否一致，不一致则拒绝

（4）Samesite Cookie属性

• Samesite=Strict ：表明这个cookie任何情况下都不能作为第三方cookie
• Samesite=Lax：如果请求改变了当前页面或打开了新页面且是个get请求，那么这个cookie可以作为第三方cookie