扩展和内容JavaScript文件之间的双向通信 [英] two way communication between extension and content javascript files

问题描述

我试图完成我的firefox侧边栏扩展中的双向通信请求响应，我有一个名为event.js的文件驻留在内容端，我有另一个名为sidebar.js的文件，它位于xul 。我可以使用dispatchEvent方法从event.js到sidebar.js文件进行通信。我的事件反过来在sidebar.js文件中引发了一个XMLHttpRequest，该文件命中服务器并发回响应。现在，在这里，我无法将响应传递给event.js文件。我想要在event.js文件中访问响应。直到现在，我只能实现单向沟通。代码如下：

 <$> 
 
 
代码如下：
 c $ c> // event.js文件
 //这个事件发生在我需要将文本保存到服务器的文本框的模糊处
 
 function saveEvent（）{
 
 var element = document.getElementById（fetchData）; 
 element.setAttribute（urlPath，http：// localhost：8080 / event？id = 12）; 
 element.setAttribute（jsonObj，convertToList）; 
 element.setAttribute（methodType，POST）; 
 document.documentElement.appendChild（element）; 
 
 var evt = document.createEvent（Events）; 
 evt.initEvent（saveEvent，true，true）; 
 element.dispatchEvent（evt）; 
 
 //通过添加监听器获取响应
 document.addEventListener（dispatchedResponse，function（e）{MyExtension.responseListener（e）;}，false，true）; 
 
 
 $ b var MyExtension = {
 responseListener：function（evt）{
 receivedResponse（evt.target.getAttribute（responseObject））; 
 
 
 
函数receivedResponse（event）{
 alert（'response：'+ event）; 
 
 
 $ b // sidebar.js文件
 
 window.addEventListener（load，function（event）{
 
 var saveAjaxRequest = function（urlPath，jsonObj，methodType，evtTarget）{
 
 var url = urlPath; 
 var request = Components.classes [@ mozilla.org/xmlextras/xmlhttprequest; 1]。createInstance（Components.interfaces.nsIXMLHttpRequest）; 
 request.onload = function（aEvent）{
 window.alert（Response Text：+ aEvent.target.responseText）; 
 saveResponse = aEvent.target.responseText; 
 
 //在这里，我再次尝试从服务器获得的响应返回到原点，但无法通过它... 
 
 evtTarget.setAttribute（responseObject，saveResponse）; 
 document.documentElement.appendChild（evtTarget）; 
 
 var evt = document.createEvent（dispatchedRes）; //错误行不支持操作代码：9
 evt.init事件（dispatchedResponse，true，false）; 
 evtTarget.dispatchEvent（evt）; 
}; 
 request.onerror = function（aEvent）{
 window.alert（Error Status：+ aEvent.target.status）; 
}; 
 //window.alert (methodType ++ url）; 
 request.open（methodType，url，true）; 
 request.send（jsonObj）; 
}; 
 
 $ b this.onLoad = function（）{
 
 document.addEventListener（saveEvent，function（e）{MyExtension.saveListener（e）;}，假，真）; 
 
 
 
 
 $ b var MyExtension = 
 {
 saveListener：function（evt）{
 saveAjaxRequest evt.target.getAttribute（urlPath），evt.target.getAttribute（jsonObj），evt.target.getAttribute（methodType），evt.originalTarget）; 
} 
}; 
 
 
}）; 
  

解决方案

fetchData 元素放到边栏文档中？您应该将其保留在原处，否则您的内容代码将无法接收该事件。另外，使用内容文档来创建事件。最后，自定义事件的 document.createEvent（）参数应该是Events。因此，在 //这里我再次尝试注释之后的代码应该如下所示：

  evtTarget.setAttribute（responseObject，saveResponse）; 
 
 var evt = evtTarget.ownerDocument.createEvent（Events）; 
 evt.initEvent（dispatchedResponse，true，false）; 
 evtTarget.dispatchEvent（evt）; 
  

请注意，您在这里显示的代码是一个巨大的安全漏洞 - 它允许任何 网站来制作任何 HTTP请求，并返回结果，所以它实质上禁用同源政策。至少您需要检查与您通话的网站是否允许这样做（例如，它属于您的服务器）。但即使如此，它仍然存在安全风险，因为服务器响应可能会被改变（例如，公共WLAN上的攻击者），或者您的服务器可能被黑客攻击 - 而且攻击者可以访问敏感数据（例如，他可以触发请求到mail.google.com，如果受害者正好登录，他将能够阅读所有的电子邮件数据）。所以请减少这种通用性，只允许请求一些网站。

i am trying to accomplish a two way communication request response in my firefox sidebar extension, i have a file named event.js this resides on the content side, i have another file called sidebar.js file which is residing in the xul. I am able to communicate from event.js to sidebar.js file using the dispatchEvent method. my event in turn raises a XMLHttpRequest in sidebar.js file which hits the server and sends back the response. Now, here i am unable to pass the response to the event.js file. I want the response to be accessed in the event.js file. Till now i have achieved only one way communication. Please help me in getting the two way communication.

Code is as follows:

// event.js file
// This event occurs on blur of the text box where i need to save the text into the server

function saveEvent() {

 var element = document.getElementById("fetchData");
            element.setAttribute("urlPath", "http://localhost:8080/event?Id=12");
            element.setAttribute("jsonObj", convertToList);
            element.setAttribute("methodType", "POST");
            document.documentElement.appendChild(element);

            var evt = document.createEvent("Events");
            evt.initEvent("saveEvent", true, true);
            element.dispatchEvent(evt);

//Fetching the response over here by adding the listener
document.addEventListener("dispatchedResponse", function (e) { MyExtension.responseListener(e); }, false, true);

}

var MyExtension = {
    responseListener: function (evt) {
        receivedResponse(evt.target.getAttribute("responseObject"));
    }
}

function receivedResponse(event) {
    alert('response: ' + event);
}


// sidebar.js file

window.addEventListener("load", function (event) {

 var saveAjaxRequest = function (urlPath, jsonObj, methodType, evtTarget) {

        var url = urlPath;
        var request = Components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"].createInstance(Components.interfaces.nsIXMLHttpRequest);
        request.onload = function (aEvent) {
            window.alert("Response Text: " + aEvent.target.responseText);
            saveResponse = aEvent.target.responseText;

            //here i am again trying to dispatch the response i got from the server back to the origin, but unable to pass it...

            evtTarget.setAttribute("responseObject", saveResponse);
            document.documentElement.appendChild(evtTarget);

            var evt = document.createEvent("dispatchedRes"); // Error line "Operation is not supported" code: "9"
            evt.initEvent("dispatchedResponse", true, false);
            evtTarget.dispatchEvent(evt);
        };
        request.onerror = function (aEvent) {
            window.alert("Error Status: " + aEvent.target.status);
        };
        //window.alert(methodType + " " + url);
        request.open(methodType, url, true);
        request.send(jsonObj);
    };


this.onLoad = function () {

document.addEventListener("saveEvent", function (e) { MyExtension.saveListener(e); }, false, true);


}


var MyExtension =
        {
            saveListener: function (evt) {
                saveAjaxRequest(evt.target.getAttribute("urlPath"), evt.target.getAttribute("jsonObj"), evt.target.getAttribute("methodType"), evt.originalTarget);
            }
        };


});

解决方案

Why are you moving your fetchData element into the sidebar document? You should leave it where it is, otherwise your content code won't be able to receive the event. Also, use the content document to create the event. Finally, document.createEvent() parameter for custom events should be "Events". So the code after your //here i am again trying comment should look like:

evtTarget.setAttribute("responseObject", saveResponse);

var evt = evtTarget.ownerDocument.createEvent("Events");
evt.initEvent("dispatchedResponse", true, false);
evtTarget.dispatchEvent(evt);

Please note however that your code as you show it here is a huge security vulnerability - it allows any website to make any HTTP requests and get the result back, so it essentially disables same-origin policy. At the very least you need to check that the website talking to you is allowed to do it (e.g. it belongs to your server). But even then it stays a security risk because server response could be altered (e.g. by an attacker on a public WLAN) or your server could be hacked - and you would be giving an attacker access to sensitive data (for example he could trigger a request to mail.google.com and if the victim happens to be logged in he will be able to read all email data). So please make this less generic, only allow requests to some websites.

这篇关于扩展和内容JavaScript文件之间的双向通信的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！