杂记(前端安全以及性能优化)
来源:互联网 发布:手机电子秤软件下载 编辑:程序博客网 时间:2024/05/16 08:26
本文来自于《我遇到的前端面试题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》
- 用
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预解析:
阅读全文
0 0
- 杂记(前端安全以及性能优化)
- 前端性能优化(二)
- 网页性能优化(前端)
- 如何对web前端进行优化以及提升其性能?
- 前端性能优化(JavaScript篇)
- 关于前端WPO(网站性能优化)
- 前端性能优化(CSS动画篇)
- 前端性能优化(JavaScript补充篇)
- 前端性能优化(CSS动画篇)
- 前端性能优化篇(常见)
- 前端性能优化(CSS动画篇)
- 前端性能优化总结(三)
- 前端js性能优化(一)
- 前端js性能优化(二):DOM
- 前端js性能优化(三)
- 前端性能优化(DOM操作篇)
- 前端性能优化(JavaScript篇)
- 前端性能优化(JavaScript补充篇)
- 使用charles抓包工具模拟网络状况,限制网络速度
- 浅析iServer地址匹配服务
- 用quartz做定时任务时和shiro中用到的quartz包版本不一致导致的冲突的解决方法
- :nth-child(index)和nth-child(index)选择器的区别
- JDK7异常处理
- 杂记(前端安全以及性能优化)
- 51nod 1307 绳子与重物【并查集】【搜索】【二分法】
- @propery (class,...) 小记,静态函数另类调用方法
- IBM Platform Symphony:功能强大的高效大数据分析平台
- Java语言基础学习笔记(一)
- 神经网络之keras/tf框架实现
- [NOIP模拟赛]填充表格
- mt6735修改闪光灯阀值
- kendo ui 访问数据库数据,绘制jsp页面