iframe에서 연결할 때 socket.io 오류가 발생했습니다.

Question

다른 네트워크에있는 서버에 몇 가지 응용 프로그램이 있고 node.js와 socket.io js를 사용하여 각각의 응용 프로그램이 실행될 때 실시간 통신을 처리합니다. 별도로 잘 작동하지만 응용 프로그램 1의 iframe 안에 응용 프로그램 2를 놓으면 다음 오류가 발생합니다. "http : // 192.128.1.97"원본에서 "http : // intranet" 프로토콜, 도메인 및 포트가 일치해야합니다. " * note 링크가 허용되지 않는다는 페이지가 있기 때문에 위의 URL에 공백을 추가했습니다.

iframe을 socket.io에 연결할 수있는 방법이 있습니까?

/** 
* Server js file for node 
* this will handle all of the incoming requests from all the apps 
* and push them to the clients 
*/ 

var express = require("express"), 
    app = express(), 
    http = require("http").createServer(app), 
    io = require("socket.io").listen(http); 
    _ = require("underscore"); 

var participants = []; 

// setup the environment and tell node and express what it needs 
app.set("ipaddr", "192.168.1.76"); 
app.set("port", 8080); 
app.set("views", __dirname + "/views"); 
app.set("view engine", "jade"); 

//further environment setup telling node and express what to use to handle requests 
app.use(express.static("public", __dirname)); 
app.use(express.bodyParser()); 

//setup the default page 
app.get("/", function(request, response) { 
    //render the view page 
    //response.render("node_home"); 
    //just post a message to the screen 
    response.send("Server is up and running"); 
    //respond with a json object 
// reponse.json(200, {message: "Server is up and running"}); 
}); 

//setup a handler for requests to /message 
app.post("/message", function(request, response) { 
    var message = request.body.message; 
    if(_.isUndefined(message) || _.isEmpty(message.trin())) { 
     return response.json(400, {error: "Message is invalid"}); 
    } 

    var name = request.body.name; 
    io.sockets.emit("incomingMessage", {message: message, name: name}); 
    response.json(200, {message: "Message received"}); 
}) 

io.on("connection", function(socket) { 
    socket.on("newUser", function(data) { 
     participants.push({id: data.id, name: data.name}); 
     io.sockets.emit("newConnection", {participants: participants, badgeNumber: data.badgeNumber, id: data.id}) 
    }); 
    socket.on("nameChange", function(data) { 
     _findWhere(paticipants, {id: socket.id}).name = data.name; 
     io.sockets.emit("nameChanged", {id: data.id, name: data.name}) 
    }); 
    socket.on("disconnect", function() { 
     participants = _.without(participants, _.findWhere(participants, {id: socket.id})); 
     io.sockets.emit("userDisconnected", {id: socket.id, sender: "system"}) 
    }); 
    socket.on("phraseCheck", function(data) { 
     io.sockets.emit("checkPhrase", {id: data.id, phrase: data.phrase}); 
    }); 
    socket.on('newFluxClient', function(data) { 
    console.log(data); 
     io.sockets.emit('fluxConnection', {badgeNumber: data.badgeNumber, id: data.id}); 
    }); 
    socket.on('phraseAllowed', function(data) { 
     io.sockets.emit('allowedPhrase', {id: data.id, allowed: data.allowed}); 
    }); 
    socket.on('customFunction', function(data) { 
     console.log(data); 
    io.sockets.emit('customFunction', data); 
    }); 
}); 


//start the app and have it listen for incoming requests 
http.listen(app.get("port"), app.get("ipaddr"), function() { 
    console.log("Server up and running. Go to http://" + app.get("ipaddr") + ":" + app.get("port")) 
}); 

응용 한 코드 ...

/** 
* client js file 
* this will handle connecting to node and handle the incoming messages 
* as well as sending responses and messages to the server 
*/ 
var childSessionId = '', 
sessionId = '', 
socket = '', 
serverBaseUrl = '', 
participants = []; 

