前端百题斩（026）：浏览器让步安全性铸就JSONP

2023-12-25 10:29:16

跨域通信的便捷之门：深入了解 JSONP

同源策略：网络世界的安全屏障

为了保障网络安全，浏览器实施了同源策略，它限制了不同网站之间的通信，以防止恶意网站窃取用户敏感数据。然而，为了提升用户体验，浏览器允许部分资源跨越同源限制，其中包括 JavaScript、CSS 和图像。这为跨域通信技术，如 JSONP，提供了可行性。

JSONP：跨越同源鸿沟的巧妙之策

JSONP（JSON with Padding）是一种简便易行的技术，它利用浏览器的这一安全性让步来实现跨域通信。其基本原理是，允许非同源网站向当前页面添加一个 <script> 标签，该标签指向一个包含 JSON 数据的脚本。浏览器解析 <script> 标签时，会向非同源服务器发送请求并获取包含 JSON 数据的响应。随后，浏览器将 JSON 数据执行为 JavaScript 代码，从而使当前页面能够访问这些数据。

JSONP 的实际应用

以下是一个使用 JSONP 的简单示例：

<script>
  // 定义回调函数，在收到 JSON 数据后调用
  function callback(data) {
    // 使用 JSON 数据
    console.log(data);
  }

  // 创建指向包含 JSON 数据脚本的 `<script>` 标签
  var script = document.createElement('script');
  script.src = 'https://example.com/data.json?callback=callback';

  // 将 `<script>` 标签添加到当前页面
  document.body.appendChild(script);
</script>

在这个示例中，我们定义了一个回调函数 callback()，它将在收到 JSON 数据后执行。然后，我们创建了一个 <script> 标签，指向一个包含 JSON 数据的脚本，并将其添加到当前页面。浏览器解析 <script> 标签时，会向 example.com 服务器发送请求，并获取包含 JSON 数据的响应。浏览器将 JSON 数据执行为 JavaScript 代码，使我们能够在当前页面访问这些数据。

JSONP 的优缺点：一把双刃剑

JSONP 作为一种跨域通信技术，具有以下优点：

易于实现： JSONP 的实现简单直接，只需使用 <script> 标签即可。
广泛兼容： JSONP 与大多数现代浏览器兼容。

然而，JSONP 也存在一些缺点：

仅支持 GET 请求： JSONP 仅支持 GET 请求，不适用于需要发送 POST 或其他类型请求的场景。
依赖回调函数： JSONP 依赖于回调函数，这可能会使代码难以维护和调试。
安全隐患： JSONP 存在安全隐患，恶意网站可以通过 JSONP 来窃取用户数据或执行其他恶意操作。

结语：谨慎使用 JSONP

JSONP 是一种简单实用的跨域通信技术，但它也存在一些局限和安全风险。在使用 JSONP 时，应充分考虑其优缺点，并采取适当的安全措施来保障数据安全。

常见问题解答

1. JSONP 是如何工作的？

JSONP 利用浏览器的同源策略让步，允许非同源网站向当前页面添加一个 <script> 标签，该标签指向一个包含 JSON 数据的脚本。浏览器解析 <script> 标签时，会向非同源服务器发送请求并获取包含 JSON 数据的响应，随后将 JSON 数据执行为 JavaScript 代码，使当前页面能够访问这些数据。

2. JSONP 有哪些优点？

JSONP 的优点包括易于实现和广泛兼容。

3. JSONP 有哪些缺点？

JSONP 的缺点包括仅支持 GET 请求、依赖回调函数以及存在安全隐患。

4. 在使用 JSONP 时应注意什么？

在使用 JSONP 时，应考虑其优缺点并采取适当的安全措施来保障数据安全。

5. JSONP 与其他跨域通信技术相比有什么不同？

JSONP 与其他跨域通信技术，如 CORS 和 AJAX，不同，因为它依赖于回调函数且仅支持 GET 请求。