recherche

Maison >interface Web >js tutoriel >Introduction à la politique d'origine JavaScript et à l'accès entre domaines

Introduction à la politique d'origine JavaScript et à l'accès entre domaines

不言
不言original
2018-07-03 17:19:112009parcourir

Cet article présente principalement la politique de même origine JavaScript et l'accès inter-domaines. Il analyse en détail les principes, la mise en œuvre, l'utilisation et les précautions associées de la politique de même origine JavaScript et l'accès inter-domaines avec des exemples. il peut Pour référence,

Les exemples de cet article décrivent la politique JavaScript de même origine et l'accès inter-domaines. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

1. Quelle est la politique de même origine

Pour comprendre le croisement -domaine, vous devez d'abord comprendre la stratégie politique de même origine. La politique de même origine est une politique de sécurité très importante mise en œuvre sur les navigateurs pour des raisons de sécurité.

Quelle est la même origine :

L'URL se compose du protocole, du nom de domaine, du port et du chemin Si le protocole, le nom de domaine et le port de deux URL sont identiques. , cela signifie qu'ils ont la même origine.

Même politique d'origine :

La même politique d'origine du navigateur empêche les "documents" ou les scripts provenant de sources différentes de lire ou de définir certaines propriétés du "document" actuel. (Les chapeaux blancs parlent de sécurité Web [1])

Les scripts chargés à partir d'un domaine ne sont pas autorisés à accéder aux attributs de document d'un autre domaine.

Par exemple :

Par exemple, une page de site Web malveillante intègre la page de connexion d'une banque via une iframe (les deux proviennent de sources différentes, s'il n'y a pas de restriction d'origine, le script javascript est activé). la page Web malveillante Le nom d'utilisateur et le mot de passe peuvent être obtenus lorsque l'utilisateur se connecte à la banque.

Dans le navigateur, les balises telles que 3f1c4e4b6b16bbbd69b2ee476dc4f83a, a1f02c36ba31691bcfe87b2722de723b, d5ba1642137c3f32f4f4493ae923989c, 2cdf5bf648cf2f33323966d7f58a7f3f peuvent charger des ressources inter-domaines sans être restreintes par la même origine, mais sont limitées par le navigateur. Les autorisations JavaScript sont désactivées afin qu'il ne puisse pas lire ou écrire le contenu chargé.

De plus, la politique de même origine limite uniquement les documents HTML des pages Web, et les autres ressources statiques chargées telles que javascript, css, images, etc. sont toujours considérées comme appartenant à la même origine.

