Flash实现Websocket的跨域问题-安全沙箱问题解决办法

笔者在开发一款大型的直播交互平台时采用了Websocket技术来实现文字、弹幕与语音的交互,当前主流的浏览器都内建了Websocket的支持,因此直播平台在大多数浏览器上运行良好。但由于平台需要支持IE8(或以下版本)浏览器,由于IE没有内置的Websocket支持,因此考虑采用Flash实现一个代理层来支持Websocket,当Flash代码实现好后在IE中一运行,发现总是提示安全沙箱冲突,如下所示:

 


[WebSocket] cannot connect to Web Socket server at ws://192.168.1.202:9168/ (SecurityError: Error #2048: 安全沙箱冲突:http://192.168.1.202:8080/js/swf/WebSocketInsecure.swf 不能从 192.168.1.202:9168 加载数据。)
make sure the server is running and Flash socket policy file is correctly placed
 

 

通过分析原因后发现是Flash的安全策略导致的问题,flash发起socket通讯时,如果swf文件与通讯的服务器地址不一致:包括IP地址(域)与端口,就会向通讯所在的服务器请求安全策略文件,例如:如果Flash所在的页面地址为 http://192.168.100:8080/index.html,而Websocket需要访问 192.168.100:8168这个地址,虽然访问的服务器的IP地址相同,但由于端口不一样,一个为8080,另一个为8168,Flash也会把它们当做不同的域,需要安全策略文件。

 

Flash请求安全策略文件的步骤如下:

1)Flash首先使用 默认TCP端口 843 向服务器发送XML字符串 "<policy-file-request/>\0"(共23个字节)来请求安全策略文件,注意这个字符串是通过xmlsocket协议发送的,xmlsocket协议需要在通讯的数据末尾追加一个null结尾字符'\0'(ASCII值为0,类似于C语言的null结尾字符串),因此总共发送23个字符到服务器请求安全策略文件。

2)Flash首先使用 默认843端口来获取安全策略文件,如果连接不成功,然后再用当前请求的地址向服务器发送安全策略文件请求,例如,如果向地址 192.168.100:843发起连接无效,则会继续向192.168.100:8080这个地址发送xmlsocket请求;

3)服务器端接收到TCP数据后,一定要先判断是否是Flash的安全策略请求,如果服务器收到了"<policy-file-request/>\0"这个字符串,则应该向客户端(指Flash播放器)返回安全策略文件,一个安全策略文件的示例内容如下:

 


<?xml version = "1.0" encoding = "utf-8"?>
<cross-domain-policy> 
<allow-access-from domain="*" to-ports="8168" /> 
<allow-access-from domain="*.iavcast.com" to-ports="10086,20086" />
<allow-access-from domain="*.huayisoft.net" to-ports="*" />
</cross-domain-policy>

一般只需要对以上文件的xml节点allow-access-from进行修改即可。

策略文件是用于告诉flash客户端, 允许哪些域的主机通过哪些端口进行连接。

 

注意发送时,策略文件的内容应该包含末尾的结尾 \0 字符,这是Flash的xmlsocket的要求。

 

 

 

 

 

### 解决WebSocket问题的后端配置 对于WebSocket问题,最推荐的方式是利用资源共享(CORS)。当涉及到WebSocket时,浏览器会先发起HTTP请求来完成握手阶段,在这个过程中可以通过设置响应头`Access-Control-Allow-Origin`允许特定源访问资源[^3]。 如果采用Nginx作为反向代理服务器,则可以在其配置文件中加入如下指令实现WebSocket的支持以及处理: ```nginx http { ... upstream websocket_backend { server backend_server_address:port; } server { listen 80; location /ws/ { proxy_pass http://websocket_backend; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; # 设置允许来自任何名的请求, 实际应用建议指定具体名 add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization'; if ($request_method = 'OPTIONS') { return 204; } } } } ``` 上述配置不仅支持了WebSocket协议升级所需的头部信息传递,还增加了必要的CORS相关头部以便于前端能够成功建立WebSocket连接并发送携带凭证的信息给服务端验证身份[^2]。 另外一种方式是在编写应用程序逻辑的时候直接控制返回给客户端的响应头。例如在一个基于Node.js环境下的Express框架项目里,可以这样做: ```javascript const express = require('express'); const WebSocket = require('ws'); // 创建 Express 应用程序实例 let app = express(); // 启动 HTTP 服务器 let server = require('http').createServer(app); // 初始化 WebSocket 服务器并与 HTTP 服务器绑定在一起工作 let wss = new WebSocket.Server({server}); wss.on('connection', function connection(ws) { ws.on('message', function incoming(message) { console.log('received: %s', message); // 发送消息回客户端 ws.send(`Hello, you sent -> ${message}`); }); // 当有新客户端连接上来之后立即推送一条欢迎语句过去 ws.send('Welcome to the WebSocket Server!'); // 主动关闭连接前触发此事件处理器函数执行清理操作 ws.on('close', ()=>{ console.log("client has disconnected."); }); }); app.use((req,res,next)=>{ res.header('Access-Control-Allow-Origin','*'); // 允许所有来源的请求 res.header('Access-Control-Allow-Headers','Origin, X-Requested-With, Content-Type, Accept'); next(); }) server.listen(8080,()=>{ console.log('listening on *:8080'); }); ``` 这段代码片段展示了如何创建一个简单的WebSocket服务器,并且设置了适当的HTTP响应头以应对可能存在的限制情况。需要注意的是这里的`'*'`代表接受所有的外部站点发起的请求,在实际生产环境中应当替换为具体的可信URL地址列表。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值