JSONP的实现

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 编码的数据，如果用户当前登录到其他站点，可能会泄露密码或其他敏感数据。