浏览器同源策略

2024-04-11 09:32:17

浏览器同源策略(Same-Origin Policy)是一个至关重要的安全机制。它限制了来自不同源(origin)的脚本之间的交互,有效防止恶意网站通过脚本访问用户的敏感信息或进行其他危险操作。

什么是同源

同源是指协议、域名、端口均相同的两个 URL,下表给出了与 URL http://store.company.com/dir/page.html 的源进行对比的示例:

URL结果原因
http://store.company.com/dir2/other.html同源
http://store.company.com/dir/inner/another.html同源
https://store.company.com/secure.html不同源协议不同
http://news.company.com/dir/other.html不同源域名不同
http://store.company.com:81/dir/etc.html不同源端口不同

什么是跨域

跨域(Cross-Origin)是指在 Web 开发中,当一个页面的文档、脚本或资源尝试加载其他域的内容时,就发生了跨域。

跨域限制了在 Web 开发中一些重要的操作,这些操作包括但不限于:

  • 无法读取非同源页面的文档内容
  • 无法发送跨域 AJAX 请求
  • 无法访问跨域的 Cookie、LocalStorage 或 SessionStorage
  • 无法执行跨域脚本操作

不过,可以通过 <script>、<img>、<link>、<audio>、<video> 和 <iframe> 等标签加载非同源资源。

跨域解决方案

JSONP

JSONP(JSON with Padding)的本质是,利用 <script> 标签的跨域特性,在服务器端返回的数据包装成 JavaScript 函数的调用,客户端通过回调函数获取数据。

示例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    function fn(data) {
      console.log(data)
    }
  </script>
  <!-- 将非同源服务端请求地址写在script标签的src属性中 -->
  <script src="https://api.map.baidu.com/geocoder/v2/?ak=KOmVjPVUAey1G2E8zNhPiuQ6QiEmAwZu&location=22.580200,113.948680&output=json&callback=fn"></script>
</body>
</html>

CORS

CORS(跨域资源共享,Cross-Origin Resource Sharing)是一种机制,允许在跨域请求中访问受限制的资源。它是为了解决浏览器的同源策略(Same-Origin Policy)所带来的限制而设计的。

CORS 允许服务器声明哪些源可以访问其资源,以及哪些 HTTP 方法(例如 GET、POST)可以被使用。通过在响应中添加一些特定的头部信息,服务器可以告知浏览器该如何处理跨域请求。其中最常见的是 Access-Control-Allow-Origin 头部,它指定了哪些源可以访问资源,也可以设置为 * 表示允许所有源访问。

代理服务器

在同源的服务器端部署一个代理服务器,将跨域请求转发至目标服务器,并将响应返回给客户端。通过代理服务器,可以规避浏览器的同源策略限制。

表情
Ctrl + Enter