從iframe連接時出現socket.io錯誤

Question

所以我在網絡內部的不同服務器上都有幾個應用程序，並且我正在使用node.js和socket.io js來處理它們之間的實時通信，當分別運行它們時，它們可以正常工作，但是當我將應用程序2放入內部時應用程序1上的iframe時，出現以下錯誤“通過訪問源為“ http：// intranet”的幀阻止了源為“ http：// 192.128.1.97”的幀。協議，域和端口必須匹配。“ *請注意，我在上面的網址中添加了空格，因為該頁面告訴我不允許鏈接。

有什么方法可以讓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"))
});

應用程序1代碼....

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

和應用2代碼。

// 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中時，它連接得很好，並獲得了會話ID。 如果可以的話，請幫忙，我不知道為什么它被阻止了，我真的需要啟動它並運行它。 預先感謝您的任何幫助

Answer 1

您已經遇到了相同來源政策。

最簡單的解決方案是從同一服務器運行iframe。

由於您可以訪問IT時間，可以在CORS上進行閱讀，因此，您基本上必須將服務器配置為允許來自您域的XSS 。

您也可以嘗試以下方法：

document.domain = "intranet"

在這里閱讀