解决浏览器跨域访问

Binon
130 阅读4分钟

JSONP（JSON with Padding）是一种用于解决跨域数据访问限制的技术。由于浏览器的同源策略，普通的AJAX请求不能跨域获取数据。JSONP通过动态创建<script>标签来加载远程脚本文件，利用脚本文件的加载不受同源策略限制的特性，实现跨域数据的获取。

JSONP的工作原理如下： 跨域（Cross-Origin）指的是在浏览器中，当一个网页的脚本（如JavaScript）试图访问不同源（Origin）的资源时，会受到浏览器的同源策略（Same-Origin Policy）的限制。同源策略是一种安全机制，用于防止恶意网站通过脚本访问其他域下的敏感数据。

同源策略要求访问的资源必须满足以下条件才能被允许：

  1. 同协议：协议必须相同，如http://和http://、https://和https://。
  2. 同域名：域名必须相同，如www.example.com和www.example.com。
  3. 同端口：端口号必须相同，如example.com:80和http://example.co…

如果不满足上述条件，浏览器会阻止跨域请求的执行，以保护用户数据的安全。

然而，有时候我们需要进行跨域请求，例如在前端页面中获取其他域下的数据。为了实现跨域请求，可以采用以下方法：

  1. JSONP：通过动态创建<script>标签加载远程脚本文件，利用脚本文件的加载不受同源策略限制的特性，实现跨域数据的获取。

  2. CORS（Cross-Origin Resource Sharing）：在服务器端设置响应头部，允许指定的域名访问资源。通过在响应头中添加Access-Control-Allow-Origin字段，指定允许访问的域名，从而实现跨域请求。

  3. 代理服务器：在同源的服务器上设置一个代理服务器，将跨域请求转发到目标服务器，并将响应返回给客户端。客户端只与同源的代理服务器通信，避免了跨域问题。

  4. WebSocket：WebSocket是一种全双工通信协议，不受同源策略限制，可以在不同源之间建立持久连接，实现跨域通信。

需要注意的是，跨域请求可能存在安全风险，因此在进行跨域请求时应谨慎考虑，并确保只允许来自可信任的源访问敏感数据。

JSONP：

  1. 客户端（浏览器）通过创建一个<script>标签，将要请求的URL包装在一个函数调用中，并指定该函数在响应返回时执行。例如：
function handleResponse(data) {
  // 处理返回的数据
}

var script = document.createElement('script');
script.src = 'http://example.com/api?callback=handleResponse';
document.body.appendChild(script);
  1. 服务器接收到请求后，将数据包装在指定的回调函数中返回给客户端。服务器端的响应内容类似于：
handleResponse({"name": "John", "age": 30});
  1. 客户端在页面中定义了指定的回调函数（上述例子中的handleResponse函数），当服务器返回数据时，浏览器会执行该函数，并将数据作为参数传递进去。

由于JSONP利用了<script>标签的跨域加载特性，所以它可以绕过浏览器的同源策略限制，实现跨域数据的获取。然而，JSONP也存在一些安全风险，因为它需要信任服务器返回的脚本内容。因此，使用JSONP时需要确保从可信任的源获取数据，并对返回的数据进行适当的验证和处理。

WebSocket：

WebSocket协议设计时考虑了跨域通信的需求，并采取了一些安全措施，使其不受同源策略的限制。以下是WebSocket不受同源策略限制的原因：

  1. 初始握手阶段：WebSocket使用HTTP协议进行初始握手，但在握手过程中，服务器可以通过返回特定的响应头部字段来表示允许跨域访问，即设置Access-Control-Allow-Origin字段为允许的域名。这样，浏览器就会允许跨域的WebSocket连接建立。

  2. 单一WebSocket连接：一旦WebSocket连接建立成功，它就不再受同源策略的限制。WebSocket连接是一种全双工的持久连接，在服务器和客户端之间保持通信通道。由于WebSocket连接是在初始握手阶段获得授权的，因此后续的通信不会受到同源策略的限制。

  3. 安全性考虑：WebSocket协议在设计时考虑了安全性，并采取了一些机制来防止恶意的跨域行为。例如，浏览器会限制通过WebSocket连接发送到不同域的HTTP Cookie，以避免跨站点脚本攻击（XSS）和跨站请求伪造（CSRF）等安全问题。

总结起来，WebSocket不受同源策略限制的原因是，它在初始握手阶段允许服务器设置允许跨域访问的响应头部字段，并且一旦连接建立成功，后续的通信不再受同源策略的限制。这使得WebSocket成为实现跨域通信的一种可行选择。

avatar
文章
阅读
粉丝