浏览器为什么要有同源策略？前端安全（一）

前言

对于同源策略相信前端的朋友或多或少都有了解，今天本文将带大家一起了解浏览器的同源策略。

如果浏览器没有同源策略会发生什么：

• 恶意网站可以读取不同源的Cookie、LocalStorage 和 IndexDB。

  假如你登录了一些银行网站，再去登录其他网站，其他网站因为没有同源策略限制就可以读取你网站的Cookie，伪装成你发送请求给服务器进行一些转账高危行为，服务器识别到Cookie误以为用户本人发送的请求，这样就会造成财产损失。另外，LocalStorage 和 IndexDB中保存的数据也会遭到泄漏

• 恶意网站可以读取与修改不同源网站的DOM

  常见通过iframe窗口和window.open方法打开正常网站窗口，读取与修改正常网站的dom节点数据，获取dom上的敏感信息如账号密码，误导用户进行信息盗取。

• 随意发送AJAX请求发给任何网址，出现CSRF与XSSI攻击，盗取用户数据

  跨站请求伪造（CSRF）攻击

  CSRF 攻击发生在用户在已登录一个网站（目标网站）的情况下，被诱骗访问另一个网站（恶意网站），而恶意网站通过用户的浏览器向目标网站发起一个恶意请求。如果 AJAX 请求没有同源限制，恶意网站可以轻松地发送请求到目标网站，并携带用户的会话cookie，这样目标网站会认为这个请求是用户自己发起的，从而执行恶意操作。

  跨站脚本包含（XSSI）攻击

  XSSI 攻击是指攻击者通过注入恶意脚本到受害者的网页中，从而窃取数据或执行恶意操作。如果没有同源策略的限制，攻击者可以通过 AJAX 请求从其他网站获取敏感数据，并将其包含在自己的恶意脚本中。

  保护用户隐私和数据安全

  同源策略确保了用户的敏感数据不会被恶意网站通过 AJAX 请求读取或篡改。例如，用户的个人信息、登录凭证、金融信息等都是通过 AJAX 请求在服务器和浏览器之间传输的。如果没有同源策略，任何网站都可以发起 AJAX 请求到其他网站，这将导致用户的数据安全受到严重威胁。

因此浏览器出于安全考虑，制定了同源策略（Same-origin policy）。

什么是同源策略

简介

同源策略是浏览器安全的基础，它是一种约定，1995年由Netscape公司引入浏览器，它是浏览器安全的基石。

简单来说，如果两个URL的协议、域名、端口都相同，那么就认为这两个URL同源。

限制对象

• DOM访问：一个网页中的JavaScript脚本只能访问和修改与其来源相同的文档对象模型（DOM）。这意味着脚本无法跨源访问其他网站的DOM，从而防止恶意网站通过脚本获取用户在其他站点的敏感信息。
• 数据存储：浏览器将Cookie、LocalStorage和IndexedDB等数据与源相关联，确保只有相同源的页面可以访问和修改相关数据，防止信息泄露或篡改。
• 网络请求：通过XMLHttpRequest、Fetch API等方式发起的网络请求受到同源策略的限制，只能从其自身的源（同源）请求数据，防止跨站点请求伪造（CSRF）攻击。

我们发现同源策略为浏览器提供了有效的安全边界后，也让我们开发Web项目，那么我们在开发过程中如何跨越这个限制呢？请看下节

目的

同源策略的主要目的是保护用户的安全和隐私，防止恶意网站利用浏览器的安全漏洞来窃取用户的个人数据、Cookie等敏感信息，或者进行未经授权的操作。

• 安全性增强：保护用户隐私，防止恶意网站窃取个人信息。
• 防范攻击：减少跨站脚本攻击（XSS）和跨站点请求伪造（CSRF）等安全威胁的可能性。
• 保护数据完整性：防止未授权的资源修改或篡改其他站点的数据或资源，确保用户访问的内容是可信的和正确的。

跨源访问解决方案

尽管同源策略限制了跨源资源的直接访问，但仍存在一些解决方案和技术可以绕过这一限制，包括：

• 跨域资源共享（CORS）：服务器端可以配置响应头，允许特定来源的请求跨越同源策略限制，实现安全的跨域数据传输。
• 服务器代理：通过服务器端代理来中转请求，可以绕过浏览器的同源策略，从而获取来自不同源的资源。
• JSONP（JSON with Padding）：一种利用<script>标签加载跨域资源的技术，虽然安全性较差，但在某些情况下仍被使用。
• 图片、样式和脚本跨域访问：浏览器允许通过<img>、<link>和<script>标签引入不同源的图片、样式表和脚本文件。这些资源加载不受同源策略的限制，但是同源策略限制了来自不同域的script脚本对当前文档的访问。
• 服务器代理：通过服务器端代理来中转请求，可以绕过浏览器的同源策略。浏览器认为从同一源获取资源，因此可以通过代理在客户端获取来自不同源的资源。比如开发环境的Vite，生产环境的Nginx与IIS等。
• 媒体元素的跨域访问：HTML5中的<video>、<audio>等媒体元素可以加载并播放来自其他源的媒体内容，这些元素对于跨域资源访问没有同源策略的限制。

尽管存在这些例外和绕过方式，我们在开发时仍应慎重使用，确保在允许跨源访问时不会牺牲安全性和隐私保护。

总结

同源策略作为浏览器安全的基础性措施，旨在保护用户的隐私和数据安全。它限制了来自不同源的页面之间的互操作，防止恶意网站通过脚本攻击或数据篡改获取用户的敏感信息。同源策略通过约束DOM访问、数据存储和网络请求等方式，有效地防止了跨站脚本攻击（XSS）、跨站点请求伪造（CSRF）以及其他安全威胁的发生。

尽管存在一些跨域访问解决方案如CORS、服务器代理和JSONP，开发者仍需遵循最佳的安全实践，确保在允许跨源访问时不会牺牲用户安全和数据完整性。

下节文章我将带大家了解XSS攻击与防御方法。