JSONP跨域及原理

我会带着你远行 2023-10-14 23:43 70阅读 0赞

## JSONP跨域及原理 ##

#### 一、案例 ####

*  前端

<!DOCTYPE html>
    <html>
    <head>
        <title>JSONP Example</title>
    </head>
    <body>
        <h1>JSONP Example</h1>
        <script>
            // 定义一个全局的回调函数
            function handleResponse(data) {
          
                console.log("Received data:", data);
            }
            
            // 动态创建script标签，请求跨域数据
            var script = document.createElement('script');
            script.src = 'http://api.example.com/data?callback=handleResponse';
            document.body.appendChild(script);
        </script>
    </body>
    </html>

*  服务端nodejs（express）

> 在这个例子中，前端页面通过动态创建`<script>`标签，将回调函数名`handleResponse`作为查询参数传递给服务器。服务器在收到请求后，将数据封装为函数调用，并将结果作为JavaScript脚本响应返回。这样，前端页面就能够通过回调函数处理从不同域名的服务器获取的数据。
> 
> 请注意，JSONP虽然简单，但也有一些安全风险，因为它依赖于信任外部数据源提供的回调函数。因此，CORS是更安全且更现代的跨域解决方案。

#### 二、原理 ####

动态创建 `<script>` 标签是一种利用浏览器对脚本加载的原生支持，**绕过浏览器的同源策略**，实现跨域数据获取的方法。这是因为浏览器对 `<script>` 标签的加载和执行存在一些特殊的行为，使得它可以被用于进行跨域通信。

具体原因如下：

1.  **脚本加载不受同源策略限制：** 浏览器实施同源策略来限制不同域之间的跨域通信。然而，`<script>` 标签加载外部脚本文件时，浏览器并不会对脚本内容进行同源检查，而是默认允许加载和执行。这就是为什么动态创建 `<script>` 标签可以绕过同源策略的原因。
2.  **JSONP机制：** JSONP 利用了这种特性。通过在 `<script>` 标签的 `src` 属性中指定一个回调函数的名称作为查询参数，服务器将数据封装在该回调函数中返回。浏览器会自动执行这个回调函数，从而实现跨域数据传输。
3.  **加载并执行：** 当浏览器遇到 `<script>` 标签时，会立即开始加载脚本文件，并在加载完成后立即执行脚本。这就使得可以在脚本中调用之前定义的全局函数，从而实现数据的获取和处理。

需要注意的是，JSONP 虽然可以实现跨域数据的获取，但它也存在一些安全风险，如潜在的跨站脚本攻击（XSS）。因此，CORS（Cross-Origin Resource Sharing）是一种更安全和现代的跨域解决方案，它允许服务器明确地控制哪些域可以访问资源，而不依赖于动态创建 `<script>` 标签。