前端零碎知识点(一)

一、防抖、节流

防抖:指触发事件后在规定时间内回调函数只能执行一次,如果在规定时间内触发了该事件,则会重新开始算规定时间。

常见应用场景:百度搜索联想功能

原理:通过定时器对事件函数进行延时,如果在延时时间内再次触发该时间,则清楚定时器并重新设置定时器;

节流:当持续触发事件时,在规定时间段内只能调用一次回调函数。

常见应用场景:下拉或者上划刷新、鼠标滚动刷新等;

对比:防抖是将多次执行变为最后一次执行,节流是将多次执行变为在规定时间内只执行一次,总之,都是延时执行。

二、前端安全问题:XSS、SQL注入、CSRF

1、XSS(跨站脚本攻击):通常是由带有页面可解析内容的数据未经处理直接插入到页面上解析导致的;

1)、存储型XSS:前端提交的数据未经处理直接存储到数据库然后从数据库中读出来又直接插入到页面中所导致的;

扫描二维码关注公众号,回复: 5427759 查看本文章

例如:前端所传数据为'<script>alert('就想来个弹窗')</script>',如果不处理直接插入页面div的话,就是出现alert弹窗;

2)、反射型XSS:可能是网页URL参数中注入了可解析内容的数据而导致的,如果直接获取URL中不合法的并插入页面中则可能出现页面上的XSS攻击;

3)、MXSS:是在渲染DOM属性时将攻击脚本插入DOM属性中被解析而导致的;

XSS解决办法:将所有可能包含攻击的内容进行HTML字符编码转义或者在 cookie 中设置 HttpOnly 属性后,js脚本将无法读取到 cookie 信息;

2、SQL注入主要是因为页面提交数据导服务器端后,在服务端未进行数据验证就将数据直接拼接到SQL语句中执行;

例如:

let id = req.query['id'];
let sql = `select * from user_table where id=${id}`;
let data = exec(sql);
this.body = data;

如果前端传入的id为'1001 or name=%user%',那么查询出来的数据就不只是id=1001的用户了,名字包含user的用户也会被查询出来;

解决办法:对前端网页提交的数据内容进行严格的检查校验;

3、CSRF是指非源站点按照源站点的数据请求格式提交非法数据给源站点服务器的一种攻击方法;

通常比较安全的是通过token(令牌)提交验证码的方式来验证请求是否为源站点页面提交的,以此来阻止跨站伪请求的发生;

三、缓存

缓存就是保存资源副本并在下次请求时直接使用该副本。浏览器缓存就是浏览器请求网站留下的资源副本。

当 web 缓存发现请求的资源已经被存储,它会拦截请求,返回该资源的拷贝,而不会去源服务器重新下载。(返回码304大致就是这个意思);

好处:不用每次都去请求资源,缓解服务器压力、提升性能、减少带宽消耗;

浏览器对于缓存的处理是根据第一次请求资源时返回的响应头来确定的。

通过cache-control的指令可以控制告诉客户端或是服务器如何处理缓存。

浏览器缓存流程如下图:

猜你喜欢

转载自blog.csdn.net/W_Clarence/article/details/87987102
今日推荐