在前端开发中，受限于浏览器的"同源策略"（Same-Origin Policy），跨域请求一直是一个经典问题。在 CORS（跨域资源共享）普及之前，JSONP（JSON with Padding）是解决跨域数据获取最广泛使用的方案。本文将全面拆解 JSONP 的核心原理、实战封装、安全隐患及现代替代方案。
一、 什么是 JSONP？
JSONP 的全称是 JSON with Padding（填充式 JSON）。它并不是一种官方标准，而是一种利用 <script> 标签特性来绕过浏览器同源策略限制的"Hack"方案。
其核心思想是：浏览器对 <script>、<img>、<link> 等资源的加载不受同源策略限制。因此，前端可以通过动态创建 <script> 标签，向跨域的服务器发起 GET 请求，服务器返回一段包含回调函数的 JavaScript 代码，浏览器加载并执行这段代码，从而将数据传回前端。
二、 JSONP 的核心工作原理
JSONP 的工作流程可以分为以下四个关键步骤：
- 定义全局回调函数 ：前端预先定义一个用于处理返回数据的回调函数（如
handleResponse）。 - 动态创建
<script>标签 ：前端通过 JavaScript 动态创建<script>标签，将其src属性指向目标跨域 URL，并在 URL 的查询参数中带上回调函数的名称（如callback=handleResponse）。 - 服务端特殊格式响应 ：服务器接收到请求后，解析出回调函数名，将需要返回的 JSON 数据作为参数包裹在该函数中，返回一段可执行的 JS 代码（如
handleResponse({"name": "Tom"})）。 - 浏览器执行回调：浏览器将返回的 JS 代码作为脚本执行，自动调用前端定义的回调函数，前端借此获取到跨域数据。
三、 前后端实战实现
以下是一个完整的 JSONP 请求与响应示例：
1. 前端代码（原生 JS 实现）
javascript
function jsonpRequest(url, callbackName) {
return new Promise((resolve, reject) => {
// 1. 定义全局回调函数
window[callbackName] = (data) => {
resolve(data);
// 清理：移除 script 标签和全局函数
document.body.removeChild(script);
delete window[callbackName];
};
// 2. 动态创建 script 标签
const script = document.createElement('script');
script.src = `${url}?callback=${callbackName}`;
// 3. 处理加载失败
script.onerror = () => {
reject(new Error('JSONP request failed'));
document.body.removeChild(script);
};
// 4. 插入 DOM 触发请求
document.body.appendChild(script);
});
}
// 调用示例
jsonpRequest('http://api.example.com/data', 'handleResponse')
.then(data => console.log('获取的数据:', data))
.catch(err => console.error(err));2. 服务端代码（Node.js + Express 示例）
javascript
const express = require('express');
const app = express();
app.get('/data', (req, res) => {
const callback = req.query.callback;
const data = { id: 1, username: 'admin' };
if (callback) {
// 返回 JS 代码：callback(data)
res.type('application/javascript');
res.send(`${callback}(${JSON.stringify(data)})`);
} else {
res.status(400).send('Missing callback parameter');
}
});
app.listen(3000);四、 JSONP 的致命缺陷与安全隐患
尽管 JSONP 兼容性极好（甚至支持 IE6），但在现代 Web 开发中，它已被视为"时代的眼泪"，主要原因如下：
- 只支持 GET 请求 ：由于依赖
<script>标签的src属性，JSONP 无法发送 POST、PUT 等复杂请求，且受限于 URL 长度（IE 下约 2083 字符）。 - 严重的 XSS 风险：JSONP 的本质是执行第三方服务器返回的 JavaScript 代码。如果服务端被劫持或返回恶意代码，会直接在当前页面的安全上下文中执行，导致跨站脚本攻击（XSS）。
- 错误处理困难 ：
<script>标签没有像 XHR 那样完善的状态码反馈。如果请求失败（如 404 或 500），前端通常只能通过onerror或设置超时定时器来猜测，无法准确判断失败原因。 - CSRF 风险：由于只支持 GET 且会自动携带 Cookie，容易受到跨站请求伪造（CSRF）攻击。
五、 现代替代方案：CORS
在现代前端工程中，CORS（Cross-Origin Resource Sharing，跨域资源共享） 已经完全取代了 JSONP。
- 原理 ：CORS 是 W3C 标准，通过服务端设置 HTTP 响应头（如
Access-Control-Allow-Origin）来显式授权跨域访问。 - 优势：支持所有 HTTP 方法（GET/POST/PUT/DELETE）、支持自定义请求头、具备完善的错误处理机制，且安全性远高于 JSONP。
- 现状：除了需要兼容极老旧浏览器的遗留系统外，新项目应全面采用 CORS 或 Nginx 反向代理来解决跨域问题。
六、 总结
JSONP 是前端发展史上一块重要的里程碑，它巧妙地利用了浏览器的特性解决了当时的跨域痛点。但因其固有的安全缺陷和功能限制，在当今的开发中，我们应当：
- 理解其原理：作为前端基础知识和面试考点。
- 避免在新项目中使用：全面拥抱 CORS 标准。
- 警惕安全风险：如果在维护老项目时遇到 JSONP，务必对回调函数名进行白名单校验，防止 XSS 注入。