크로스 도메인 웹 개발을 사용하는 방법

이번에는 크로스 도메인 웹 개발 사용 방법을 알려드리겠습니다. 크로스 도메인 웹 개발 사용 시 주의 사항은 무엇인가요?

웹 개발 과정에서 모든 사람은 크로스 도메인과 접촉하게 됩니다. 많은 사람들은 크로스 도메인이 무엇인지, 웹 개발에서 크로스 도메인을 해결하는 방법을 모릅니다. 다음 기사에서는 이에 대한 자세한 소개를 제공합니다. 관심이 있으시면 교차 도메인 및 교차 도메인 솔루션에 대해 알아 보겠습니다.

크로스 도메인이란 무엇입니까?

개념은 다음과 같습니다. 프로토콜, 도메인 이름, 포트가 다른 한 다른 도메인으로 간주됩니다

다음은 특정 크로스 도메인 상황에 대한 자세한 설명입니다

URL	설명	통신 허용 여부
http://www.a.com/a.js, http://www.a.com/b.js	동일한 도메인 이름으로	허용
http://www.a.com/lab/a.js, http://www.a.com/script/b.js	동일한 도메인 이름 아래의 다른 폴더	허용
http://www.a.com:8000/a.js, http://www.a.com/b.js	동일한 도메인 이름, 다른 포트	허용되지 않음
http://www.a.com/a.js、https://www.a.com/b.js	동일한 도메인 이름, 다른 프로토콜	허용되지 않음
http://www.a.com/a.js、http://70.32.92.74/b.js	도메인 이름과 도메인 이름 해당 IP	허용되지 않음
http://www.a.com/a.js, http://script.a.com/b.js	메인 도메인은 동일하지만 하위 도메인은 다릅니다	허용되지 않음(이 경우 쿠키에 접근할 수 없습니다)
http://www.a.com/a.js, http://a.com/b.js	동일한 도메인 이름, 다른 2차 도메인 이름(위와 동일)	허용되지 않음(이 경우 쿠키에 접근할 수 없습니다)
http://www.cnblogs.com/a.js, http://www.a.com/b.js	다양한 도메인 이름	허용되지 않음

1. document.domain 크로스 도메인

원칙: 기본 도메인 이름은 동일하지만 하위 도메인 이름이 다른 페이지의 경우 document.domain을 설정하여 동일한 도메인으로 만들 수 있습니다document.domain让它们同域

限制：同域document提供的是页面间的互操作，需要载入iframe页面

下面几个域名下的页面都是可以通过document.domain跨域互操作的： http://a.com/foo, http://b.a.com/bar, http://c.a.com/bar。 但只能以页面嵌套的方式来进行页面互操作，比如常见的iframe方式就可以完成页面嵌套

// URL http://a.com/foo
var ifr = document.createElement('iframe');
ifr.src = 'http://b.a.com/bar'; 
ifr.onload = function(){
    var ifrdoc = ifr.contentDocument || ifr.contentWindow.document;
    ifrdoc.getElementsById("foo").innerHTML);
};
ifr.style.display = 'none';
document.body.appendChild(ifr);

上述代码所在的URL是http://a.com/foo，它对http://b.a.com/bar的DOM访问要求后者将 document.domain往上设置一级

// URL http://b.a.com/bar
document.domain = 'a.com'

document.domain只能从子域设置到主域，往下设置以及往其他域名设置都是不允许的， 在Chrome中给出的错误是这样的

Uncaught DOMException: Failed to set the 'domain' property on 'Document': 'baidu.com' is not a suffix of 'b.a.com'

二、有src的标签

原理：所有具有src属性的HTML标签都是可以跨域的，包括, <script></script>

限制：需要创建一个DOM对象，只能用于GET方法

在document.body中append一个具有src属性的HTML标签， src属性值指向的URL会以GET方法被访问，该访问是可以跨域的

其实样式表的标签也是可以跨域的，只要是有src或href的HTML标签都有跨域的能力

不同的HTML标签发送HTTP请求的时机不同，例如在更改src属性时就会发送请求，而script, iframe, link[rel=stylesheet]只有在添加到DOM树之后才会发送HTTP请求：

var img = new Image();
img.src = 'http://some/picture';        // 发送HTTP请求
var ifr = $('<iframe>', {src: 'http://b.a.com/bar'});
$('body').append(ifr);                  // 发送HTTP请求</iframe>

三、JSONP

原理：<script>是可以跨域的，而且在跨域脚本中可以直接回调当前脚本的函数</script>

限制：需要创建一个DOM对象并且添加到DOM树，只能用于GET方法

JSONP利用的是<script>可以跨域的特性，跨域URL返回的脚本不仅包含数据，还包含一个回调</script>

// URL: http://b.a.com/foo
var data = {
    foo: 'bar',
    bar: 'foo'
};
callback(data);

然后在我们在主站http://a.com中，可以这样来跨域获取http://b.a.com的数据：

