크로스 도메인을 구현하기 위해 자바스크립트를 사용하는 방법은 무엇입니까? 도메인 간 JavaScript의 여러 가지 방법을 요약합니다.

도메인부터 시작하겠습니다

도메인: 도메인은 WIN2K 네트워크 시스템의 보안 경계입니다. 우리는 컴퓨터 네트워크의 가장 기본적인 단위가 "도메인"이라는 것을 알고 있습니다. 이는 WIN2K에만 있는 것은 아니지만 Active Directory는 하나 이상의 도메인을 통해 실행될 수 있습니다. 독립적인 컴퓨터에서 도메인은 컴퓨터 자체를 의미합니다. 동시에 물리적 위치는 여러 네트워크 세그먼트로 나누어져 있으며 각 도메인에는 고유한 보안 정책이 있습니다. 다른 도메인과의 신뢰 관계와의 관계. 여러 도메인이 신뢰 관계를 통해 연결되면 Active Directory는 여러 신뢰 도메인에서 공유될 수 있습니다.
도메인 트리: 도메인 트리는 동일한 테이블 구조와 구성을 공유하는 여러 도메인으로 구성되어 연속적인 네임스페이스를 형성합니다. 트리의 도메인은 신뢰 관계를 통해 연결되며 Active Directory에는 하나 이상의 도메인 트리가 포함됩니다. 도메인 트리의 도메인은 양방향 전이적 신뢰 관계를 통해 연결됩니다. 이러한 신뢰 관계는 양방향 및 전이적이므로 도메인 트리 또는 포리스트에 새로 생성된 도메인은 도메인 트리 또는 포리스트의 다른 모든 도메인과 즉시 신뢰 관계를 설정할 수 있습니다. 이러한 신뢰 관계를 통해 도메인 트리 또는 포리스트의 모든 도메인에서 사용자를 인증하는 Single Sign-On 프로세스가 허용되지만 인증된 사용자가 반드시 도메인 트리의 모든 도메인에서 동일한 권한과 사용 권한을 갖는다는 의미는 아닙니다. 도메인은 보안 경계이므로 사용자에게 도메인별로 적절한 권한과 사용 권한을 할당해야 합니다.
도메인 트리에서 도메인 수준이 깊을수록 "."은 수준을 나타냅니다.
예를 들어, zhidao.baidu.com(Baidu로 알려짐) 도메인은 관계 수준이 두 개이지만 baidu.com은 수준이 하나뿐이므로 도메인 baidu.com(Baidu)보다 낮은 수준입니다.

교차 도메인이란 무엇입니까?

기본적으로 XHR 개체는 해당 개체가 포함된 페이지와 동일한 도메인에 있는 리소스에만 액세스할 수 있습니다. 이 보안 전략은 특정 악의적인 행동을 방지할 수 있습니다. 그러나 특정 브라우저 애플리케이션을 개발하려면 합리적인 교차 출처 요청을 구현하는 것도 중요합니다.
프로토콜, 도메인 이름, 포트가 서로 다른 경우에는 서로 다른 도메인으로 간주됩니다. 포트 및 프로토콜의 차이는 백그라운드를 통해서만 해결될 수 있습니다. 우리가 해결해야 할 것은 서로 다른 도메인 이름의 문제

도메인 교차 방법

(1) CORS(Cross-Origin Resource Sharing, Cross-Origin Resource Sharing)

