目标:
在一个单独的持久连接上提供全双工、双向通信。与其他方案不同,
Web Sockets
不使用HTTP
协议,而使用一种自定义的协议。这种协议专门为快速传输小数据设计。虽然要求使用不同的Web服务器,但却具有速度上的优势
过程:
- 创建Web Socket
- HTTP请求发送到浏览器,发起连接
- 服务器响应
- 使用的HTTP升级为Web Socket协议
也就是说,使用标准的
HTTP
服务器无法实现Web Sockets
,只有支持这种协议的专门服务器才能正常工作
在使用
Web Socket URL
时,必须带着这个模式(未来可能支持其他模式)
- 未加密:
ws://
- 加密:
wss://
使用自定义协议而非HTTP协议:
-
好处
能够在客户端和服务器之间发送非常少量的数据,而不必担心HTTP那样的字节开销
适用于移动应用(带宽和网络延迟)
-
缺点:
制定协议的时间比制定
JavaScript API
的时间还要长
支持Web Sockets为浏览器:
Firefox 6+ 、 Safari 5+ 、 Chrome和iOS 4+版Safari
Web Sockets API
- 创建Web Socket,先实例一个WebSocket对象并传入要连接的URL:
var socket = new WebSocket("ws://www.example.com/server.php")
-Ps: 必须给WebSocket
构造函数传入绝对URL。同源策略对Web Sockets
不适用,因此可以通过它打开到任何站点的连接。至于是否与某个域中的页面通信,完全取决于服务器。(通过握手信息就可以知道请求来自何方)-
为确保通过XHR访问的URL安全,通行的做法就是验证发送请求者是否有权限访问相应的资源
- 要求以SSL连接来访问可以通过XHR请求的资源
- 要求每一次请求都要附带经过相应算法计算得到的验证码
注意: 以下措施对防范CSRF攻不起作用。
- 要求发送POST而不是GET请求 --- 很容易改变
- 检查来源URL以确定是否可信 --- 来源记录很容易伪造
- 基于cookie信息进行验证 --- 同样很容易伪造
ps: XHR对象也提供了一些安全机制,虽然表面上看起来保证安全,但实际上却相当不可靠。
如:
xhr.open("get","example.php",true, "usename","password")
// 不要这样做!!!
即便可以考虑这种安全机制,但是还是尽量不雅这样做。把用户名和密码保存在JavaScript代码总本身就很不安全的。任何人,只要他会使用JavaScript调试器,就可以通过查看相应的变量发现纯文本形式的用户名和密码
同源策略
: 是对XHR的一个主要约束,它为通信设置了“相同的域、相同的端口、相同的协议”这一限制。
试图访问上述限制之外的资源,都会引发安全错误,除非采用CORS(Cross-Origin Resource Sharing, 跨源资源共享)
。IE通过XDomainRequest对象支持CORS,其他浏览器也通过XHR对象原生支持CORS。图像Ping和JSONP是另外两种跨域通信的技术,但不如CORS