共计 885 个字符,预计需要花费 3 分钟才能阅读完成。
1. 是什么
JSONP 全称 (Json with Padding); 由 Bob Ippolito 于 2005 年提出。JSONP 反对绕过同源策略共享数据。
因为同源策略,浏览器在发送 Ajax 申请时,只接管同域服务器响应的数据资源;JSONP 是利用了 script 标签的 src 属性来实现跨域数据交互的,因为浏览器解析 HTML 代码时,原生具备 src 属性的标签,浏览器都赋予其 HTTP 申请的能力,而且不受跨域限度,应用 src 发送 HTTP 申请,服务器间接返回一段 JS 代码的函数调用,将服务器数据放在函数实参中,前端提前写好响应的函数筹备回调,接收数据,实现跨域数据交互;
二、实现
const jsonp = ({url, params, callbackName}) => {const generateUrl = () => {
let dataSrc = ''
for (let key in params) {if (params.hasOwnProperty(key)) {dataSrc += `${key}=${params[key]}&`
}
}
dataSrc += `callback=${callbackName}`
return `${url}?${dataSrc}`
}
return new Promise((resolve, reject) => {const scriptEle = document.createElement('script')
scriptEle.src = generateUrl()
document.body.appendChild(scriptEle)
window[callbackName] = data => {resolve(data)
document.removeChild(scriptEle)
}
})
}
三、安全性问题
跨站申请伪造
简略的 JSONP 部署容易受到跨站点申请伪造(CSRF 或 XSRF)攻打。因为 HTML<script> 元素不恪守 Web 浏览器实现中的同源策略,因而歹意页面能够申请并获取属于另一个站点的 JSON 数据。这将容许在歹意页面的上下文中评估 JSON 编码的数据,如果用户以后登录到其余站点,可能会泄露明码或其余敏感数据。
正文完
发表至: javascript
2023-05-03