JSONP是一种很远古用来解决跨域问题的技术，当然当初理论工作当中很少用到该技术了，然而很多同学在找工作面试过程中还是常常被问到，本文将带您深刻理解JSONP的工作原理、应用场景及平安注意事项，让您轻松把握JSONP。
JSONP是什么？
JSONP，全称JSON with Padding，是一项用于在不同域之间进行数据交互的技术。这项技术的核心思想是通过在页面上动态创建<script>标签，从另一个域加载蕴含JSON数据的内部脚本文件，而后将数据包裹在一个函数调用中返回给客户端。JSONP不仅简略而且弱小，尤其在解决跨域数据申请时表现出色。
JSONP的工作原理
JSONP的工作流程如下：
- 客户端申请数据：首先，客户端会创立一个
<script>标签，向蕴含JSON数据的近程服务器发出请求。这个申请通常包含一个名为callback的参数，用来指定在数据加载结束后应该调用的JavaScript函数的名称。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSONP Example</title>
</head>
<body>
<h1>JSONP Example</h1>
<div id="result"></div>
<script>
// 定义JSONP回调函数
function callback(data) {
const resultDiv = document.getElementById('result');
resultDiv.innerHTML = `Name: ${data.name}, Age: ${data.age}`;
}
// 创立JSONP申请
const script = document.createElement('script');
script.src = 'http://localhost:3000/data?callback=callback';
document.body.appendChild(script);
</script>
</body>
</html>- 服务器响应：服务器收到申请后，将JSON数据包装在指定的回调函数中，并将其返回给客户端。响应的内容相似于：
const Koa = require('koa');
const Router = require('koa-router');
const app = new Koa();
const router = new Router();
// 定义一个简略的JSON数据
const jsonData = {
name: 'John',
age: 30,
};
// 增加路由解决JSONP申请
router.get('/data', (ctx) => {
const callback = ctx.query.callback;
if (callback) {
ctx.body = `${callback}(${JSON.stringify(jsonData)})`;
} else {
ctx.body = jsonData;
}
});
// 将路由注册到Koa应用程序
app.use(router.routes()).use(router.allowedMethods());
// 启动Koa应用程序
const port = 3000;
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
- 客户端解决数据：在客户端的页面中，咱们必须当时定义好名为
callback的函数，以便在响应被加载和执行时被调用。这个函数会接管JSON数据，供咱们在页面中应用。
JSONP应用场景
跨域申请：JSONP次要用于解决跨域申请问题，尤其实用于无奈通过CORS或代理等形式实现跨域的状况。
数据共享：在多个域名之间共享数据，能够利用JSONP实现跨域数据共享。
第三方数据获取：当须要从第三方网站获取数据时，能够应用JSONP技术。
应用JSONP注意事项
JSONP的简略性和宽泛的浏览器反对使其成为跨域数据交互的弱小工具。然而，咱们也必须审慎应用它，因为它存在一些平安思考，咱们剖析下它的优缺点：
长处：
- 简略易用：JSONP非常容易实现和应用，无需简单的配置。
- 跨浏览器反对：简直所有古代浏览器都反对JSONP。
- 绕过同源策略：JSONP帮忙咱们绕过了同源策略的限度，轻松获取跨域数据。
平安思考：
- XSS危险：JSONP未经过滤的数据可能会引起XSS攻打，因而须要对返回的数据进行过滤和验证。
- CSRF攻打：应用JSONP时要留神防备CSRF攻打，能够通过增加随机数等形式加强安全性。
- 仅反对GET申请：JSONP只反对GET申请，不适用于POST等其余HTTP办法。
- 难以解决HTTP谬误：JSONP难以无效解决HTTP谬误，在申请失败时的异样解决比拟艰难。
随着技术的倒退，JSONP已不再是首选跨域解决方案，但理解它的工作原理依然有助于咱们更深刻地了解跨域数据交互的基本原理。在理论我的项目中，依据具体需要和平安思考，倡议优先选择CORS或代理服务器形式解决跨域问题。
发表回复