web前端面试之其他

目录

一、前端安全问题

1、常见的网站漏洞有哪些？

2、xss跨站脚本攻击（原理、如何进行的、防御手段是什么，要说清楚）

3、CSRF跨站请求伪造（如何伪造法？怎么防御？等等都要说清楚）

4、sql脚本注入（注入方式，防御方式）

4、上传漏洞 （防御方式）

二、跨域

1、什么是跨域？  

2、什么是同源策略？

3、解决跨域的方法有哪些？

4、localStorage和cookie的跨域解决方案

三、性能优化

1、你都用过那种性能优化的方法？

2、CSS Sprite是什么，谈谈这个技术的优缺点

3、如何处理缓存？如何清除缓存。

---

一、前端安全问题

1、常见的网站漏洞有哪些？

1. 有跨站脚本攻击（XSS）
2. 跨站请求伪造（CSRF）
3. 点击劫持
4. SQL注入
5. DDOS攻击
6. DNS劫持

2、xss跨站脚本攻击（原理、如何进行的、防御手段是什么，要说清楚）

如何进行：XSS是指恶意攻击者利用网站没有对用户提交数据进行转义处理或者过滤不足的缺点，进而添加一些代码，嵌入到web页面中去。使别的用户访问都会执行相应的嵌入代码。从而盗取用户资料、利用用户身份进行某种动作或者对访问者进行病毒侵害的一种攻击方式。

简单而言：代码注入攻击，通常是在目标网站上注入恶意脚本，在用户浏览器上运行。利用这些脚本攻击者获取敏感信息

主要原理：过于信任客户端提交的数据！

防御手段：不信任任何客户端提交的数据，只要是客户端提交的数据就应该先进行相应的过滤处理然后方可进行下一步的操作。

防御措施：

1. 验证码机制
2. 转义字符
3. 内容输入长度控制
4. CSP，禁止加载外域代码

3、CSRF跨站请求伪造（如何伪造法？怎么防御？等等都要说清楚）

如何进行：当你在某网页登录之后，在没有关闭网页的情况下，收到别人的链接。例如:http://127.0.0.1/dvwa/vulnerabilities/csrf/?password_new=1&password_conf=1&Change=Change#

点击链接，会利用浏览器的cookie把密码改掉。

换言：攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。

主要原理：在没有关闭相关网页的情况下，点击其他人发来的CSRF链接，利用客户端的cookie直接向服务器发送请求。

防御手段：

1. 检测Referer
2. Anti-CSRF token机制
3. 业务上要求用户输入原始密码（简单粗暴），攻击者在不知道原始密码的情况下，无论如何都无法进行CSRF攻击。

4、sql脚本注入（注入方式，防御方式）

如何进行：利用现有应用程序，将（恶意）的SQL命令注入到后台数据库引擎执行的能力，它可以通过在Web表单中输入（恶意）SQL语句得到一个存在安全漏洞的网站上的数据库，而不是按照设计者意图去执行SQL语句。

主要原理：通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令

防御手段：

1. 使用预编译，绑定变量（推荐）。
2. 检查数据类型。
3. 过滤特殊字符和语句。
4. 页面不错误回显。

4、上传漏洞 （防御方式）

如何进行：用户上传了一个可执行的脚本文件，并通过此脚本文件获得了执行服务器端命令的能力。

主要原理：当文件上传时没有对文件的格式和上传用户做验证，导致任意用户可以上传任意文件，那么这就是一个上传漏洞。

防御手段：

1. 最有效的，将文件上传目录直接设置为不可执行，对于Linux而言，撤销其目录的'x'权限；实际中很多大型网站的上传应用都会放置在独立的存储上作为静态文件处理，一是方便使用缓存加速降低能耗，二是杜绝了脚本执行的可能性；
2. 文件类型检查：强烈推荐白名单方式，结合MIME Type、后缀检查等方式；此外对于图片的处理可以使用压缩函数或resize函数，处理图片的同时破坏其包含的HTML代码；
3. 使用随机数改写文件名和文件路径，使得用户不能轻易访问自己上传的文件；
4. 单独设置文件服务器的域名；

二、跨域

1、什么是跨域？  

由浏览器同源策略限制的一类请求场景，当不同地址，不同端口，不同级别，不同协议就会构成跨域。

2、什么是同源策略？

所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。

3、解决跨域的方法有哪些？

1.  通过jsonp跨域：Jsonp 的实现原理就是：创建一个回调函数，然后在远程服务上调用这个函数并且将 JSON 数据形式作为参数传递，完成回调。
2. CORS（跨域资源共享）
3. document.domain + iframe跨域
4. location.hash + iframe
5. window.name + iframe跨域
6. postMessage跨域
7. nginx代理跨域
8. nodejs中间件代理跨域
9. WebSocket协议跨域

4、localStorage和cookie的跨域解决方案

参考：https://www.haorooms.com/post/kuayu_localstorage_cookie

三、性能优化

1、你都用过那种性能优化的方法？

1、尽可能的减少http请求

使用CSS Sprites；JS、CSS源码压缩；图片大小控制合适；启用Gzip压缩，CDN托管，data缓存；图片服务器

2、避免在CSS中使用 Expression

Expression（css表达式)又称Dynamic properties(动态属性)
3、添加expire/Cache-Control头

4、少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

5、图片预加载，将样式表放在顶部，将脚本放在底部，加上时间戳。

6、当需要设置的样式很多时设置className而不是直接操作style。

7、用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。

8、前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

2、CSS Sprite是什么，谈谈这个技术的优缺点

3、如何处理缓存？如何清除缓存。