浏览器同源策略和跨域的实现方法_如何判断两个页面同源-CSDN博客

本文深入解析了浏览器的同源策略(SOP)，探讨了其对Web安全的重要性及其实现原理。同时，介绍了几种常见的跨域解决方案，包括JSONP和通过设置document.domain实现跨域的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

同源策略

同源策略（Same Origin Policy，SOP）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

所谓同源是指域名，协议，端口相同。

当一个浏览器的两个tab页中分别打开百度和谷歌的页面时，当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。而如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以google.com下的js脚本采用ajax读取baidu.com里面的文件数据是会报错的。

如何判断是否是同源，可以查看该表：

不受同源策略限制的【切记（重点知识）】：

页面中的链接，重定向以及表单提交是不会受到同源策略限制的。
跨域资源的引入是可以的，但是js不能读写加载的内容。如嵌入到页面中的<script src="..."></script>，<img>，<link>，<iframe>等。例如：JSONP就是利用 <script> 标签的跨域能力实现跨域数据的访问，请求动态生成的JavaScript脚本同时带一个callback函数名作为参数。服务端收到请求后，动态生成脚本产生数据，并在代码中以产生的数据为参数调用callback函数。

比如下面的代码，我们访问 192.168.10.14下的一个文件，然后用js读取其数据，显示在页面上：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax</title>
    <script type="text/javascript">
        function foo(){
            var xmlhttp=new XMLHttpRequest();
            xmlhttp.open("GET","http://192.168.10.14/1.txt",true);
            xmlhttp.send();
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    document.getElementById("my").innerHTML=xmlhttp.responseText;  
                }
            }
        }
    </script>
</head>
<body>
    <button id="btn" οnclick="foo()">确定</button>
    <p id="my">hello,word!</p>
</body>
</html>

当点击确定按钮读取 http://192.168.10.14/1.txt 的内容，并替换 hello,word! 的时候，在浏览器的控制台下发生了如下错误。这就是跨域请求错误！

跨域的实现

跨域资源共享(Cross Origin Resourse-Sharing)：受前面所讲的浏览器同源策略的影响，不是同源的脚本不能操作其他源下面的对象。想要操作另一个源下的对象是就需要跨域。

跨域的实现方法

1、降域 document.domain

同源策略认为域和子域属于不同的域，如：
child1.a.com 与 a.com，
child1.a.com 与 child2.a.com，
abc.child1.a.com 与 child1.a.com
两两不同源，但是可以通过设置 document.domain='a.com'，浏览器就会认为它们都是同一个源。想要实现以上任意两个页面之间的通信，两个页面必须都设置documen.domain='a.com'。
此方式的特点：

只能在父域名与子域名之间使用，且将 xxx.child1.a.com域名设置为a.com后，不能再设置成child1.a.com
存在安全性问题，当一个站点被攻击后，另一个站点会引起安全漏洞
这种方法只适用于 Cookie 和 iframe 窗口

2、JSONP跨域

JSONP 是 JSON With Padding（填充式 JSON 或参数式 JSON）的简写。

JSONP实现跨域请求的原理：简单的说，就是动态创建<script>标签，然后利用<script>的 src 属性不受同源策略约束来跨域获取数据。

JSONP 由两部分组成：回调函数 和数据。回调函数是用来处理服务器端返回的数据，回调函数的名字一般是在请求中指定的。而数据就是我们需要获取的数据，也就是服务器端的数据。