// URL: http://a.com/foo
var callback = function(data){
    // 处理跨域请求得到的数据
};
var script = $('<script>&#39;, {src: &#39;http://b.a.com/bar&#39;});
$(&#39;body&#39;).append(script);</script>

其实jQuery已经封装了JSONP的使用，我们可以这样来

$.getJSON( "http://b.a.com/bar?callback=callback", function( data ){
    // 处理跨域请求得到的数据
});

$.getJSON与$.get的区别是前者会把responseText转换为JSON，而且当URL具有callback参数时， jQuery将会把它解释为一个JSONP请求，创建一个<script>标签来完成该请求</script>

四、navigation 对象

原理：iframe之间是共享navigator对象的，用它来传递信息

要求：IE6/7

有些人注意到了IE6/7的一个漏洞：iframe之间的window.navigator对象是共享的。 我们可以把它作为一个Messenger，通过它来传递信息。比如一个简单的委托：

// a.com
navigation.onData(){
    // 数据到达的处理函数
}
typeof navigation.getData === 'function' 
    || navigation.getData()

// b.com
navigation.getData = function(){
    $.get('/path/under/b.com')
        .success(function(data){
            typeof navigation.onData === 'function'
                || navigation.onData(data)
        });
}

与document.navigator类似，window.name

제한 사항: 동일한 도메인에 있는 문서는 페이지 간 상호 운용성을 제공하며 iframe 페이지를 로드해야 합니다

다음 도메인 이름 아래의 페이지는 document.domain을 통해 도메인 간에 상호 운용될 수 있습니다: http://a.com/foo, http://b.a.com/bar, http://c.a.com/bar. 하지만 페이지 상호 운용은 페이지 중첩 형식으로만 수행할 수 있습니다. 예를 들어 일반적인 iframe 메서드는 페이지 중첩

Access-Control-Allow-Origin: *              # 允许所有域名访问，或者
Access-Control-Allow-Origin: http://a.com   # 只允许所有域名访问

을 완료할 수 있습니다. 위 코드가 있는 URL은 http://a.com/foo이고 http://b.a.com/bar에 대한 DOM 액세스는 후자에서 document.domain을 한 수준 더 높게 설정해야 합니다

// URL: http://a.com/foo
var win = window.open('http://b.com/bar');
win.postMessage('Hello, bar!', 'http://b.com');

document.domain은 하위 도메인에서만 설정할 수 있으며 하위 도메인 이름으로는 설정이 허용되지 않습니다. Chrome에서 표시되는 오류는 다음과 같습니다

포착되지 않은 DOMException: '문서'에서 '도메인' 속성을 설정하지 못했습니다. 'baidu.com'은 'b.a.com'

의 접미사가 아닙니다. 2. src 태그가 있습니다

원칙: src 속성이 있는 모든 HTML 태그는 , <script>🎜🎜를 포함하여 크로스 도메인일 수 있습니다. 제한사항: GET 메소드에만 사용할 수 있는 DOM 객체를 생성해야 합니다🎜🎜 <code>document.body에 src 속성이 포함된 HTML 태그를 추가하세요. src 속성 값이 가리키는 URL은 GET 메소드를 사용하여 액세스할 수 있습니다🎜🎜. 실제로 스타일 시트의 <link> 태그는 도메인 간일 수도 있습니다. HTML 태그에 src 또는 href가 있는 한 도메인 간 기능도 있습니다🎜🎜 서로 다른 HTML 태그는 서로 다른 시간에 HTTP 요청을 보냅니다. 예를 들어 <img alt="크로스 도메인 웹 개발을 사용하는 방법" >는 src 속성이 변경될 때 요청을 보내는 반면, script, iframe, <code> link[rel=stylesheet]는 DOM 트리에 추가될 때에만 HTTP 요청이 전송됩니다: 🎜<pre class="brush:php;toolbar:false">// URL: http://b.com/bar window.addEventListener(&#39;message&#39;,function(event) { console.log(event.data); });🎜 3. JSONP🎜🎜 원리: <script>는 도메인 간일 수 있으며, 크로스 도메인 스크립트에서는 현재 스크립트의 기능을 직접 호출할 수 있습니다🎜🎜 제한 사항: DOM 개체를 생성하여 DOM 트리에 추가해야 하며, 이는 GET 메서드에만 사용할 수 있습니다🎜🎜 JSONP는 <script>의 도메인 간 기능을 활용합니다. 도메인 간 URL에서 반환된 스크립트에는 데이터뿐만 아니라 콜백도 포함됩니다🎜rrreee🎜 그런 다음 기본 웹사이트인 http://a.com에서 다음과 같이 도메인 전반에 걸쳐 http://b.a.com의 데이터를 얻을 수 있습니다. 🎜rrreee🎜 실제로 jQuery는 JSONP 사용을 캡슐화했으며 다음과 같이 할 수 있습니다 🎜rrreee🎜 $.getJSON과 $.get의 차이점은 전자는 responseText를 JSON으로 변환하고 URL에 콜백 매개변수가 있는 경우 jQuery는 이를 JSONP 요청으로 해석하고 <script> 태그를 생성하여 요청을 완료한다는 것입니다. 🎜 4. 탐색 개체🎜🎜 원칙: <a href="http://www.php.cn/code/651.html" target="_blank">navigator 객체는 iframe 간에 공유되며 정보를 전송하는 데 사용됩니다🎜🎜 요구사항: IE6/7🎜🎜 일부 사람들은 IE6/7의 취약점을 발견했습니다. <code>window.navigator 개체가 iframe 간에 공유됩니다. 이를 통해 정보를 전달하는 메신저로 사용할 수 있습니다. 예를 들어 간단한 위임은 다음과 같습니다. 🎜rrreeerrreee🎜 <code>document.navigator와 마찬가지로 <code>window.name도 현재 창의 모든 페이지에서 공유됩니다. 정보를 전달하는 데에도 사용할 수 있습니다. 동일한 고통스러운 방법은 Hash를 전달하는 것입니다(어떤 사람들은 이를 앵커 포인트라고 부릅니다). 이는 브라우저가 URL을 열 때마다 URL 뒤의 #xxx 부분이 유지되고 새 페이지가 여기에서 이전 페이지를 가져올 수 있기 때문입니다. .데이터🎜🎜 5. CORS(교차 도메인 리소스 공유)🎜🎜 원칙: 서버가 Access-Control-Allow-Origin HTTP 응답 헤더를 설정한 후 브라우저는 도메인 간 요청을 허용합니다🎜🎜 제한 사항: 브라우저는 HTML5를 지원해야 하며 POST, PUT 및 기타 방법을 지원할 수 있습니다🎜🎜 위에서 언급한 크로스 도메인 방식은 어떤 의미에서는 모두 해킹입니다. HTML5 표준에서 제안하는 크로스 도메인 리소스 공유(Cross Origin Resource Share, CORS)가 올바른 방식입니다. 이는 본질적으로 도메인 간 문제를 해결할 수 있는 PUT, POST 등과 같은 다른 HTTP 방법을 지원합니다. 🎜🎜 예를 들어 http://a.com에서 http://b.com의 데이터에 액세스하려는 경우 Chrome은 일반적으로 도메인 간 요청으로 인해 오류를 보고합니다🎜🎜 XMLHttpRequest는 http://b.com을 로드할 수 없습니다. 요청한 리소스에 'Access-Control-Allow-Origin' 헤더가 없으므로 'http://a.com'에 대한 액세스가 허용되지 않습니다.<p style="text-align: left;"> 错误原因是被请求资源没有设置Access-Control-Allow-Origin，所以我们在b.com的服务器中设置这个响应头字段即可<pre class="brush:php;toolbar:false">Access-Control-Allow-Origin: * # 允许所有域名访问，或者 Access-Control-Allow-Origin: http://a.com # 只允许所有域名访问<p style="text-align: left;"> 六、window.postMessage<p style="text-align: left;"> 原理：HTML5允许窗口之间<a href="http://www.php.cn/php/php-send-message.html" target="_blank">发送消息<p style="text-align: left;"> 限制：浏览器需要支持HTML5，获取窗口句柄后才能相互通信<p style="text-align: left;"> 这是一个安全的跨域通信方法，<code>postMessage(message,targetOrigin)也是HTML5引入的特性。 可以给任何一个window发送消息，不论是否同源。第二个参数可以是*但如果你设置了一个URL但不相符，那么该事件不会被分发。看一个普通的使用方式吧<pre class="brush:php;toolbar:false">// URL: http://a.com/foo var win = window.open(&#39;http://b.com/bar&#39;); win.postMessage(&#39;Hello, bar!&#39;, &#39;http://b.com&#39;);<pre class="brush:php;toolbar:false">// URL: http://b.com/bar window.addEventListener(&#39;message&#39;,function(event) { console.log(event.data); });<p style="text-align: left;"> 七、<a href="http://www.php.cn/wiki/178.html" target="_blank">访问控制安全的讨论<p style="text-align: left;"> 在HTML5之前，JSONP已经成为跨域的事实标准了，jQuery都给出了支持。 值得注意的是它只是Hack，并没有产生额外的安全问题。 因为JSONP要成功获取数据，需要跨域资源所在服务器的配合，比如资源所在服务器需要自愿地回调一个合适的函数，所以服务器仍然有能力控制资源的跨域访问<p style="text-align: left;"> 跨域的正道还是要使用HTML5提供的CORS头字段以及<code>window.postMessage， 可以支持POST, PUT等HTTP方法，从机制上解决跨域问题。 值得注意的是Access-Control-Allow-Origin头字段是资源所在服务器设置的， 访问控制的责任仍然是在提供资源的服务器一方，这和JSONP是一样的<p>相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！<p>推荐阅读：<p><br/><p><br/><!--content end--></script>

위 내용은 크로스 도메인 웹 개발을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!