🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

一、引言

同源限制的概念和背景

同源限制是一种网络安全策略，它限制了从一个源（例如网站）加载的脚本或其他资源与另一个源（例如不同的网站）进行交互。同源限制的主要目的是防止恶意脚本或其他资源从一个源获取另一个源的敏感信息。

同源限制的背景可以追溯到早期的网络安全问题。在早期的网络中，脚本和其他资源可以从任何源加载，这使得恶意脚本可以轻松地从一个源获取另一个源的敏感信息，例如用户的会话 ID 或其他身份验证信息。为了解决这个问题，浏览器开发商引入了同源限制策略，以限制脚本和其他资源只能与相同源的资源进行交互。

同源限制的实现基于同源策略（Same-Origin Policy），该策略规定只有当两个源具有相同的协议、主机名和端口号时，它们才被认为是同源的。这意味着从一个源加载的脚本只能与相同源的资源进行交互，而不能与不同源的资源进行交互。

同源限制是网络安全的重要组成部分，它可以帮助保护用户的隐私和安全。虽然同源限制可能会对某些应用程序造成限制，但它是确保网络安全的必要措施。

为什么同源限制在网络安全中很重要

同源限制在网络安全中非常重要，因为它可以防止恶意脚本或其他资源从一个源获取另一个源的敏感信息。

同源限制的主要目的是防止跨站脚本攻击（Cross-Site Scripting，XSS）。XSS 攻击是一种常见的网络攻击，攻击者可以通过在受害者的浏览器中注入恶意脚本，从而获取受害者的敏感信息，例如用户名、密码、Cookie 等。

同源限制可以通过限制脚本和其他资源只能与相同源的资源进行交互来防止 XSS 攻击。这意味着从一个源加载的脚本只能与相同源的资源进行交互，而不能与不同源的资源进行交互。这样，即使攻击者成功地注入了恶意脚本，它也无法获取另一个源的敏感信息。

除了防止 XSS 攻击外，同源限制还可以防止其他类型的攻击，例如跨站请求伪造（Cross-Site Request Forgery，CSRF）攻击和其他恶意行为。

总的来说，同源限制是确保网络安全的必要措施之一。它可以帮助保护用户的隐私和安全，防止恶意攻击和其他恶意行为。

二、同源限制的工作原理

URL、协议、域名和端口的概念

• URL（Uniform Resource Locator）是一个唯一的地址，用于在互联网上标识和定位资源。它包含了资源的位置和访问方式。URL 的格式通常包括协议、域名、端口和路径等部分。
• 协议是指用于访问资源的通信协议，例如 HTTP（Hypertext Transfer Protocol）、HTTPS（Hypertext Transfer Protocol Secure）、FTP（File Transfer Protocol）等。
• 域名是指用于标识网站或服务器的名称，例如 www.example.com。域名系统（Domain Name System，DNS）将域名转换为 IP 地址，以便计算机可以找到资源所在的服务器。
• 端口是指服务器上用于接收和处理请求的特定端口号。端口号通常用于标识不同的服务或应用程序。例如，HTTP 协议默认使用端口 80，而 HTTPS 协议默认使用端口 443。

总的来说，URL 是用于在互联网上访问资源的地址，协议是用于通信的规则，域名是用于标识网站或服务器的名称，端口是用于标识服务器上的特定服务或应用程序的端口号。这些概念在网络通信和资源访问中起着重要的作用。

同源策略的实施方式

同源策略的实施方式主要是通过浏览器来实现的。当浏览器加载一个网页时，它会检查该网页的源（即 URL）是否与当前网页的源相同。如果源不同，则浏览器会禁止该网页中的脚本与当前网页中的脚本进行交互。

具体来说，同源策略的实施方式包括以下几个方面：

