likes
comments
collection
share

JS中的历史遗留问题你都知道几个呢？（五）：同源策略及跨域

作者站长头像
站长
· 阅读数 15

1. 什么是同源策略？

同源策略是一种浏览器安全策略，它限制了一个网页中的文档或脚本如何与来自不同源（域、协议和端口）的资源进行交互。这是为了防止恶意网站通过脚本访问用户的敏感数据。

在Web开发中，"源"由协议、域名和端口组成。同源策略要求两个页面只有在这三者完全相同的情况下才被视为同源。

在 http://example.com/page1 中：

  • 域名： example.com
  • 协议： http
  • 端口： 默认端口，80（因为使用的是 HTTP 协议，HTTP 的默认端口是 80）

同源策略的目的是在浏览器中创建一个安全环境，防止恶意网站越权访问用户的敏感信息。

2. 同源的定义

例子：
  • 同源：http://example.com/page1 和 http://example.com/page2
  • 不同源：http://example.com 和 https://example.com 或 http://example.com 和 http://api.example.com

理解同源的定义对于理解同源策略的限制非常重要。它意味着网页上的脚本只能访问同一域下的资源，防止恶意网站通过脚本获取到其他域的敏感信息。这是浏览器保护用户隐私和数据安全的基本机制之一。

3. 同源策略的限制

同源策略在浏览器中施加了一些重要的限制，以保护用户数据的安全性。以下是同源策略的主要限制：

  • 无法通过脚本访问跨域的文档对象模型（DOM）：

    • 例如，如果你的网页在加载脚本时来自不同的域，你不能直接操作对方网页的DOM。这一限制是为了防止恶意网站通过脚本窃取其他网页的信息。

  • 无法通过XMLHttpRequest发起跨域请求：

    • XMLHttpRequest对象用于在浏览器和服务器之间发送数据，但同源策略限制了XMLHttpRequest只能向同一域中的资源发起请求。跨域请求将会被浏览器拒绝，除非目标服务器支持跨域资源共享（CORS）。

这些限制帮助确保网页上的脚本不会越权访问其他域的敏感信息，从而维护了用户的隐私和数据安全。

4. 解决跨域问题的方法

在面对同源策略的限制时，有一些方法可以解决跨域问题，使得不同源的资源能够进行安全的交互。

JSONP（JSON with Padding）：

  • 原理：

    • JSONP是一种通过动态创建<script>标签来绕过同源策略的方法。它利用了在 HTML 中可以跨域引用 JavaScript 脚本的特性，服务器返回的数据被包装在一个函数调用中，通过这种方式实现跨域数据的传递。
JSONP 示例：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JSONP 示例</title>
</head>
<body>
  <script>
    // JSONP 示例
    function handleData(data) {
      console.log(data);
    }

    var script = document.createElement('script');
    script.src = 'http://api.example.com/data?callback=handleData';
    document.body.appendChild(script);
  </script>
</body>
</html>
CORS（Cross-Origin Resource Sharing）：

  • 原理：

    • CORS是一种更现代和安全的跨域解决方案。它允许服务器声明哪些来源是被允许的，从而避免了一些传统跨域方法的安全隐患。服务器通过在响应头中设置特定的CORS相关字段，允许或拒绝跨域请求。

  • 示例：

 // 服务器端设置响应头
 // 允许所有域的请求访问该资源
 Access-Control-Allow-Origin: *
 // 或者只允许特定域的请求访问该资源
 Access-Control-Allow-Origin: http://example.com

选择合适的解决方案取决于具体的需求和安全考虑。JSONP适用于简单的跨域需求，而CORS更适用于复杂的跨域场景。

5. 注意事项

在处理跨域问题时，除了了解跨域解决方案之外，还需要注意一些重要的事项，以确保安全和良好的开发实践。

  • 安全性问题：

    • 绕过同源策略可能导致安全隐患。在处理跨域问题时，务必考虑安全性，并选择合适的解决方案。不安全的跨域解决方案可能会被恶意利用，造成数据泄露等问题。

  • 使用CORS时的头信息：

    • 如果使用CORS解决跨域问题，服务器需要在响应头中设置一些特定的信息，包括Access-Control-Allow-Origin等。确保服务器设置是正确的，以防止浏览器拒绝请求。

  • 跨域资源的限制：

    • 虽然跨域解决方案可以让不同域的资源进行交互，但仍有一些限制。例如，跨域的XMLHttpRequest请求除非得到目标服务器的明确允许，否则将被浏览器拒绝。

  • 适用范围：

    • 选择跨域解决方案时，要根据具体的应用场景和需求进行权衡。不同的方法有不同的适用范围，选择最合适的方法可以避免不必要的复杂性和安全风险。