1. CORS(Cross-Origin Resource Sharing(교차 원본 리소스 공유)는 브라우저와 서버가 교차 원본 리소스에 액세스해야 할 때 통신하는 방법을 정의하는 W3C 작업 초안입니다. CORS의 기본 아이디어는 사용자 정의 HTTP 헤더를 사용하여 브라우저가 서버와 통신하여 요청 또는 응답이 성공할지 실패할지 여부를 결정하도록 하는 것입니다.
2. 이 기능을 구현하는 것은 매우 간단합니다. 서버에서 응답 헤더를 보내면 됩니다.

브라우저 지원:

• IE 8+

• Firefox 3.5+

• Opera 12+

• Safari 4+

• Chrome 3+

우리 페이지나 애플리케이션이 이미 a.com에 있고 b.com에서 데이터 추출을 요청할 계획이라고 가정해 보겠습니다. 일반적으로 AJAX를 직접 사용하여 요청하면 요청이 실패하고 브라우저에서 오류를 반환합니다.
CORS를 사용하면 b.com은 헤더만 추가하여 .a.com의 요청을 허용할 수 있습니다.
다음은 PHP를 사용한 설정입니다. "*" 기호는 모든 도메인이 우리 서버에 요청을 제출할 수 있음을 의미합니다.

header{"Access-Control-Allow-Origin: *"}

CORS 호환성 작성 방법

 function createCORSRequest(method, url){
 var xhr = new XMLHttpRequest();
 //非IE浏览器
 if ("withCredentials" in xhr){
 xhr.open(method, url, true);
 //IE浏览器
 } else if (typeof XDomainRequest != "undefined"){
 vxhr = new XDomainRequest();
 xhr.open(method, url);
 } else {
 xhr = null;
 }
 return xhr;
 }
 var request = createCORSRequest("get", "http://example.com/page/");
 if (request){
 request.onload = function(){
 //对request.responseText 进行处理
 };
 request.send();
 }

(2) JSONP(패딩이 채워진 JSON 또는 파라메트릭 JSON)

js에서는 XMLHttpRequest를 직접 사용하여 다른 도메인의 데이터를 요청할 수 없지만 페이지의 다른 도메인에 js 스크립트 파일을 도입하는 것이 가능합니다. jsonp는 이 기능을 사용하여 구현된

JSONP로 구성됩니다. 두 부분: 콜백 함수와 데이터. 콜백 함수는 응답이 올 때 페이지에서 호출되어야 하는 함수이고, 데이터는 콜백 함수에 전달되는 JSON 데이터입니다.

예:

<script type="text/javascript">
 function dosomething(jsondata){
 //处理获得的json数据
 }
</script>
<script src="http://example.com/data.php?callback=dosomething"></script>

먼저 첫 번째 스크립트 태그는 데이터 처리를 위한 함수를 정의합니다.
그런 다음 두 번째 스크립트 태그는 js 파일을 로드합니다. data.php는 데이터의 주소이지만 js로 도입되므로 data.php는 실행 가능한 js 파일을 반환해야 합니다. 마지막으로 js 파일이 성공적으로 로드된 후 url 매개변수에 지정한 함수가 실행되고 필요한 json 데이터가 매개변수로 전달됩니다. 따라서 PHP는 다음과 같아야 합니다

<?php
$callback = $_GET[&#39;callback&#39;];//得到回调函数名
$data = array(&#39;a&#39;,&#39;b&#39;,&#39;c&#39;);//要返回的数据
echo $callback.&#39;(&#39;.json_encode($data).&#39;)&#39;;//输出
?>

마지막으로 출력 결과는 다음과 같습니다: dosomething(['a','b','c']);
위에서 보면 jsonp에는 서버의 해당 협력이 필요하다는 것을 알 수 있습니다. -사이드 페이지.

JSONP
장점:

의 장점과 단점

它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；
能够直接访问响应文本，支持在浏览器与服务器之间双向通信
缺点：

JSONP 是从其他域中加载代码执行。如果其他域不安全，很可能会在响应中夹带一些恶意代码，而此时除了完全放弃JSONP 调用之外，没有办法追究。因此在使用不是你自己运维的Web 服务时，一定得保证它安全可靠。
它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
(三) window.name

window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。

这里有三个页面：

a.com/app.html：应用页面。
a.com/proxy.html：代理文件，一般是一个没有任何内容的html文件，需要和应用页面在同一域下。
b.com/data.html：应用页面需要获取数据的页面，可称为数据页面。

app.html

<iframe src="b.com/data.html" id="iframe"></iframe>
<script>
 var iframe = document.getElementById("iframe");
 iframe.src = "a.com/proxy.html";//这是一个与a.com/app.html同源的页面
 iframe.onload = function(){
 var data = iframe.contentWindow.name; //取到数据
 }
</script>

data.html

<script>
 // 这里是要传输的数据，大小一般为2M，IE和firefox下可以大至32M左右
 // 数据格式可以自定义，如json、字符串
 window.name = "数据"
</script>

iframe首先的地址是b.com/data.html，所以能取到window.name数据;
但是iframe现在跟app.html并不同源，app.html无法获取到数据，所以又将iframe的链接跳转至a.com/proxy.html这个代理页面，现在app.html跟iframe就同源了。

注意：iframe由b.com/data.html跳转到a.com/proxy.html页面，window.name的value是不变的

获取数据以后销毁这个iframe，释放内存；这也保证了安全（不被其他域frame js访问）

<script type="text/javascript">
 iframe.contentWindow.document.write(&#39;&#39;);
 iframe.contentWindow.close();
 document.body.removeChild(iframe);
</script>

(四) document.domain + iframe

对于主域相同而子域不同的例子，可以通过设置document.domain的办法来解决。
具体的做法是可以在a.com/a.html 和script.a.com/b.html 两个文件中分别设置document.domain = 'a.com'，然后通过a.html文件中创建一个iframe，去控制iframe的contentDocument，这样两个js文件之间就可以“交互”了。
a.com/a.html页面

<iframe src="http://script.a.com/b.html" frameborder="0"></iframe>
<script>
 document.domain = &#39;a.com&#39;;
</script>

script.a.com/b.html页面

<script>
 document.domain = &#39;a.com&#39;;
</script>

这样俩个页面就可以通过js相互访问各种属性和对象了。

document.domain的设置是有限制的，我们只能把document.domain设置成自身或更高一级的父域，且主域必须相同。例如：a.b.example.com 中某个文档的document.domain 可以设成a.b.example.com、b.example.com 、example.com中的任意一个，但是不可以设成 c.a.b.example.com,因为这是当前域的子域，也不可以设成baidu.com,因为主域已经不相同了。

(五) HTML5的window.postMessage

window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。
window.postMessage允许两个窗口/帧之间跨域发送数据消息。从本质上讲，window.postMessage是一个跨域的无服务器垫片的Ajax。

用法：
otherWindow.postMessage(message, targetOrigin);

• otherWindow: 对接收信息页面的window的引用。可以是页面中iframe的contentWindow属性；window.+open的返回值；通过name或下标从window.frames取到的值。

• message: 所要发送的数据，string类型。

• targetOrigin: 用于限制otherWindow，“*”表示不作限制
  

数据发送端a.com/index.html中的代码：

<iframe id="ifr" src="b.com/index.html"></iframe>
<script type="text/javascript">
window.onload = function() {
 var ifr = document.getElementById(&#39;ifr&#39;);
 var targetOrigin = &#39;http://b.com&#39;; // 设定接收端的域，*则为不限制   
 ifr.contentWindow.postMessage(&#39;I was there!&#39;, targetOrigin);
};
</script>

数据接收端b.com/index.html中的代码：

<script type="text/javascript">
 window.addEventListener(&#39;message&#39;, function(event){
 // 通过origin属性判断消息来源地址
 if (event.origin == &#39;http://a.com&#39;) {
 alert(event.data); // 弹出"I was there!"
 alert(event.source); // 对a.com、index.html中window对象的引用
   // 但由于同源策略，这里event.source不可以访问window对象
 }
 }, false);
</script>

위 내용은 크로스 도메인을 구현하기 위해 자바스크립트를 사용하는 방법은 무엇입니까? 도메인 간 JavaScript의 여러 가지 방법을 요약합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!