Web前端基础知识整理（二）

1、Web中的常见攻击方式

• 跨站脚本攻击XSS

  XSS简单来说，就是在页面中植入恶意代码
  防御XSS：坚决不要相信用户的任意输入，并过滤掉输入中的特殊字,比如script标签，保护cookie，对重要的cookie设置httpOnly，防止客服端通过document.cookie获得cookie。

• sql注入
  sql注入指的是攻击者向服务器提交恶意sql代码，导致源程序执行包含恶意代码的sql。
  防止:客户端过滤特殊字符，在服务器中执行sql有关的操作时进行预处理。

• 跨站点伪造请求（CSRF）
  什么是CSRF？攻击者盗用合法用户的身份，向服务器发送请求，对于服务器来说又是完全合法的，但却完成了攻击者所期望的操作。
  目前防御CSRF攻击主要有三种策略
  （1）验证 HTTP Referer 字段
  HTTP的referer字段保存了http的来源地址，受访网站可以验证这个地址是否合法，如果不合法，则有可能为CSRF攻击，拒绝该请求。但这种方法不是万无一失的，referer的值是由浏览器提供的，我们并不能保证浏览器没有安全漏洞，目前已有一些方法可以篡改referer值，而且有些用户为了保护自己的隐私可以设置浏览器在发送请求时不再提供referer值。
  （2）在请求地址中添加token并验证
  CSRF利用cookie来进行攻击，那么我们可以在请求中添加不可伪造的信息并不存在与cookie中，可以在请求中以参数形式随机产生一个token，并在服务器建立一个拦截器验证这个token。
  （3）在HTTP头中自定义属性并验证
  解决了上种方法在请求中加入 token 的不便，同时，通过 XMLHttpRequest 请求的地址不会被记录到浏览器的地址栏，也不用担心 token 会透过 Referer 泄露到其他网站中去。

2、Web开发兼容性问题

兼容问题主要包括css兼容,js兼容

不同浏览器默认样式不同:

* { margin: 0; padding: 0 }

对于部分样式需要通过加入前缀解决

事件兼容的问题，我们通常需要会封装一个适配器的方法，过滤事件句柄绑定、移除、冒泡阻止以及默认事件行为处理

 var  helper = {}

 //绑定事件
 helper.on = function(target, type, handler) {
 	if(target.addEventListener) {
 		target.addEventListener(type, handler, false);
 	} else {
 		target.attachEvent("on" + type,
 			function(event) {
 				return handler.call(target, event);
 		    }, false);
 	}
 };

 //取消事件监听
 helper.remove = function(target, type, handler) {
 	if(target.removeEventListener) {
 		target.removeEventListener(type, handler);
 	} else {
 		target.detachEvent("on" + type,
 	    function(event) {
 			return handler.call(target, event);
 		}, true);
     }
 };

阻止默认行为:
w3c 的方法是 e.preventDefault()，IE 则是使用 e.returnValue = false;

[js] view plaincopy
function cancelHandler(event){  
  var event = event || window.event;  //用于IE  
  if(event.preventDefault) event.preventDefault();  //标准技术  
  if(event.returnValue) event.returnValue = false;  //IE  
  return false;   //用于处理使用对象属性注册的处理程序  
}  

阻止事件冒泡:
w3c 的方法是 e.stopPropagation()，IE 则是使用 e.cancelBubble = true

[js] view plaincopy
function stopHandler(event)  

    window.event?window.event.cancelBubble=true:event.stopPropagation();  

}  

3、Web前端性能优化

1 业务逻辑时使用时间复杂度低的算法
2 减少网络请求数量
3 资源的压缩，包括css、js
4 图片的压缩
5 使用缓存
LocalStorage

HTML5设计出来专门用于浏览器存储的。（没有时间限制）
大小为5M左右。
仅在客户端使用，不和服务端进行通信。
接口封装较好，读写、删除数据方便。
浏览器本地缓存方案。

SessionStorage

会话级别的浏览器存储 （浏览器一个标签页就是一个会话，当签页关闭后数据清空）。
大小为5M左右。
仅在客户端使用，不和服务端进行通信。
接口封装较好，读写、删除数据方便。
适合用于对表单信息的维护。

6 使用多线程