HTTP►CORS

什么是JSONP

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2020/01/28/%E4%BB%80%E4%B9%88%E6%98%AFJSONP/

摘要

本文主要讲述了：

  1. 什么是 JSONP
  2. 原理
  3. 局限性
  4. 安全性

正文

什么是 JSONP

JSON with Padding（带有填充的 JSON），简称为 JSONP 或 JSON-P。

JSONP 由 Bob Ippolito 在 2005 年提出。JSONP 可以绕过浏览器的同源政策限制，实现跨源通信。

注意：JSONP 返回的数据并不是 JSON，而是 JavaScript 文件。其Content-Type应为application/javascript。

示例：

a.example.com

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script>
      function parseResponse(userInfo) {
        console.log(userInfo);
      }
      let foo = document.createElement('script');
      foo.src = '//b.example.com/getUserInfo?callback=parseResponse';
      document.head.appendChild(foo);
    </script>
  </body>
</html>

b.example.com/getUserInfo?callback=parseResponse

1
2
3
4
5
parseResponse({
  firstName: 'foo',
  lastName: 'bar',
  age: 18,
});

注意：上述示例中的函数参数为 JSON 格式。

原理

<script>不受同源政策的限制，可以加载跨源的 JavaScript 文件。

局限性

  1. 只能以GET形式发起请求

安全性

  1. 允许远程服务器注入不受信任的第三方代码
  2. 容易遭到 CSRF 攻击

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2020/01/28/%E4%BB%80%E4%B9%88%E6%98%AFJSONP/

本文对你有帮助？请支持我

支付宝
微信