前端面试题(五)(安全、性能优化)
一、说说你所知道的web安全及防护措施
- 常用攻击手段:SQL注入、XSS(Cross Site Script),跨站脚本攻击、CSRF(Cross Site Request Forgery),跨站点伪造请求
(1)XSS
- xss: 跨站脚本攻击(Cross Site Scripting)是最常见和基本的攻击 WEB 网站方法,攻击者通过注入非法的 html 标签或者 javascript 代码,从而当用户浏览该网页时,控制用户浏览器。
- (一) 类别(三种)
DOM xss :
- DOM即文本对象模型,使用DOM可以允许程序和脚本动态的访问和更新文档的内容、结构和样式。这种方式不需要服务器解析响应的直接参与,触发XSS靠的是浏览器端的DOM解析,可以认为完全是客户端的事情。
反射型 xss :
- 反射型XSS也被称为非持久性XSS,是现在最容易出现的一种XSS漏洞。发出请求时,XSS代码出现在URL中,最后输入提交到服务器,服务器解析后在响应内容中出现这段XSS代码,最后浏览器解析执行。
存储型 Xss
- 存储型XSS又被称为持久性XSS,它是最危险的一种跨站脚本,相比反射型XSS和DOM型XSS具有更高的隐蔽性,所以危害更大,它不需要用户手动触发。 当攻击者提交一段XSS代码后,被服务器端接收并存储,当所有浏览者访问某个页面时都会被XSS,其中最典型的例子就是留言板。
- (二) Xss危害
- 利用虚假输入表单骗取用户个人信息。
- 利用脚本窃取用户的 Cookie 值,被害者在不知情的情况下,帮助攻击者发送恶意请求。
- (三) 抵御Xss危害
- httpOnly: 在 cookie 中设置 HttpOnly 属性,使js脚本无法读取到 cookie 信息。
- 前端负责输入检查,后端也要做相同的过滤检查。
- 某些情况下,不能对用户数据进行严格过滤时,需要对标签进行转换
(二) CSRF
- 跨站点请求伪造(Cross-Site Request Forgeries),冒充用户发起请求(在用户不知情的情况下), 完成一些违背用户意愿的事情(如修改用户信息,删初评论等)。
1、可能造成危害:
- 利用已通过认证的用户权限更新设定信息等;
- 利用已通过认证的用户权限购买商品;
- 利用已通过的用户权限在留言板上发表言论。
2、防御:
- 验证码;强制用户必须与应用进行交互,才能完成最终请求。
- 尽量使用 post ,限制 get 使用;get 太容易被拿来做 csrf 攻击;
- 请求来源限制,此种方法成本最低,但是并不能保证 100% 有效,因为服务器并不是什么时候都能取到 Referer,而且低版本的浏览器存在伪造 Referer 的风险。
- token 验证 CSRF 防御机制是公认最合适的方案。
使用token的原理:
- 第一步:后端随机产生一个 token,把这个token 保存到 session 状态中;同时后端把这个token 交给前端页面;
- 第二步:前端页面提交请求时,把 token 加入到请求数据或者头信息中,一起传给后端;
- 后端验证前端传来的 token 与 session 是否一致,一致则合法,否则是非法请求。
二、说说你说了解的前端性能优化?
content方面
- 减少HTTP请求:合并文件、CSS精灵、inline Image
- 减少DNS查询:DNS查询完成之前浏览器不能从这个主机下载任何任何文件。方法:DNS缓存、将资源分布到恰当数量的主机名,平衡并行下载和DNS查询
- 避免重定向:多余的中间访问
- 使Ajax可缓存
- 非必须组件延迟加载
- 未来所需组件预加载
- 减少DOM元素数量
- 将资源放到不同的域下:浏览器同时从一个域下载资源的数目有限,增加域可以提高并行下载量
- 减少iframe数量
- 不要404
Server方面
- 使用CDN
- 添加Expires或者Cache-Control响应头
- 对组件使用Gzip压缩
- 配置ETag
- Flush Buffer Early
- Ajax使用GET进行请求
- 避免空src的img标签
Cookie方面
- 减小cookie大小
- 引入资源的域名不要包含cookie
css方面
- 将样式表放到页面顶部
- 不使用CSS表达式
- 不使用IE的Filter
Javascript方面
- 将脚本放到页面底部
- 将javascript和css从外部引入
- 压缩javascript和css
- 删除不需要的脚本
- 减少DOM访问
- 合理设计事件监听器
图片方面
- 优化图片:根据实际颜色需要选择色深、压缩
- 优化css精灵
- 不要在HTML中拉伸图片
- 保证favicon.ico小并且可缓存
(三)你有用过哪些前端性能优化的方法?
减少http请求次数:
- CSS Sprites, JS、CSS源码压缩、图片大小控制合适;
- 网页Gzip,CDN托管,data缓存 ,图片服务器。
- 前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,
- 前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数
- 用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。
- 当需要设置的样式很多时设置className而不是直接操作style
- 少用全局变量、缓存DOM节点查找的结果。
- 减少IO读取操作
- 避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性)
- 图片预加载,将样式表放在顶部
- 将脚本放在底部 加上时间戳
- 避免在页面的主体布局中使用table,table要等其中的内容完全下载之后才会显示出来,显示比div+css布局慢
(四)前端需要注意哪些SEO
合理的title、description、keywords:搜索对这三项的权重逐个减小;
- title值强调重点即可,重要关键词出现不要超过2次,而且要靠前,不同页面title要有所不同;
- description把页面内容高度概括,长度合适,不可过分堆砌关键词,不同页面description有所不同;
- keywords列举出重要关键词即可
- 语义化的HTML代码,符合W3C规范:语义化代码让搜索引擎容易理解网页
- 重要内容HTML代码放在最前:搜索引擎抓取HTML顺序是从上到下,有的搜索引擎对抓取长度有限制,保证重要内容一定会被抓取
- 重要内容不要用js输出:爬虫不会执行js获取内容
- 少用iframe:搜索引擎不会抓取iframe中的内容
- 非装饰性图片必须加alt
- 提高网站速度:网站速度是搜索引擎排序的一个重要指标
(五)如何做SEO优化?
标题与关键词
- 设置有吸引力切合实际的标题,标题中要包含所做的关键词
网站结构目录
- 最好不要超过三级,每级有“面包屑导航”,使网站成树状结构分布
页面元素
- 给图片标注"Alt"可以让搜索引擎更友好的收录
网站内容
- 每个月每天有规律的更新网站的内容,会使搜索引擎更加喜欢
友情链接
- 对方一定要是正规网站,每天有专业的团队或者个人维护更新
内链的布置
- 使网站形成类似蜘蛛网的结构,不会出现单独连接的页面或链接
流量分析
- 通过统计工具(百度统计,CNZZ)分析流量来源,指导下一步的SEO
- 上期前端面试JavaScript
- 往期经典深入探究-页面从输入URL到加载显示完成的过程
持续更新中~欢迎关注,一起探索前端之旅
相关推荐
sswqycbailong 2020-07-28
csxiaoqiang 2020-07-26
码农成长记 2020-07-19
layloge 2020-07-05
layloge 2020-06-26
liangjielaoshi 2020-06-25
csxiaoqiang 2020-06-16
某先生 2020-06-13
ItBJLan 2020-06-11
layloge 2020-06-07
csxiaoqiang 2020-06-03
sswqycbailong 2020-06-01
layloge 2020-05-30
码农成长记 2020-05-28
qidu 2020-05-26
zhuangnet 2020-05-20
zhuangnet 2020-05-19
xiaoemo0 2020-05-16
码农成长记 2020-05-10