Exemple de code (http://localhost:8080/ et http://localhost:8081 ont des sources différentes en raison de ports différents) :

http://localhost:8080/test. html 

<html>
  <head><title>test same origin policy</title></head>
  <body>
    <iframe id="test" src="http://localhost:8081/test2.html"></iframe>
    <script type="text/javascript">
      document.getElementById("test").contentDocument.body.innerHTML = "write somthing";
    </script>
  </body>
</html>

http://localhost:8081/test2.html

<html>
  <head><title>test same origin policy</title></head>
  <body>
    Testing.
  </body>
</html>

Vous obtiendrez l'erreur suivante dans Firefox :

Erreur : Autorisation refusée pour accéder à la propriété 'body'

L'attribut de domaine de l'objet Document stocke le serveur qui charge le document. Le nom d'hôte peut être défini.

Par exemple, si les pages de "blog.php.cn" et "bbs.php.cn" définissent toutes deux document.domain sur "php.cn", alors les scripts des deux sous-domaines peuvent interagir chacun avec autre.

Pour des raisons de sécurité, il ne peut pas être défini sur d'autres domaines principaux. Par exemple, //www.php.cn/ ne peut pas être défini sur sina.com

2. . Les requêtes de domaine inter-domaines Ajax

Ajax (XMLHttpRequest) sont limitées par la politique de même origine.

Ajax peut interagir avec des serveurs distants via XMLHttpRequest De plus, XMLHttpRequest est un objet Javascript pur. Ce processus d'interaction est effectué en arrière-plan et n'est pas facilement remarqué par les utilisateurs.

Par conséquent, XMLHTTP a en fait dépassé les limitations de sécurité du Javascript d'origine.

Par exemple :

Supposons qu'un site Web fasse référence au javascript d'autres sites. Ce site est compromis et ajouté au javascript pour obtenir la saisie de l'utilisateur et le soumettre à d'autres sites via ajax, afin qu'il puisse. être approvisionné. Collecter continuellement des informations.

Ou bien, un site Web peut injecter du XSS dans un script javascript en raison d'une vulnérabilité. Ce script peut obtenir des informations sur les utilisateurs via ajax et les soumettre à d'autres sites via ajax, afin que les informations puissent être collectées en continu.

Si nous voulons profiter de la capacité d'interaction asynchrone sans actualisation de XMLHTTP, mais ne sommes pas disposés à enfreindre de manière flagrante la politique de sécurité de Javascript, l'alternative consiste à ajouter des restrictions strictes de même origine à XMLHTTP.

Cette politique de sécurité est très similaire à la politique de sécurité d’Applet. La limitation d'IFrame est qu'il ne peut pas accéder aux données dans le DOM HTML inter-domaines, tandis que XMLHTTP limite fondamentalement la soumission de requêtes inter-domaines. (En fait, il est mentionné ci-dessous que CORS a assoupli les restrictions)

Avec le développement de la technologie Ajax et des services réseau, les exigences en matière de cross-domaine deviennent de plus en plus fortes. Ce qui suit présente la technologie inter-domaines d'Ajax.

2.1 JSONP

La technologie JSONP n'a en fait rien à voir avec Ajax. Nous savons que la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a peut charger des scripts javascript inter-domaines, et que les scripts chargés et le document actuel appartiennent au même domaine. Ainsi, les données et fonctions du script peuvent être appelées/accessibles dans le document. Si les données du script JavaScript sont générées dynamiquement, l'interaction des données avec le serveur peut être réalisée en créant dynamiquement une balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a

JSONP utilise la capacité inter-domaines de la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a pour obtenir un accès aux données inter-domaines, en demandant un script JavaScript généré dynamiquement avec un nom de fonction de rappel comme paramètre. Parmi eux, la fonction de rappel est une fonction JavaScript du document local. Le script généré dynamiquement côté serveur génère des données, et la fonction de rappel est appelée dans le code avec les données générées comme paramètre. Lorsque ce script est chargé dans le document local, la fonction de rappel est appelée.

Page de test du premier site (http://localhost:8080/test.html) : 

<script src="http://localhost:8081/test_data.js">
  <script>
    function test_handler(data) {
      console.log(data);
    }
</script>

服务器端的Javascript脚本（http://localhost:8081/test_data.js）：

test_handler(&#39;{"data": "something"}&#39;);

为了动态实现JSONP请求，可以使用Javascript动态插入3f1c4e4b6b16bbbd69b2ee476dc4f83a标签：

<script type="text/javascript">
    // this shows dynamic script insertion
    var script = document.createElement(&#39;script&#39;);
    script.setAttribute(&#39;src&#39;, url);
    // load the script
    document.getElementsByTagName(&#39;head&#39;)[0].appendChild(script);
</script>

JSONP协议封装了上述步骤，jQuery中统一是现在AJAX中(其中data type为JSONP)：

http://localhost:8080/test?callback=test_handler

为了支持JSONP协议，服务器端必须提供特别的支持[2]，另外JSONP只支持GET请求。

2.2 Proxy

使用代理方式跨域更加直接，因为SOP的限制是浏览器实现的。如果请求不是从浏览器发起的，就不存在跨域问题了。

使用本方法跨域步骤如下：

1. 把访问其它域的请求替换为本域的请求

2. 本域的请求是服务器端的动态脚本负责转发实际的请求

各种服务器的Reverse Proxy功能都可以非常方便的实现请求的转发，如Apache httpd + mod_proxy。

Eg.

为了通过Ajax从http://localhost:8080访问http://localhost:8081/api，可以将请求发往http://localhost:8080/api。

然后利用Apache Web服务器的Reverse Proxy功能做如下配置：

ProxyPass /api http://localhost:8081/api

2.3 CORS

2.3.1 Cross origin resource sharing

“Cross-origin resource sharing (CORS) is a mechanism that allows a web page to make XMLHttpRequests to another domain. Such "cross-domain" requests would otherwise be forbidden by web browsers, per the same origin security policy. CORS defines a way in which the browser and the server can interact to determine whether or not to allow the cross-origin request. It is more powerful than only allowing same-origin requests, but it is more secure than simply allowing all such cross-origin requests.” ----Wikipedia[3]

通过在HTTP Header中加入扩展字段，服务器在相应网页头部加入字段表示允许访问的domain和HTTP method，客户端检查自己的域是否在允许列表中，决定是否处理响应。

实现的基础是JavaScript不能够操作HTTP Header。某些浏览器插件实际上是具有这个能力的。

服务器端在HTTP的响应头中加入（页面层次的控制模式）：

Access-Control-Allow-Origin: example.com
Access-Control-Request-Method: GET, POST
Access-Control-Allow-Headers: Content-Type, Authorization, Accept, Range, Origin
Access-Control-Expose-Headers: Content-Range
Access-Control-Max-Age: 3600

多个域名之间用逗号分隔，表示对所示域名提供跨域访问权限。"*"表示允许所有域名的跨域访问。

客户端可以有两种行为：

1. 发送OPTIONS请求，请求Access-Control信息。如果自己的域名在允许的访问列表中，则发送真正的请求，否则放弃请求发送。

2. 直接发送请求，然后检查response的Access-Control信息，如果自己的域名在允许的访问列表中，则读取response body，否则放弃。

本质上服务端的response内容已经到达本地，JavaScript决定是否要去读取。

Support: [Javascript Web Applications]
* IE >= 8 (需要安装caveat)
* Firefox >= 3
* Safari 完全支持
* Chrome 完全支持
* Opera 不支持

 2.3.2 测试

测试页面http://localhost:8080/test3.html使用jquery发送Ajax请求。

<html>
    <head><title>testing cross sop</title></head>
    <body>
      Testing.
      <script src="jquery-2.0.0.min.js"></script>
      <script type=&#39;text/javascript&#39;>
        $.ajax({
          url: &#39;http://localhost:8000/hello&#39;,
          success: function(data) {
            alert(data);
          },
          error: function() {
            alert(&#39;error&#39;);
          }
        });
      </script>
    </body>
</html>

测试Restful API(http://localhost:8000/hello/{name})使用bottle.py来host。

from bottle import route, run, response
@route(&#39;/hello&#39;)
def index():
  return &#39;Hello World.&#39;
run(host=&#39;localhost&#39;, port=8000)

测试1：

测试正常的跨域请求的行为。

测试结果：

1. 跨域GET请求已经发出，请求header中带有

    Origin    http://localhost:8080

2. 服务器端正确给出response

3. Javascript拒绝读取数据，在firebug中发现reponse为空，并且触发error回调

测试2：

测试支持CORS的服务器的跨域请求行为。

对Restful API做如下改动，在response中加入header：

def index():
  #Add CORS header#
  response.set_header("Access-Control-Allow-Origin", "http://localhost:8080")
  return &#39;Hello World.&#39;

测试结果：

1. 跨域GET请求已经发出，请求header中带有

Origin    http://localhost:8080

2. 服务器端正确给出response

3. 客户端正常获取数据

测试3：

测试OPTIONS请求获取CORS信息。
对客户端的Ajax请求增加header：

$.ajax({
 url: &#39;http://localhost:8000/hello&#39;,
 headers: {&#39;Content-Type&#39;: &#39;text/html&#39;},
 success: function(data) {
   alert(data);
 },
 error: function() {
   alert(&#39;error&#39;);
 }
});

对Restful API做如下改动：

@route(&#39;/hello&#39;, method = [&#39;OPTIONS&#39;, &#39;GET&#39;])
def index():
  if request.method == &#39;OPTIONS&#39;:
    return &#39;&#39;
  return &#39;Hello World.&#39;

测试结果：

1. Ajax函数会首先发送OPTIONS请求
2. 针对OPTIONS请求服务器
3. 客户端发现没有CORS header后不会发送GET请求

测试4：

增加服务器端对OPTIONS方法的处理。

对Restful API做如下改动：

@route(&#39;/hello&#39;, method = [&#39;OPTIONS&#39;, &#39;GET&#39;])
def index():
    response.headers[&#39;Access-Control-Allow-Origin&#39;] = &#39;http://localhost:8080&#39;
    response.headers[&#39;Access-Control-Allow-Methods&#39;] = &#39;GET, OPTIONS&#39;
    response.headers[&#39;Access-Control-Allow-Headers&#39;] = &#39;Origin, Accept, Content-Type&#39;
    if request.method == &#39;OPTIONS&#39;:
      return &#39;&#39;
    return &#39;Hello World.&#39;

测试结果：

1. Ajax函数会首先发送OPTIONS请求
2. 针对OPTIONS请求服务器
3. 客户端匹配CORS header中的allow headers and orgin后会正确发送GET请求并获取结果

测试发现，Access-Control-Allow-Headers是必须的。

CORS协议提升了Ajax的跨域能力，但也增加了风险。一旦网站被注入脚本或XSS攻击，将非常方便的获取用户信息并悄悄传递出去。

4. Cookie 同源策略

Cookie中的同源只关注域名，忽略协议和端口。所以https://localhost:8080/和http://localhost:8081/的Cookie是共享的。

5. Flash/SilverLight跨域

浏览器的各种插件也存在跨域需求。通常是通过在服务器配置crossdomain.xml[4]，设置本服务允许哪些域名的跨域访问。

客户端会首先请求此文件，如果发现自己的域名在访问列表里，就发起真正的请求，否则不发送请求。

<?xml version="1.0"?>
  <!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
  <cross-domain-policy>
  <allow-access-from domain="*"/>
  <allow-http-request-headers-from domain="*" headers="*"/>
</cross-domain-policy>

通常crossdomain.xml放置在网站根目录。

6. 总结

互联网的发展催生了跨域访问的需求，各种跨域方法和协议满足了需求但也增加了各种风险。尤其是XSS和CSRF等攻击的盛行也得益于此。

了解这些技术背景有助于在实际项目中熟练应用并规避各种安全风险。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

Javascript实现商品秒杀倒计时（时间与服务器时间同步）的解析

JS实现的JSON序列化操作

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Javascript implémente l'analyse du compte à rebours des ventes flash du produit (heure synchronisée avec l'heure du serveur)Article suivant：Javascript implémente l'analyse du compte à rebours des ventes flash du produit (heure synchronisée avec l'heure du serveur)

Articles Liés

Voir plus