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 編碼的數據，如果用户當前登錄到其他站點，可能會泄露密碼或其他敏感數據。