function init() { 
serverBaseUrl = 'http://192.168.1.76:8080'; 

socket = io.connect(serverBaseUrl); 

sessionId = ''; 
function updateParticipants(part) { 
    participants = part; 
    $("#participants").html(''); 
    for(var i=0; i<participants.length;i++) { 
     $("#participants").append('<span id="' + participants[i].id + '">' + participants[i].name + ' ' + (participants[i].id === sessionId ? '(You)' : '') + '<br /></span>'); 
    } 
} 
socket.on('connect', function() { 
    sessionId = socket.socket.sessionid; 
    console.log('Connected ' + sessionId); 
    socket.emit("newUser", {id: sessionId, name: page.user}); 
}); 
socket.on('userDisconnect', function(data) { 
    $('#' + data.id).remove(); 
}); 
socket.on('nameChanged', function(data) { 
    $('#' + data.id).html(data.name + ' ' + (data.id === sessionId ? '(You)' : '') + '<br />'); 
}); 
socket.on('newConnection', function(data) { 
    if(data.badgeNumber === page.userBadgeNumber) { 
     childSessionId = data.id; 
    } 
    updateParticipants(data.participants); 
}); 
socket.on('fluxConnection', function(data) { 
    console.log('flux connection data:'); 
    console.log(data); 
    if(data.badgeNumber === "**********") { 
     childSessionId = data.id; 
    } 
}); 
socket.on('incomingMessage', function(data) { 
    $("#messages").prepend('<b>' + data.name + '</b><br />' + data.message + '<hr />'); 
}); 
socket.on('error', function(reason) { 
    console.log('Unable to connect to server', reason); 
}); 
socket.on('customFunction', function(data) { 
    console.log(data); 

     data.data(); 

}); 
socket.on('checkPhrase', function(data) { 
    if(data.id === childSessionId) { 
     var phrases = shoppingcart.getPhrasesInCart(); 
     var allowed = ($.inArray(data.phrase, phrases) >= 0); 
     socket.emit('phraseAllowed', {id: data.id, allowed: allowed}); 
    } 
}); 

} 
$(document).ready(function() { 
    init(); 
}) 

및 응용 프로그램이 코드를 ... ... 코드는 매우 간단하지만, 여기에 서버 코드는

// NODE JS INITIALIZATION 
var socket = null; 
var sessionId = ''; 
function initialize_node(){ 

var serverBaseUrl = 'http://192.168.1.76:8080'; 

socket = io.connect(serverBaseUrl); 
sessionId = ''; 

socket.on('connect', function() { 
    sessionId = socket.socket.sessionId; 
    socket.emit('newFluxClient', {id: sessionId, badgeNumber: "PDX000022", name: "matthew.hicks"}); 
//  socket.emit('newUser', {id: sessionId, badgeNumber: user.badge, name: user.name}); 
}) 

socket.on('allowedPhrase', function(data) { 
    if(sessionId === data.id) { 
     alert("I'm a preddy little princess. Console logging data returned"); 
     console.log(data); 
     /* 
     functions to allow or disallow the phrase 
     based on data.allowed 
     it will be true if the phrase is in the shopping cart 
     and false if it is not 
     */ 
    } 
}); 

// $('#phrase').blur(function() { 
//  checkPhrase(); 
// }) 
}; 

function checkPhrase() { 
//var phrase = $('#phrase').val(); 
var phrase = "Shindigs in Ptown"; 
socket.emit('phraseCheck', {id: sessionId, phrase: phrase}); 
} 


$(document).ready(function() { 
initialize_node(); 
}); 

대량의 코드는 유감스럽게 생각하지만 필요한 모든 conte4xt를 제공하려고합니다. 본질적으로 서버가 작동하고 응용 프로그램 1이 연결되어 고유 한 세션 ID를 얻으면 응용 프로그램 2가 iframe에서 연결을 시도 할 때 위의 오류가 발생합니다. 응용 프로그램 2가 iframe에 없으면 세션이 올바르게 연결됩니다. 신분증. 가능하다면 도움을주십시오. 왜 막히고 있는지 이해할 수 없으며 실제로이를 실행해야합니다. 사전에 도움을 주셔서 감사합니다.

Answer 1

동일한 출처 정책을 발견했습니다.

가장 간단한 해결책은 동일한 서버에서 iframe을 실행하는 것입니다. 당신이 I.T 시간에 대한 액세스 CORS 에 읽어 가지고 있기 때문에

당신은 기본적으로 도메인에서 XSS을 허용하도록 서버를 구성해야합니다.

또한 같은 시도 할 수 있습니다 : 그것은 읽기 최대

document.domain = "intranet" 

하는 것은 할 수 here