语言►JavaScript►document

JavaScript中的document.domain

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2020/01/24/JavaScript%E4%B8%AD%E7%9A%84document-domain/

摘要

本文主要讲述了：

  1. 作用

正文

作用

获取域名

示例：

http://localhost:5500/learn_document/index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script>
      console.log(document.domain);
    </script>
  </body>
</html>

输出：

1
localhost

修改域名以绕过同源政策的限制

由于同源政策的限制，浏览器禁止网页与跨源<iframe>通信。例如：父页面访问跨源<iframe>的contentWindow或contentDocument会报错。

在某些情况下，修改域名可以绕过同源政策的限制。

注：浏览器可以区分document.domain的值是否被修改过（包括document.domain = document.domain）

注意：只能修改为当前域名或当前域名的上级域名，且必须遵循”Public Suffix List”，否则会报错

例如：

  • a.b.c.example.com可以将域名修改为b.c.example.com、c.example.com、example.com，但不得将域名修改为foo.com
  • a.github.io不得将域名修改为github.io（违反”Public Suffix List”）

示例：

http://a.example.com/index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <iframe src="http://b.example.com"></iframe>
    <script>
      window.addEventListener('load', function () {
        document.domain = 'example.com';
        const foo = document.querySelector('iframe');
        console.log(foo.contentWindow);
        console.log(foo.contentDocument);
      });
    </script>
  </body>
</html>

http://b.example.com/index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script>
      window.addEventListener('load', function () {
        document.domain = 'example.com';
      });
    </script>
  </body>
</html>

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2020/01/24/JavaScript%E4%B8%AD%E7%9A%84document-domain/

本文对你有帮助？请支持我

支付宝
微信