同源策略介绍及解析

最新推荐文章于 2024-08-18 19:37:47 发布

Good luck—dys

最新推荐文章于 2024-08-18 19:37:47 发布

阅读量530

点赞数 8

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_74359467/article/details/135079420

版权

同源策略（Same-Origin Policy）是一种Web浏览器安全机制，用于限制一个网页文档或脚本如何与另一个源的资源进行交互。同源指的是两个URL的协议、域名和端口都相同，即使路径不同也不属于同源。

同源策略的目的是防止恶意网站通过脚本等方式来获取用户的敏感信息或进行恶意操作。下面是同源策略的一些关键点：

限制资源共享：同源策略限制了一个网页中加载的脚本、样式表和其他资源只能与同源网页进行共享。这意味着一个网页无法直接访问来自其他源的资源，除非目标资源设置了跨域资源共享（CORS）头部。

Cookie限制：同源策略阻止一个网页读取或修改与其他源相关的Cookie。这种限制确保了用户的登录凭证和敏感信息只会在正确的来源下使用。

DOM限制：同源策略还限制了一个网页对其他源文档对象模型（DOM）的访问权。这意味着一个网页无法直接通过脚本获取或修改其他源页面的DOM元素。

跨域通信：虽然同源策略限制了直接跨域通信，但可以通过一些机制进行跨域通信，例如JSONP、CORS、WebSocket等。这些机制提供了一种安全的方式来允许网页与其他源进行通信。

同源策略在保护用户隐私和减少恶意攻击方面起着重要的作用。它确保了网页只能与同一源的资源进行交互，从而防止恶意网站进行未经授权的操作。然而，需要注意的是，同源策略并不能完全阻止所有类型的攻击，因此开发人员仍需采取其他安全措施来保护网站和用户的安全。

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>同源策略演示</title>
</head>
<body>
    <h1>同源策略演示</h1>

    <button onclick="loadData()">加载数据</button>
    
    <div id="result"></div>

    <script>
        function loadData() {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', 'https://api.example.com/data', true);  // 使用其他域名的URL

            xhr.onreadystatechange = function () {
                if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
                    var data = JSON.parse(xhr.responseText);
                    document.getElementById('result').innerText = data.message;
                }
            };

            xhr.send();
        }
    </script>
</body>
</html>

上面的代码演示了一个简单的页面，其中有一个按钮，点击按钮会触发loadData()函数。该函数使用XMLHttpRequest对象向另一个域名（https://api.example.com）发送GET请求以获取数据，并将返回的数据显示在页面上。

然而，由于同源策略的限制，上述代码在默认情况下无法正常工作，因为它试图从不同的源加载数据。在实际测试中，您可能会在浏览器的控制台中看到类似以下的错误消息

Access to XMLHttpRequest at 'https://api.example.com/data' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

为了使这个例子正常工作，您需要在服务器端设置适当的CORS头部，以允许来自其他源的请求。具体的设置方式取决于您使用的服务器技术和框架。

这只是一个简单的演示，旨在说明同源策略的基本概念和限制。在实际开发中，可能会使用更高级的技术和库（如Fetch API、Axios等）来处理跨域请求和CORS设置