JSONP在谷歌浏览器扩展中的通信 [英] JSONP communication in a Google Chrome extension

问题描述

我在撰写谷歌浏览器扩展程序。我想用jQuery使用jsonp跨域通信。这里是ajax代码：

  $。ajax（{
 type：'POST'，
 url ：$（this）.attr（'action'），
 data：$（this）.serialize（），
 contentType：'application / json; charset = utf-8'，
 dataType：'jsonp'，
成功：function（）{
 alert（'A'）; 
} 
}）; 
  

这会调用以下URL：

< a href =http://sgsync.dev.kreatura.hu/api/signup/?callback=jQuery1710883696963544935_1327347078860&nick=&pass=&_=1327347087371 =nofollow> http://sgsync.dev .kreatura.hu / api / signup /？callback = jQuery1710883696963544935_1327347078860& nick =& pass =& _ = 1327347087371

服务器回答200 OK此数据：

  jQuery1710883696963544935_1327347078860（{messages：[Minden mez\\\ő kit\\\ölt\\\ése k\\ \\ u00f6telez \\\ő！]，errorCount：1}）
  

之后，此错误消息：

 无法找到变量：jQuery1710883696963544935_1327347078860 
  

我尝试了一切，但我无法理解这个问题。请帮助我！

请注意，我编写了服务器端代码，因此也可能存在问题。

提前致谢！

解决方案

部分原因令人困惑，因为jQuery API混淆了Ajax问题调用vs JSONP调用。当使用 $。ajax 和 dataType：'jsonp'时，这不会执行Ajax调用（不使用XHR通信）而是使用动态脚本注入和回调。这意味着类型：'POST'将没有任何意义（因为动态脚本注入只能在GET时起作用）并且所有数据将被编码到请求的URL中，而不是作为邮件正文发送。如果这确实是为了发布数据，那么不应该使用JSONP（因为敏感数据将以明文形式发送）。

正如其中一条评论，此问题 在本答案中针对来自Chrome内容脚本的JSONP请求以及从内容脚本中使用XHR提出。

在Chrome扩展中的JSONP请求，回调函数不存在？

关于Chrome扩展程序，当您在Chrome扩展程序中使用内容脚本时，他们会将强制强制转换为沙箱。您可以在Chrome扩展内容脚本中移除请求中的 dataType：'jsonp'，并且此调用应该可以正常工作。如果这不起作用，您可以直接使用XHRHttpRequest进行调用：

  var xhr = new XMLHttpRequest（）; 
 xhr.setRequestHeader（Content-Type，application / json; charset = utf-8）; 
 xhr.open（POST，$（this）.attr（'action'），true）; 
 xhr.onreadystatechange = function（）{
 if（xhr.readyState == 4）{
 alert（A）; 
 
 
 xhr.send（$（this）.serialize（））; 
  

关于其他浏览器，我不确定每个特定的插件环境如何处理跨域XHR电话（或者如果他们甚至允许它在第一位）。这是普通浏览器所不允许的（除非使用 easyXDM ）。

I'm writing a Google Chrome extension. I want to use jsonp cross-domain communication with jQuery. Here is the ajax code:

$.ajax({
    type : 'POST',
    url : $(this).attr('action'),
    data : $(this).serialize(),
    contentType: 'application/json; charset=utf-8',
    dataType : 'jsonp',
    success : function() {
        alert('A');
    }
});

This calls this URL:

http://sgsync.dev.kreatura.hu/api/signup/?callback=jQuery1710883696963544935_1327347078860&nick=&pass=&_=1327347087371

The server answers 200 OK with this data:

jQuery1710883696963544935_1327347078860({"messages":["Minden mez\u0151 kit\u00f6lt\u00e9se k\u00f6telez\u0151!"],"errorCount":1})

After that, i got this error message:

Can't find variable: jQuery1710883696963544935_1327347078860

I tried everything and i can't understand the problem. Please help me!

Note that i programed the server-side code, so there could be a problem with that too.

Thanks in advance!

解决方案

Part of the reason this is so confusing is because jQuery API confuses the issue of Ajax calls vs JSONP calls. When using $.ajax with dataType: 'jsonp' this does not do an Ajax call (no XHR communication is used) it instead uses dynamic script injection with a callback. This means that the type: 'POST' will have no meaning (since dynamic script injection only works as a GET would work) and that all of the data will be encoded into the URL of the request as opposed to being send over as a post body. If this is truly intended to "POST" data then JSONP should not be used (since sensitive data will be sent in clear text).

As mentioned in one of the comments, this issue was addressed in this answer with regards to JSONP requests from Chrome content scripts and using XHR from a content script.

JSONP request in chrome extension, callback function doesn't exist?

With regards to Chrome Extensions, they do force you into a sandbox when using the "conten scripts" in a chrome extension. You can remove the dataType: 'jsonp' form the request in the Chrome Extension content script and this call should work. If that does not work, you might trying making the call directly using the XHRHttpRequest:

var xhr = new XMLHttpRequest();
xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");
xhr.open("POST", $(this).attr('action'), true);
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
       alert("A");
  }
}
xhr.send($(this).serialize());

With regards to other browsers, I am not sure how each of their specific plugin enviroments handle making cross domain XHR calls (or if they even allow it in the first place). This is something that is NOT allowed from normal browsers (unless using something like easyXDM).

这篇关于JSONP在谷歌浏览器扩展中的通信的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！