什么是同源策略？

天玄TX

已于 2023-10-28 14:47:51 修改

阅读量410

点赞数 1

分类专栏： JS 文章标签：前端

于 2023-10-13 16:19:48 首次发布

本文链接：https://blog.csdn.net/TianXuab/article/details/133813285

版权

JS 专栏收录该内容

58 篇文章 3 订阅

订阅专栏

同源策略是Web开发中的重要概念，用于限制不同源之间的资源访问。它是保护用户隐私和安全的关键措施之一。在本文中，我们将深入探讨同源策略的概念、原理和作用，并提供一些处理同源策略限制的代码示例。

引言

在Web开发中，同源策略是一种浏览器安全机制，用于限制不同源之间的资源访问。同源策略要求不同源之间的脚本、样式表和其他资源只能在同一源中进行交互，而不能跨源访问。这样可以防止恶意网站通过跨域请求获取用户的敏感信息，保护用户的隐私和安全。

同源策略的原理

同源策略（Same Origin Policy）是一种浏览器安全策略，旨在保护用户信息的安全和隐私。它定义了浏览器在不同网页间进行交互时的权限限制，以防止恶意网页获取或篡改其他网页的数据。

同源策略的原理如下：

源（Origin）的定义：源由协议、域名和端口组成。如果两个 URL 的协议、域名和端口完全相同，则它们被认为是同源的；否则，它们被认为是不同源的。
同源策略的限制：同源策略限制了以下几种行为：
- 脚本访问：不同源的脚本（例如 JavaScript）不能直接访问彼此的文档结构、变量和函数等。
- DOM 访问：不同源的网页不能通过 DOM 方法（如 getElementById）获取其他网页的内容。
- Cookie、LocalStorage 和 IndexDB 访问：不同源的网页不能读取或修改彼此的 Cookie、LocalStorage 或 IndexedDB 数据。
- AJAX 请求：使用 XMLHttpRequest 或 Fetch API 发起的 AJAX 请求必须遵循同源策略。即只能向同源的 URL 发送请求，不能跨域请求。
- 嵌入资源限制：不同源的网页不能直接嵌入对方的资源，如图片、样式表和脚本等。
跨域资源共享（CORS）：为了允许跨域请求，浏览器引入了跨域资源共享机制。通过在服务器端设置响应头中的 CORS 相关字段，允许指定源的请求访问资源。

同源策略的目的是保护用户数据的安全性和隐私性，防止恶意网站获取用户敏感信息或执行未经授权的操作。它是浏览器的一项重要安全功能，有助于维护互联网的安全环境。

同源策略的作用

同源策略（Same Origin Policy）在浏览器中起到以下作用：

数据保护：同源策略可以防止恶意网页通过脚本等手段获取其他源的敏感数据，如用户的登录凭证、个人信息等。只有来自同一个源的脚本才能访问彼此的数据，保护了用户的隐私和安全。
安全限制：同源策略限制了不同源之间的交互，防止恶意网页对其他源的内容进行篡改、操控或盗用。这样可以防止跨站脚本攻击（XSS）和跨站请求伪造（CSRF）等安全漏洞。
网络资源控制：同源策略限制了跨域的 AJAX 请求，防止恶意网页利用浏览器发起未经授权的跨域请求。这有助于防范恶意代码对其他网站的滥用和攻击。
沙箱环境：同源策略将不同源的网页隔离开来，每个网页都运行在独立的沙箱环境中。这样即使某个网页出现错误或崩溃，也不会对其他网页产生影响，提高了浏览器的稳定性和安全性。

同源策略的作用在于确保不同源之间的互动受到限制，从而保护用户的数据安全和隐私，并防止网络攻击。虽然同源策略在某些情况下会带来一定的限制和挑战，但它是现代浏览器中重要的安全特性，为用户提供了更可靠的网络环境。

处理同源策略限制的代码示例

虽然同源策略限制了不同源之间的资源访问，但在某些情况下，我们可能需要进行跨域请求或共享资源。以下是一些处理同源策略限制的常用代码示例：

JSONP

function handleResponse(data) {
  // 处理返回的数据
}

var script = document.createElement('script');
script.src = 'http://api.example.com/data?callback=handleResponse';
document.body.appendChild(script);

CORS

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://api.example.com/data', true);
xhr.withCredentials = true;
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    // 处理返回的数据
  }
};
xhr.send();

代理服务器

var xhr = new XMLHttpRequest();
xhr.open('GET', '/proxy?url=http://api.example.com/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    // 处理返回的数据
  }
};
xhr.send();