iframe 上传者权限

Question

我在 iframe 中有此文件上传器，但是当我将其嵌入到另一个网站时，它不允许我这样做，Firebug 显示此错误：

http://www.mywebsite.com> 的权限被拒绝从 http://www.myotherwebsite.com> 获取属性 Window.document。

这就是这一行：

$('iframe', top.document).css('border', '1px green solid'); 

上传完成后，我尝试用边框设置 iframe 的样式。

我看到了其他问题，解决方案是创建一个服务器端代理，但我不知道如何创建一个代理使其工作并允许 jQuery 执行。

干杯。

赏金已添加。

Answer 1

服务器端代理可以帮助您解决这个问题。虽然浏览器只能使用同一域对其服务器进行 AJAX 调用，但服务器本身可以不受限制地对任何其他服务器进行调用。

假设您需要向 Yahoo 的天气 API 发出 AJAX 请求。由于由于相同的域策略，您无法从 www.example.com 向 www.yahoo.com 发出请求，因此解决方法是先向您的服务器发出调用，然后让您的服务器向 Yahoo 发出请求。下面是执行此操作的代理示例：

REQUEST: http://www.example .com/weather.php?zip=97015

<? // Yahoo Weather proxy

$zip_code = $_REQUEST["zip"];

// default to Portland, OR for testing
if($zip_code == null || $zip_code == '')
    $zip_code = "97206";

// delegate request to the other server, circumventing the same-domain policy.
$request = "http://weather.yahooapis.com/forecastrss?p=".$zip_code;

$response = file_get_contents($request);

// Retrieve HTTP status code
list($version,$status_code,$msg) = explode(' ',$http_response_header[0], 3);


// Check the HTTP Status code
switch($status_code) {
    case 200:
            // Success
            break;
    case 503:
            die('Your call to Yahoo Web Services failed and returned an HTTP status of 503. That means: Service unavailable. An internal problem prevented us from returning data to you.');
            break;
    case 403:
            die('Your call to Yahoo Web Services failed and returned an HTTP status of 403. That means: Forbidden. You do not have permission to access this resource, or are over your rate limit.');
            break;
    case 400:
            // You may want to fall through here and read the specific XML error
            die('Your call to Yahoo Web Services failed and returned an HTTP status of 400. That means:  Bad request. The parameters passed to the service did not match as expected. The exact error is returned in the XML response.');
            break;
    default:
            die('Your call to Yahoo Web Services returned an unexpected HTTP status of:' . $status_code);
}


echo $response;
?>

现在，就您的情况而言，您希望在文件上传完成后设置 iframe 的样式。一个简单的解决方案是轮询父文档的服务器，并让代理轮询您的上传服务器，直到找到文件。找到文件后，响应可用于调用更改 iframe 样式的 JQuery 代码。

为了使代理概念发挥作用，您嵌入上传程序的每个网站都需要部署自己的同域代理，该代理将检查您的上传网站是否存在文件，然后将该响应返回给客户端。

父文档还需要以某种方式知道正在上传的文件的名称。由于相同的域策略，您可能无法确定文件名，这在使用代理检查文件是否存在时提出了挑战。你怎么知道你要检查什么？

Answer 2

您好，前几天我在尝试找到一种在 iFrame 和使用名称加载它们的窗口之间来回通信的方法时看到了一篇文章。

http://softwareas.com/cross-domain-communication-with-iframes

演示 - http://ajaxify.com/run/crossframe/duo/

// site 1 code
<iframe name="frame1" src="site2">

所以说你的第一个站点使用上面的 iFrame 加载到您的第二个站点中。第二个站点代码应添加此代码。

//site 2 code
$(something).load('url', function() {
    parent.frames["frame1"].css('border', '1px green solid');
});

我相信您还可以从站点 1 对 iFrame 进行函数调用：

//site 1 code
parent.frames["frame1"].functionName(variables);

Answer 3

服务器端代理

apache 配置

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so

ProxyRequests Off

<Proxy *>
Order deny,allow
Allow from all
</Proxy>

ProxyPass /foo http://mywebsite.com/
ProxyPassReverse /foo http://mywebsite.com/ 

我希望这会有所帮助

，因此如果您创建从 www.bar.com 到 www.bar.com/foo 的请求，apache 将传递到 www.mywebsite.com

Answer 4

我会采取相反的方式，从包含的文档中删除边框，在 iframe 内添加一个假边框并进行更改，跨域问题得到解决。

Answer 5

框架不就是一些 HTML 内容吗？不能直接在 iframe 内的 body 标签周围添加边框吗？

如果你担心内容会因为 2 个额外的像素而移动，那么只需在开头放置一个相同尺寸的透明边框即可。

Answer 6

你可以这样做：

$("iframe").css('border', '1px greensolid'); 上传完成后，

我在这里创建了一个小提琴示例：

http://jsfiddle.net/Mutant_Tractor/erAdS/8/

Answer 7

您可以轻松地应用easyXDM来解决这个问题 - 它甚至有一个演示如何使用响应数据进行跨域上传。

在这篇博文中我也解释其背后的基础知识。

Answer 8

如果您拥有所有网站，包括您的上传服务器和您要部署上传程序的网站，那么也许一些简单的 DNS 技巧可以帮助您克服这一问题。

• 假设您的上传服务器域是：upload.example.com。
• 假设您的服务器是 www.example.com。

在上述情况下，您可以通过设置 document.domain 属性来启用跨站点脚本：

document.domain = "example.com";

这允许 www.example.com 与 upload.example.com iframe 进行通信。

假设您拥有这些网站，子域之间通信的能力可以帮助您在其他 Web 服务器之间进行通信。

如果域不同，您该怎么办？

我们假设以下情况：

• upload.example.com 是您的上传服务器。
• www.domain.com 是您的网站，它是包含上传器 iframe 的父文档。

现在，我们再次假设您拥有这两个域名，或者至少有权访问这些设置。根据我们上面关于在子域上启用跨站点脚本的知识，您可以使用一些 DNS 技巧来提供帮助。

• 在 DNS 管理器中，为 upload.domain.com 创建 CNAME，并将该子域指向与 upload.example.com 相同的服务器。完成后，upload.example.com 和 upload.domain.com 都指向同一服务器和 PHP 应用程序。
• 设置 document.domain="domain.com";
• 在 www.domain.com 中，嵌入 upload.domain.com 并在 中 www.example.com，嵌入 upload.example.com & set document.domain="example.com";

您可以看到，在这两种情况下，您的网站域名都与上传者域名匹配，并且 document.domain 属性与域匹配。

当您调用 $('iframe', top.document).css('border', '1px greensolid'); 时，您不会收到任何权限错误。

总之，只需确保对于您嵌入上传器 iframe 的任何网站，您已为该上传器创建了与网站域匹配的 CNAME 别名，并且在上传器和网站中都设置了 document.domain 属性。

您可以使用 iframe 中的 document.referrer 属性动态确定父文档的上下文，以确定域属性应设置为：

// uploader file code

// array split by period to get domain ["http://uploader", "example", "com/iframe/uploadFile", "php"]
var domainSplit = document.referrer.split(".");  

// the 2nd place in the array is the domain.  You may need to improve this for deeper subdomains
document.domain = domainSplit[1];   

注意：假设您使用 Apache 和 PHP。如果是这样，您可以为所有 upload.XYZ.com 域创建 ServerAlias 条目。如果您使用其他服务器，大多数服务器都有某种设置服务器别名的方法。