杂记（前端安全以及性能优化）

本文来自于《我遇到的前端面试题2017》所写的笔记

1 前端安全问题

关于前端安全问题，主要有两种，分别为：XSS攻击以及CRSF攻击

1.1 XSS攻击

参考文章：《HttpOnly介绍以及防止XSS攻击时的做用》

跨站脚本攻击（Cross Site Scripting）为了与CSS重叠样式表区分开来，因此简称为XSS攻击。
简单来讲XSS是一种在web应用中的计算机安全漏洞，它容许恶意Web用户将代码植入到提供给其它用户使用的页面中，，能够理解为一种JavaScript代码注入，如编写JavaScript代码到公共评论模块中。

防护措施：

• 一、过滤转义输入输出
• 二、避免使用eval执行字符串
• 三、后端set cookie时可定义httponly属性

1.2 CSRF攻击

参考文章《浅谈CSRF攻击方式》

跨站请求伪造（Cross-site request forgery）,简称CSRF攻击。
要完成一次CSRF攻击，受害者必须依次完成两个步骤：

• 一、登陆受信任网站A，并在本地生成Cookie
• 二、在不登出A的状况下，访问危险网站B

好比在受信任网站的Cookie还没过时的状况下，点击了恶意网站，恶意网站利用类同JSONP方式，在某<img>元素中定义了src属性以GET的形式调用受信任网站中的资源或函数方法。

防护措施：

• 一、关键请求使用验证码
• 二、检测http referer是不是同域名

2 性能优化

• HTML优化：
  
  • 使用语义化标签
  • 减小iframe
  • 避免重定向
• CSS优化：
  
  • 布局代码写前面
  • 删除空样式，压缩
  • 不滥用浮动，字体，须要加载的网络字体根据网站需求再添加
  • 选择器性能优化
  • 避免使用表达式，避免用id写样式
• js优化：
  
  • 压缩
  • 减小重复代码
  • 使用JSON格式来进行数据交换
  • 减小DOM操做，缓存已经访问过的元素
• 图片优化：
  
  • 图像使用WebP格式
  • 图片合并，CSS sprite技术
• 使用DNS预解析（Domain Name System，域名系统），参考文章《HTML5 prefetch》
  
  • 1. 用meta信息来告知浏览器, 当前页面要作DNS预解析：<meta http-equiv="x-dns-prefetch-control" content="on" />
  • 1. 在页面header中使用link标签来强制对DNS预解析： <link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />