同源策略-JavaScript调用PHP [英] Same origin policy -- JavaScript calling PHP

问题描述

我知道这是一个受欢迎的话题，但是我还没有找到一个全面的答案.

我正在尝试为我们的客户"创建一种简单的方法，将Google Map放置在他们的网站上，以绘制客户(或其子集)在地图上的位置.客户位于一个MySQL数据库中，该数据库由PHP脚本即时转换为XML(例如Google的示例).这在我的网站上工作正常，但是当我在另一个网站上尝试时，不允许xmlHTTPRequest查看PHP，因为它在另一个域上.

我可以通过在另一个域上编写另一个PHP文件来避免这种情况，而该文件只是读取原始域上的PHP文件.但是，并非我们所有的客户都会在其服务器上运行PHP.有什么方法可以使用JavaScript从我们的数据库中返回XML结果?

几点:

1. 构成xmlHTTPRequest的JavaScript仍位于我们的服务器上-我们的客户从脚本标签链接到它.我以为可能就够了，但是原始"(无论如何，根据Chrome)仍然被视为域#2

2. 这很棒:如果我在xmlHTTPRequest中使用绝对引用(例如request.open('GET'，'http://mydomain.com/api/foo.php'，true))，那么它会在IE中失败，但是如果我使用相对引用('/api/foo.php')，它将起作用.

3. 我对此不太了解，但是我可以使用JSON吗?我见过: '脚本src ="http://..../someData.js?callback = some_func" 但是不知道如何使"someData.js"看起来像JSON? (我在功能方面进行了很多思考，这可能是错误的吗?).

4. 我尝试添加: header("Access-Control-Allow-Origin:*"); 到输出XML的PHP​​的顶部，但是我可以说的并没有做太多！

5. 如果我确实在客户端服务器上使用PHP包装器，那么使用cURL请求而不是简单的file_get_contents或fopen有什么好处?

很抱歉，有很多问题，但是任何指导将不胜感激.

非常感谢

垫子

解决方案

一种简单的解决方法是让您的PHP脚本返回类似以下内容的内容:

callback_function(YOUR_DATA);

然后在客户端站点上包含的JS脚本中，动态插入一个<script>，其中src指向您的PHP脚本:

(function() {
    var scriptElement   = document.createElement('script');
    scriptElement.type  = 'text/javascript';
    scriptElement.async = true;
    scriptElement.src   = 'http://example.org/yourScript.php?data=...';
    var container       = document.getElementsByTagName('script')[0];
    container.parentNode.insertBefore(scriptElement, container);
})();

该技术称为 JSONP ，并且应该完全按照您的要求进行；)

解决该问题的另一种方法是在内容安全策略中允许跨域XMLHttpRequest.但我认为目前只有Firefox 4支持该功能.

I know that this is a popular topic, but I've yet to find an answer that's completely comprehensive.

I'm trying to create a simple way for our 'customers' to place a Google Map on their website, which plots the position of our customers (or a subset thereof) on the map. The customers are in a MySQL database which is turned into XML on-the-fly by a PHP script (as per Google's example). This works fine on my website, but when I try it on another website the xmlHTTPRequest is not allowed to look at the PHP as it's on another domain.

I can circumvent this by writing another PHP file on the other domain which simply reads the PHP file on the original domain. But not all our customers will have PHP running on their servers. Is there any way that I can return the XML results from our database using JavaScript?

A couple of points:

1. The JavaScript that makes the xmlHTTPRequest still sits on our server -- our clients link to it from a script tag. I thought that might be enough, but the 'origin' (according to Chrome, anyway) is still seen as domain#2

2. This is great: if I use an absolute reference in the xmlHTTPRequest (e.g. request.open('GET', 'http://mydomain.com/api/foo.php', true)) then it will fail in IE, but if I use a relative reference ('/api/foo.php') it will work.

3. I don't know enough about it, but could I use JSON? I've seen: 'script src="http://..../someData.js?callback=some_func"' but don't know how, I would make 'someData.js' look like JSON? (I'm thinking very much in terms of functions, which probably is incorrect?).

4. I've tried adding: header("Access-Control-Allow-Origin: *"); to the top of the PHP that outputs the XML, but it's not really doing much that I can tell!

5. If I do use a PHP wrapper on the client's server, what's the advantage of using a cURL request, rather that simple file_get_contents or fopen?

Sorry, lots of questions, but any guidance would be greatly appreciated.

Massive thanks,

Mat

解决方案

An easy way around this is to let your PHP script return something like:

callback_function(YOUR_DATA);

Then in the JS script included on the clients site you dynamically insert a <script> which has src pointing to your PHP script:

(function() {
    var scriptElement   = document.createElement('script');
    scriptElement.type  = 'text/javascript';
    scriptElement.async = true;
    scriptElement.src   = 'http://example.org/yourScript.php?data=...';
    var container       = document.getElementsByTagName('script')[0];
    container.parentNode.insertBefore(scriptElement, container);
})();

This technique is called JSONP and should do exactly what you want ;)

Another way around the problem would be allowing cross-domain XMLHttpRequest in the Content Security Policy. But I think only Firefox 4 supports that right now.

这篇关于同源策略-JavaScript调用PHP的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！