本文来自于《我遇到的前端面试题2017》所写的笔记
1 前端安全问题
关于前端安全问题,主要有两种,分别为:XSS攻击以及CRSF攻击
1.1 XSS攻击
跨站脚本攻击(Cross Site Scripting)为了与CSS重叠样式表区分开来,所以简称为XSS攻击。
简单来说XSS是一种在web应用中的计算机安全漏洞,它允许恶意Web用户将代码植入到提供给其它用户使用的页面中,,可以理解为一种JavaScript代码注入,如编写JavaScript代码到公共评论模块中。
防御措施:
- 1、过滤转义输入输出
- 2、避免使用
eval
执行字符串 - 3、后端set cookie时可定义
httponly
属性
1.2 CSRF攻击
参考文章《浅谈CSRF攻击方式》
跨站请求伪造(Cross-site request forgery),简称CSRF攻击。
要完成一次CSRF攻击,受害者必须依次完成两个步骤:
- 1、登录受信任网站A,并在本地生成Cookie
- 2、在不登出A的情况下,访问危险网站B
比如在受信任网站的Cookie还没过期的情况下,点击了恶意网站,恶意网站利用类同JSONP方式,在某<img>
元素中定义了src
属性以GET的形式调用受信任网站中的资源或函数方法。
防御措施:
- 1、关键请求使用验证码
- 2、检测
http referer
是否是同域名
2 性能优化
- HTML优化:
- 使用语义化标签
- 减少iframe
- 避免重定向
- CSS优化:
- 布局代码写前面
- 删除空样式,压缩
- 不滥用浮动,字体,需要加载的网络字体根据网站需求再添加
- 选择器性能优化
- 避免使用表达式,避免用id写样式
- js优化:
- 压缩
- 减少重复代码
- 使用JSON格式来进行数据交换
- 减少DOM操作,缓存已经访问过的元素
- 图片优化:
- 图像使用WebP格式
- 图片合并,CSS sprite技术
- 使用DNS预解析(Domain Name System,域名系统),参考文章《HTML5 prefetch》
-
- 用
meta
信息来告知浏览器, 当前页面要做DNS预解析:<meta http-equiv="x-dns-prefetch-control" content="on" />
- 用
-
- 在页面header中使用link标签来强制对DNS预解析:
<link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />
- 在页面header中使用link标签来强制对DNS预解析:
-