在前端开发中受限于浏览器的“同源策略”Same-Origin Policy跨域请求一直是一个经典问题。在 CORS跨域资源共享普及之前JSONPJSON with Padding是解决跨域数据获取最广泛使用的方案。本文将全面拆解 JSONP 的核心原理、实战封装、安全隐患及现代替代方案。一、 什么是 JSONPJSONP 的全称是 JSON with Padding填充式 JSON。它并不是一种官方标准而是一种利用script标签特性来绕过浏览器同源策略限制的“Hack”方案。其核心思想是浏览器对script、img、link等资源的加载不受同源策略限制。因此前端可以通过动态创建script标签向跨域的服务器发起 GET 请求服务器返回一段包含回调函数的 JavaScript 代码浏览器加载并执行这段代码从而将数据传回前端。二、 JSONP 的核心工作原理JSONP 的工作流程可以分为以下四个关键步骤定义全局回调函数前端预先定义一个用于处理返回数据的回调函数如handleResponse。动态创建script标签前端通过 JavaScript 动态创建script标签将其src属性指向目标跨域 URL并在 URL 的查询参数中带上回调函数的名称如callbackhandleResponse。服务端特殊格式响应服务器接收到请求后解析出回调函数名将需要返回的 JSON 数据作为参数包裹在该函数中返回一段可执行的 JS 代码如handleResponse({name: Tom})。浏览器执行回调浏览器将返回的 JS 代码作为脚本执行自动调用前端定义的回调函数前端借此获取到跨域数据。三、 前后端实战实现以下是一个完整的 JSONP 请求与响应示例1. 前端代码原生 JS 实现functionjsonpRequest(url,callbackName){returnnewPromise((resolve,reject){// 1. 定义全局回调函数window[callbackName](data){resolve(data);// 清理移除 script 标签和全局函数document.body.removeChild(script);deletewindow[callbackName];};// 2. 动态创建 script 标签constscriptdocument.createElement(script);script.src${url}?callback${callbackName};// 3. 处理加载失败script.onerror(){reject(newError(JSONP request failed));document.body.removeChild(script);};// 4. 插入 DOM 触发请求document.body.appendChild(script);});}// 调用示例jsonpRequest(http://api.example.com/data,handleResponse).then(dataconsole.log(获取的数据:,data)).catch(errconsole.error(err));2. 服务端代码Node.js Express 示例constexpressrequire(express);constappexpress();app.get(/data,(req,res){constcallbackreq.query.callback;constdata{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在现代前端工程中CORSCross-Origin Resource Sharing跨域资源共享已经完全取代了 JSONP。原理CORS 是 W3C 标准通过服务端设置 HTTP 响应头如Access-Control-Allow-Origin来显式授权跨域访问。优势支持所有 HTTP 方法GET/POST/PUT/DELETE、支持自定义请求头、具备完善的错误处理机制且安全性远高于 JSONP。现状除了需要兼容极老旧浏览器的遗留系统外新项目应全面采用 CORS 或 Nginx 反向代理来解决跨域问题。六、 总结JSONP 是前端发展史上一块重要的里程碑它巧妙地利用了浏览器的特性解决了当时的跨域痛点。但因其固有的安全缺陷和功能限制在当今的开发中我们应当理解其原理作为前端基础知识和面试考点。避免在新项目中使用全面拥抱 CORS 标准。警惕安全风险如果在维护老项目时遇到 JSONP务必对回调函数名进行白名单校验防止 XSS 注入。
