Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie verwende ich Javascript, um domänenübergreifend zu erreichen? Fassen Sie verschiedene Möglichkeiten von domänenübergreifendem JavaScript zusammen

伊谢尔伦
Freigeben: 2017-06-02 10:12:03
Original
1713 Leute haben es durchsucht

Beginnen Sie mit der Domäne

Domäne: Die Domäne ist die Sicherheitsgrenze des WIN2K-Netzwerksystems. Wir wissen, dass die grundlegendste Einheit eines Computernetzwerks eine „Domäne“ ist. Dies gilt nicht nur für WIN2K, aber Active Directory kann über eine oder mehrere Domänen laufen. Auf einem unabhängigen Computer bezieht sich eine Domäne auf den Computer selbst. Eine Domäne kann auf mehrere physische Standorte verteilt sein. Gleichzeitig kann ein physischer Standort in verschiedene Netzwerksegmente unterteilt werden seine Beziehung zu Vertrauensbeziehungen mit anderen Domänen. Wenn mehrere Domänen über Vertrauensbeziehungen verbunden sind, kann Active Directory von mehreren Vertrauensdomänen gemeinsam genutzt werden
Domänenbaum: Der Domänenbaum besteht aus mehreren Domänen, die gemeinsam genutzt werden. Die gleiche Tabelle Struktur und Konfiguration bilden einen durchgängigen Namensraum. Domänen in einem Baum sind durch Vertrauensbeziehungen verbunden, und Active Directory enthält einen oder mehrere Domänenbäume. Domänen im Domänenbaum sind durch bidirektionale transitive Vertrauensstellungen verbunden. Da diese Vertrauensbeziehungen bidirektional und transitiv sind, kann eine neu erstellte Domäne in einer Domänenstruktur oder Gesamtstruktur sofort eine Vertrauensbeziehung mit jeder anderen Domäne in der Domänenstruktur oder Gesamtstruktur aufbauen. Diese Vertrauensbeziehungen ermöglichen einen Single-Sign-On-Prozess, der Benutzer in allen Domänen in einer Domänenstruktur oder Gesamtstruktur authentifiziert. Dies bedeutet jedoch nicht unbedingt, dass ein authentifizierter Benutzer in allen Domänen in der Domänenstruktur über dieselben Rechte und Berechtigungen verfügt. Da es sich bei Domänen um Sicherheitsgrenzen handelt, müssen Benutzern für jede Domäne entsprechende Rechte und Berechtigungen zugewiesen werden.
Je tiefer die Domänenebene im Domänenbaum, desto niedriger stellt die Ebene A dar.
Zum Beispiel hat die Domäne zhidao.baidu.com (Baidu bekannt) eine niedrigere Ebene als die Domäne baidu.com (Baidu), da sie über zwei Beziehungsebenen verfügt, während baidu.com nur eine Ebene hat.

Was ist domänenübergreifend?

Standardmäßig kann ein XHR-Objekt nur auf Ressourcen in derselben Domäne zugreifen wie die Seite, die es enthält. Diese Sicherheitsstrategie kann bestimmte böswillige Verhaltensweisen verhindern. Allerdings ist die Implementierung sinnvoller Cross-Origin-Anfragen auch für die Entwicklung bestimmter Browseranwendungen von entscheidender Bedeutung.
Solange es einen Unterschied im Protokoll, Domänennamen oder Port gibt, wird es als eine andere Domäne betrachtet. Unterschiede in Ports und Protokollen können nur im Hintergrund gelöst werden. Was wir lösen wollen, ist das Problem unterschiedlicher Domainnamen

Wie man Domains kreuzt

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

1.CORS (Cross-Origin Resource Sharing, Cross-Origin Resource Sharing) ist ein Arbeitsentwurf des W3C das definiert: Wie sollen Browser und Server kommunizieren, wenn Cross-Origin-Ressourcen verwendet werden? Die Grundidee von CORS besteht darin, benutzerdefinierte HTTP-Header zu verwenden, um dem Browser die Kommunikation mit dem Server zu ermöglichen, um zu bestimmen, ob die Anfrage oder Antwort erfolgreich sein soll oder fehlschlagen soll.
2. Die Implementierung dieser Funktion ist sehr einfach: Senden Sie einfach einen Antwortheader vom Server.

Browserunterstützung:

  • IE 8+

  • Firefox 3.5 +

  • Oper 12+

  • Safari 4+

  • Chrome 3+

Angenommen, unsere Seite oder Anwendung befindet sich bereits auf a.com und wir planen, mit b.com zu beginnen Anfrage zum Extrahieren von Daten. Wenn wir AJAX direkt zum Anfordern verwenden, schlägt die Anforderung im Allgemeinen fehl und der Browser gibt einen Fehler zurück.
Mit CORS kann b.com Anfragen von .a.com zulassen, indem einfach ein Header hinzugefügt wird.
Das Folgende ist die Einstellung mit PHP. Das Zeichen „*“ zeigt an, dass jede Domain Anfragen an unseren Server senden darf:

header{"Access-Control-Allow-Origin: *"}
Nach dem Login kopieren

CORS-Kompatibilitätsschreibmethode

 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();
 }
Nach dem Login kopieren

(2) JSONP (JSON mit mit Padding gefülltem JSON oder parametrisiertem JSON)

In js können wir XMLHttpRequest zwar nicht direkt verwenden, um Daten auf verschiedenen Domänen anzufordern. Es ist jedoch möglich, JS-Skriptdateien in verschiedenen Domänen auf der Seite einzuführen. JSONP wird mithilfe dieser Funktion implementiert.

JSONP besteht aus zwei Teilen: Rückruffunktion und Daten. Die Rückruffunktion ist die Funktion, die auf der Seite aufgerufen werden soll, wenn die Antwort eintrifft, und die Daten sind die JSON-Daten, die an die Rückruffunktion übergeben werden.

Zum Beispiel:

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

Zuerst definiert das erste Skript-Tag eine Funktion, die Daten verarbeitet.
Dann lädt das zweite Skript-Tag eine js-Datei, data.php ist die Adresse Wo sich die Daten befinden, aber da sie als js eingeführt werden, muss data.php schließlich eine ausführbare js-Datei zurückgeben. Nachdem die js-Datei erfolgreich geladen wurde, wird die von uns im URL-Parameter angegebene Funktion ausgeführt und unser erforderlicher json Daten werden als Parameter übergeben. PHP sollte also so aussehen

<?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;;//输出
?>
Nach dem Login kopieren

Das Ausgabeergebnis lautet schließlich: dosomething(['a','b','c']);
Wie aus dem Obigen ersichtlich ist, jsonp erfordert einen Server. Die Seite auf dem Terminal wird entsprechend koordiniert.

Vor- und Nachteile von JSONP
Vorteile:

它的兼容性更好,在更加古老的浏览器中都可以运行,不需要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>
Nach dem Login kopieren

data.html

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

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>
Nach dem Login kopieren

(四) 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>
Nach dem Login kopieren

script.a.com/b.html页面

<script>
 document.domain = &#39;a.com&#39;;
</script>
Nach dem Login kopieren

这样俩个页面就可以通过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>
Nach dem Login kopieren

数据接收端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>
Nach dem Login kopieren



Das obige ist der detaillierte Inhalt vonWie verwende ich Javascript, um domänenübergreifend zu erreichen? Fassen Sie verschiedene Möglichkeiten von domänenübergreifendem JavaScript zusammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!