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

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

1 前端安全问题

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

1.1 XSS攻击

参考文章：《HttpOnly介绍以及防止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》
  
  • 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" />

转载于:https://www.cnblogs.com/AB786883603/p/8325385.html