1. 限制跨域访问：同源策略禁止脚本从一个源访问另一个源的资源。这意味着脚本只能访问与自身相同源的资源，而不能访问其他源的资源。
2. 限制跨域请求：同源策略禁止脚本向其他源发送请求。这意味着脚本只能向与自身相同源的服务器发送请求，而不能向其他源的服务器发送请求。
3. 限制跨域 cookie：同源策略禁止脚本读取或设置其他源的 cookie。这意味着脚本只能读取或设置与自身相同源的 cookie，而不能读取或设置其他源的 cookie。
4. 限制跨域表单提交：同源策略禁止脚本提交其他源的表单。这意味着脚本只能提交与自身相同源的表单，而不能提交其他源的表单。

总的来说，同源策略的实施方式是通过限制脚本与其他源的资源进行交互来确保网络安全。这样可以防止恶意脚本或其他资源从一个源获取另一个源的敏感信息，从而保护用户的隐私和安全。

浏览器如何判断请求的源是否相同

浏览器判断请求的源是否相同主要是通过比较请求的 URL 和当前网页的 URL 是否具有相同的协议、域名和端口号来确定的。

• 具体来说，浏览器会检查请求的 URL 的协议部分（例如 HTTP 或 HTTPS）是否与当前网页的协议部分相同。如果协议部分不同，则请求的源与当前网页的源不同。

• 接下来，浏览器会检查请求的 URL 的域名部分是否与当前网页的域名部分相同。如果域名部分不同，则请求的源与当前网页的源不同。

• 最后，浏览器会检查请求的 URL 的端口号部分是否与当前网页的端口号部分相同。如果端口号部分不同，则请求的源与当前网页的源不同。

如果请求的 URL 的协议、域名和端口号都与当前网页的协议、域名和端口号相同，则浏览器认为请求的源与当前网页的源相同。否则，浏览器认为请求的源与当前网页的源不同，并根据同源策略来限制请求的访问权限。

三、同源限制的应用

防止跨站脚本攻击（XSS）

同源限制可以应用于防止跨站脚本攻击（XSS）。XSS 攻击是一种常见的 Web 安全漏洞，攻击者可以通过注入恶意脚本到受害者的浏览器中，从而窃取用户信息、控制用户浏览器等。

同源限制可以通过比较请求的源与当前网页的源是否相同来防止 XSS 攻击。如果请求的源与当前网页的源不同，则浏览器会禁止该请求，从而防止恶意脚本被注入到当前网页中。

在防止 XSS 攻击方面，除了同源限制外，还可以采取其他措施，例如输入验证、输出编码、使用安全库等。这些措施可以结合使用，以提高网站的安全性。

防止跨站脚本攻击（XSS）的方法有很多，以下是一些常见的方法：

1. 输入验证：对用户输入的内容进行验证，例如检查是否包含恶意代码或脚本。可以使用正则表达式或其他技术来检查输入内容。
2. HTML 转义：将用户输入的内容转换为安全的 HTML 格式，例如将尖括号转换为 HTML 实体。这样可以防止恶意代码被注入到 HTML 中。
3. Cookie 安全：设置 Cookie 的属性，例如 HTTPOnly 和 Secure，以防止恶意脚本读取或修改 Cookie。
4. 输出编码：对输出的内容进行编码，例如使用 HTML 实体或 URL 编码。这样可以防止恶意代码被注入到输出内容中。
5. 服务器端验证：在服务器端对用户输入的内容进行验证，例如检查是否包含恶意代码或脚本。这样可以在服务器端防止 XSS 攻击。
6. 安全库：使用安全库，例如 jQuery、Prototype 等，它们提供了一些内置的安全功能，可以帮助防止 XSS 攻击。
7. 定期更新：定期更新网站的软件和插件，以确保它们包含最新的安全补丁和修复程序。

总的来说，防止 XSS 攻击需要综合考虑多个方面，包括输入验证、HTML 转义、Cookie 安全、输出编码、服务器端验证、安全库和定期更新等。同时，网站开发人员和管理员应该保持警惕，及时发现和修复安全漏洞，以确保网站的安全性。