关于程序员:揭秘一文彻底搞懂JSONP

JSONP 是一种很远古用来解决跨域问题的技术，当然当初理论工作当中很少用到该技术了，然而很多同学在找工作面试过程中还是常常被问到，本文将带您深刻理解 JSONP 的工作原理、应用场景及平安注意事项，让您轻松把握 JSONP。

JSONP，全称 JSON with Padding，是一项用于在不同域之间进行数据交互的技术。这项技术的核心思想是通过在页面上动态创建 <script> 标签，从另一个域加载蕴含 JSON 数据的内部脚本文件，而后将数据包裹在一个函数调用中返回给客户端。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 次要用于解决跨域申请问题，尤其实用于无奈通过 CORS 或代理等形式实现跨域的状况。
数据共享：在多个域名之间共享数据，能够利用 JSONP 实现跨域数据共享。
第三方数据获取：当须要从第三方网站获取数据时，能够应用 JSONP 技术。

JSONP 的简略性和宽泛的浏览器反对使其成为跨域数据交互的弱小工具。然而，咱们也必须审慎应用它，因为它存在一些平安思考，咱们剖析下它的优缺点：

长处：

简略易用：JSONP 非常容易实现和应用，无需简单的配置。
跨浏览器反对：简直所有古代浏览器都反对 JSONP。
绕过同源策略：JSONP 帮忙咱们绕过了同源策略的限度，轻松获取跨域数据。

平安思考：

XSS 危险：JSONP 未经过滤的数据可能会引起 XSS 攻打，因而须要对返回的数据进行过滤和验证。
CSRF 攻打：应用 JSONP 时要留神防备 CSRF 攻打，能够通过增加随机数等形式加强安全性。
仅反对 GET 申请：JSONP 只反对 GET 申请，不适用于 POST 等其余 HTTP 办法。
难以解决 HTTP 谬误：JSONP 难以无效解决 HTTP 谬误，在申请失败时的异样解决比拟艰难。

随着技术的倒退，JSONP 已不再是首选跨域解决方案，但理解它的工作原理依然有助于咱们更深刻地了解跨域数据交互的基本原理。在理论我的项目中，依据具体需要和平安思考，倡议优先选择 CORS 或代理服务器形式解决跨域问题。

关于程序员:揭秘一文彻底搞懂JSONP

JSONP 是什么？

JSONP 的工作原理

JSONP 应用场景

应用 JSONP 注意事项