JSONP跨域及原理

就叫飞六吧

于 2023-08-20 15:15:31 发布

阅读量204

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_52236586/article/details/132392161

版权

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）

const express = require('express');
const app = express();

// 跨域数据接口
app.get('/data', (req, res) => {
    const data = { message: 'Hello from server!' };
    const callback = req.query.callback; // 获取回调函数名称
    const response = callback + '(' + JSON.stringify(data) + ')'; // 封装数据并回调

    res.setHeader('Content-Type', 'application/javascript');
    res.send(response);
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

在这个例子中，前端页面通过动态创建<script>标签，将回调函数名handleResponse作为查询参数传递给服务器。服务器在收到请求后，将数据封装为函数调用，并将结果作为JavaScript脚本响应返回。这样，前端页面就能够通过回调函数处理从不同域名的服务器获取的数据。

请注意，JSONP虽然简单，但也有一些安全风险，因为它依赖于信任外部数据源提供的回调函数。因此，CORS是更安全且更现代的跨域解决方案。

二、原理

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

具体原因如下：

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

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