从iframe连接时出现socket.io错误

Question

So I have a couple applications on different servers all from inside of our network and I am using node.js and socket.io js to handle real time communication between them which when each is run separately works fine, but when I put application 2 inside an iframe on application 1 I get the following error "Blocked a frame with origin "http : // 192.128.1.97" from accessing a frame with origin "http : // intranet". Protocols, domains, and ports must match. " *note I added spaces in the urls above because the page was telling me links weren't allowed.

is there some way to allow the iframe to connect to socket.io? the code is pretty simple, but here is the server code...

/**
 * 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"))
});

application 1 code....

/**
 * 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();
})

and application 2 code....

// 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();
});

Sorry for the mass amount of code but trying to give all the conte4xt necessary. Essentially server is up and running, application 1 connects and gets a unique session id, then when application 2 tries to connect from the iframe I get the above mentioned error, when application 2 is not in an iframe it connects just fine and gets a session id. Please help if you can, I can't figure out why it is getting blocked and I really need this up and running. Thank you in advance for any help

Answer 1

You have encountered Same Origin Policy.

The simplest solution is to run the iframe from the same server.

Since you have access to IT time read up on CORS You will basically have to configure the server to allow XSS from your domain.

You can also try something like:

document.domain = "intranet"

Read up on it here