JSONP 之我见
在前端开发中,我们常常需要从不同的域名或服务器获取数据。但由于浏览器的同源策略(Same-Origin Policy),跨域请求会被限制,导致无法直接访问服务器资源。这时候,JSONP 就成为了一种可行的解决方案。
什么是 JSONP?
JSONP(JSON with Padding)是一种跨域数据交互的技术。它利用了 HTML 中 script 标签可以跨域请求资源的特性,通过在请求 URL 中添加回调函数名来实现跨域数据的传输。
当服务器接收到 JSONP 请求后,会将数据作为参数传入回调函数,并将其以 JavaScript 函数的形式返回给客户端。客户端在解析响应内容时,就可以直接调用回调函数来处理数据了。
JSONP 的优缺点
优点
- 跨域支持:JSONP 可以实现跨域请求,解决了同源策略带来的限制问题。
- 兼容性好:JSONP 只需要使用 script 标签加载脚本文件即可,浏览器都支持,而且不受 AJAX 跨域限制。
- 简单易用:使用 JSONP 只需要定义一个回调函数,然后在 script 标签的 src 属性中传递该函数名即可。
缺点
- 安全性问题:JSONP 中的回调函数是可以被篡改的,所以要谨慎处理返回数据。
- 只支持 GET 请求:由于只能通过 script 标签发起请求,所以 JSONP 只支持 GET 请求方式,无法使用 POST 等其他请求方式。
如何使用 JSONP?
下面是一个简单的 JSONP 请求示例,假设我们需要从服务器获取一些数据,数据格式为 JSON:
-- ------ -------- -------------------- - ------------------ - -- -- ------ -- --- ------ - --------------------------------- -- -- ------ --- --- ----------- ---------- - ------------------------------------------------------- -- - ------ -------- ----------------------------------
在这个示例中,我们定义了一个名为 handleResponse
的回调函数来处理接收到的数据。然后,我们创建了一个 script 标签,并将其 src 属性设置为服务器资源的 URL,同时传递了回调函数名。最后,我们将 script 标签添加到文档中,浏览器会自动加载该脚本并执行回调函数。
如何防止 JSONP 被劫持?
JSONP 回调函数名是可以被恶意修改的,如果攻击者利用这一点故意篡改回调函数名,就可能造成安全风险。为了防止这种情况发生,我们可以在回调函数名中添加一个随机数作为前缀,使得每次请求的回调函数名都不同,从而避免被劫持。
-- ----- --- ------ - ------------------------ - --------- -- ------ -------- -------------------- - ------------------ - -- -- ------ -- --- ------ - --------------------------------- -- -- ------ --- --- ----------------- ---------- - ---------------------------------------------- - ------ - ------------------ -- - ------ -------- ----------------------------------
总结
JSONP 是一种简单易用的跨域数据交互技术,可以有效地解决 AJAX 跨域请求被限制的问题。但由于其存在安
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/2474