是否可以使用数据 src 内部 document.domain 设置 iframe？答案

【问题标题】：Is it possible to set iframe with data src inner document.domain?是否可以使用数据 src 内部 document.domain 设置 iframe？
【发布时间】：2017-04-12 18:55:22
【问题描述】：

有一个带有纯 HTML src 的 iframe

<iframe id="myIframe"></iframe>

<script>
$.ajax({
    url: url,
    type: 'GET',
    success: function(data) {
        $('#myIframe').attr('src', 'data:text/html;charset=utf-8,' + data);
    }
});
</script>

如果要检查 iframe 的 document.domain，则它的值为 '' 或 null。

我想把 document.domain 放到 iframe 中。

为什么要放document.domain？作为响应 HTML 数据，有 angular2 应用程序，它使用 SystemJS 导入配置。它检查来源并发现 iframe 的来源不同。结果 - 异常。

如果我错了，请纠正我。

谢谢！

*我使用ajax设置iframe src的原因是我需要在请求中设置自定义headers到iframe src url。

【问题讨论】：

document.domain 只能绕过某些同源策略：1.协议，2.子域，3.端口。所以基本上仅限于同一个网站。
@zer00ne，iframe 中的内容位于域（站点）内。虽然在我使用 Ajax 请求并将结果作为 iframe 的源之后 - SystemJs 认为 iframe 位于''域中。
查看答案，如果我接近了，请告诉我。

标签： javascript ajax angular iframe

【解决方案1】：

这是你想要的隧道：

满足同源策略：
1. 相同的域（即example.com、domain.net 等...）
使用子域隧道，可以绕过一些同源策略：
1. 协议（即http://或https://）
2. 子域（即sub.domain.com、app.domain.com、docs.domain.com等...）
3. 端口（即example.com:80、example.com:8080、example.com:21）
片段必须出现在两个页面上。

片段

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
  <title>Tunnel</title>
  <style>
  </style>
</head>

<body>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script>
    /**
     * Replace $.ajax on your subdomain with a copy taken
     * from your base domain. All jQuery AJAX actions go
     * through $.ajax (i.e. $.get, $.post), so it's all good.
     */ // http://benv.ca/2011/03/07/subdomain-tunneling-with-jquery-and-document-domain/
    (function() {
      var iframe,
        onload,
        queue = [],

        // This has to be set both here and in iframe.html
        document.domain = 'example.com';

      // Back up this page's copy of $.ajax
      window.$._ajax = window.$.ajax;

      // We'll first replace $.ajax with a thin wrapper that both
      // loads our iframe tunnel and saves invocations until the
      // iframe is ready

      $.ajax = function(params) {

        if (!iframe) {

          // tunnel.html should be a bare bones html page that
          // includes a copy of jQuery, and sets document.domain
          // to 'example.com'

          iframe = $('<iframe>')
            .attr('src', 'http://example.com/tunnel.html')
            .load(onload)
            .appendTo('head')[0];
        }

        // Save calls to $.ajax, execute when we're ready
        queue.push(params);
      };

      function onload() {

        // Our prize: a version of $.ajax that can communicate safely
        // with our base domain
        window.$.ajax = iframe.contentWindow.jQuery.ajax;

        // Flush queued $.ajax calls
        $.each(queue, function(_, params) {
          $.ajax(params);
        });

        queue = null;
      }
    })();
  </script>
</body>

</html>

【讨论】：