当前位置：首页 > news >正文

JSONP 跨域访问(1), 简介, 原理, 实验, 缺点

news 2025/7/9 12:53:04

JSONP 跨域访问(1), 简介, 原理, 实验, 缺点

一, JSONP 简介

JSONP（JSON with Padding）是一种非官方跨域数据交互协议。它允许web页面从不同的域名下加载数据。
由于同源策略，web页面通过XMLHttpRequest调用通常只允许访问与其自身相同域名的资源。
JSONP是一种在早期浏览器中绕过这一限制的方法。

<script> 标签天生就拥有跨域请求的能力，这是由浏览器的同源策略所允许的。
这种特性被用于加载来自不同源（域名、协议或端口）的 JavaScript 文件，例如，从 CDN（内容分发网络）加载库或框架。

JSONP（JSON with Padding）正是基于这个能力来实现跨域请求的。通过动态创建一个

二, JSONP 工作原理

1. 客户端发起请求：

客户端通过<script>标签发起一个GET请求。请求的URL包含一个查询参数，通常是callback，它的值是一个将被服务器端调用的函数名。

2. 服务器端响应：

服务器端收到请求后，会将数据封装在一个函数调用中。这个函数就是请求URL中指定的callback参数的值。

3. 客户端处理：

响应返回给客户端后，由于是<script>标签的请求，所以返回的JavaScript代码会立即执行。
此时，客户端已经定义了一个与callback参数值相同名字的函数，因此，这个函数会被调用，并传入解析后的JSON数据作为参数。

4. 完成交互：

客户端的回调函数执行，处理传入的数据。

三, 代码实验

1. 环境准备

192.168.112.200 html页面
192.168.112.202 php脚本

2. 实验目的:

访问200上的html页面, 由html跨域访问202上的php脚本.

3. 实验过程:

(1)在200服务器上准备一个jsonp.html页面:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script type="text/javascript">// 这里定义你的回调函数function jsonpCallback(data) {// 处理JSON数据的代码console.log(data);}</script>    <script type="text/javascript" src="http://192.168.112.202/security/jsonp.php?callback=jsonpCallback"></script>
</head><body></body></html>

这个页面定义了一个回调函数jsonpCallback(), 它用于处理响应的json.
然后通过一个<script>标签向202服务器发送GET请求, 通过callback参数传入函数名.

(2) 在202服务器上准备一个jsonp.php脚本.

<?php
$person = array("name" => "John Doe","age" => "30","occupation" => "Developer"
);
$jsonString = json_encode($person);
echo $_GET['callback'] . "(" . $jsonString . ")";
?>

服务器这段代码生成一个叫做jsonString的json字符串, 返回的数据通过拼接而成, 前面是GET传递过来的参数值$_GET['callback'], 后面是被括号括起来的json数据"(" . $jsonString . ")".

(3) 访问200服务器上的jsonp.html页面:

http://192.168.112.200/jsonp/jsonp.html

上面的url向200服务器发送GET请求访问页面, 传入参数callback=jsonpCallback.
接下来200服务器上的jsonp.php执行, 生成json字符串, $_GET['callback'] 的值由前端传过来是jsonpCallback, 那么最后拼接出来就是:

jsonpCallback({"name": "John Doe", "age": "30", "occupation": "Developer"});

可以看到服务器就是返回了一段js代码, 因为前端是使用<script>标签请求的js, 所以响应返回后, 前端会立刻执行返回的js代码, 而这段代码是调用前端定义的jsonpCallback()函数, 并传入服务器生成的json字符串做进一步处理.

四, JSONP的缺点

现在使用 JSONP 进行跨域请求的情况已经不太常见了。主要原因是它的安全问题和功能限制，尤其是以下几点：

1. 安全性：

JSONP 非常容易受到跨站脚本攻击（XSS）的影响。因为它通过 <script> 标签接收执行代码，如果攻击者可以控制 JSONP 响应，他们可以在用户的浏览器中执行恶意代码。

2. 受限的HTTP方法：

JSONP 只能进行 GET 请求，不能使用 POST、PUT、DELETE 等 HTTP 方法，这在现代应用程序中是一个严重的限制。

3. 缺乏错误处理：

在 JSONP 中，如果请求失败，很难准确地捕捉到错误并进行处理，因为 <script> 标签没有提供标准的错误监听机制。

4. 缺乏直接支持：

JSONP 需要服务器特别支持返回 JSONP 响应，这需要服务器端进行额外的编码工作。

相比之下，CORS（跨源资源共享）是一个 W3C 标准，现代浏览器都支持这个标准。
CORS 允许浏览器向另一个域名的服务器发送XMLHttpRequest或 Fetch API 请求，只要服务器返回正确的 CORS 响应头，就能够实现安全的跨域请求。

因为 CORS 提供了更细粒度的控制，更好的安全性和更全面的HTTP方法支持，所以它已经成为了处理跨域请求的首选方式。

在新的Web应用中，建议使用 CORS 而不是 JSONP。

JSONP 跨域访问(1), 简介, 原理, 实验, 缺点

JSONP 跨域访问(1), 简介, 原理, 实验, 缺点一, JSONP 简介 JSONP（JSON with Padding）是一种非官方跨域数据交互协议。它允许web页面从不同的域名下加载数据。由于同源策略，web页面通过XMLHttpRequest调用通常只允许访问与其自身相同域名…...

编程日记 2023/11/4 9:33:14

velero备份k8s集群

流程图 velero备份原理本地 Velero 客户端发送备份指令。Kubernetes 集群内就会创建一个 Backup 对象。BackupController 监测 Backup 对象并开始备份过程。BackupController 会向 API Server 查询相关数据。BackupController 将查询到的数据备份到远端的对象存储。 velero的…...

编程日记 2023/11/4 9:30:10

描述低轨星座的特点和通信挑战，以及它们在5G和B5G中的作用。

文章目录 2章4 章5章（没看）6章（没看） 2章将卫星星座中每个物理链路中可实现的数据速率、传播延迟和多普勒频移与3GPP技术报告中的参数进行分析和比较[3]。相关配置面向连接的网络，预先简历链路卫星和地面终端有…...

编程日记 2023/11/4 9:29:09

Spring Boot实践 --windows环境下 K8s 部署 Docker

第一步：搭建项目并制作合适的jar包这里我们准备好前面项目用户管理系统项目里的jar包。测试功能，定时任务会每过10s打印一次日志： E:\test>java -jar demospringboot-0.0.1-SNAPSHOT.jar2023-11-01 20:24:21.059 INFO 11848 --- [ …...

编程日记 2023/11/4 9:28:08

Linux 将Qt程序打包为AppImage包

前言在 Linux 环境下，开发完 Qt 程序后，也需要制作为一个安装包或者可执行文件进行分发。这里介绍使用 linuxdeployqt 将 Qt 程序打包为 .AppImage 应用程序（类似于 Windows 的绿色免安装软件） 环境配置配置 Qt 环境变量这…...

编程日记 2023/11/4 9:27:06

修复国产电脑麒麟系统开机出现initramfs 问题

目录预览一、问题描述二、原因分析三、解决方案四、知识点呀initramfsBusyBox 五、参考链接一、问题描述国产麒麟系统出现 initramfs 模式二、原因分析一般在拷贝卡顿过程【强制关机】或者电【脑异常断电】的情况下概率性导致系统分区损坏，重启后大概率就会进…...

编程日记 2023/11/4 9:26:03

机器人控制算法—如何使用C++读取pgm格式的栅格地图并转化为ROS地图格式的data?

1.Introduction 近期正在做全局规划局部动态规划的项目，目前遇到的问题是，我们如何利用C处理pgm地图文件。即将地图信息要与像素点结合起来。所以我们需要知道地图读取和处理的底层原理，这样更好地在非ROS平台下移植。 2.Main 如下几条信息…...

编程日记 2023/11/4 9:24:00

kafka入门以及与spring整合 Message.java import java.util.Date;public class Message {private int id;private int fromId;private int toId;private String conversationId;private String content;private int status;private Date createTime;public int getId() {retur…...

编程日记 2023/11/4 9:21:56

计算机网络——第一章时延部分深入学习、相关习题及详细解析

目录时延相关习题1 习题1-改习题2 时延相关之前我们学习过，时延由发送时延、传播时延和处理时延三部分构成。发送时延的计算公式为“分组长度除以发送速率”， 发送速率应该从网卡速率、信道带宽、以及对端的接口速率中取最小。传播时延的计…...

编程日记 2023/11/4 9:20:56

CSS3媒体查询与页面自适应

2017年9月，W3C发布媒体查询(Media Query Level 4)候选推荐标准规范，它扩展了已经发布的媒体查询的功能。该规范用于CSS的media规则，可以为文档设定特定条件的样式，也可以用于HTML、JavaScript等语言。 1、媒体查询基础媒体查询…...

编程日记 2023/11/4 9:19:54

UG\NX二次开发超长的对象属性值，怎么设置

文章作者：里海来源网站：里海NX二次开发3000例专栏感谢粉丝订阅感谢 Dr. Lin 订阅本专栏，非常感谢。简介使用UF_ATTR_assign设置对象属性，如果属性值超过UF_ATTR_MAX_STRING_LEN则会报错。 #define UF_ATTR_MAX_STRING_LEN 132 怎么办呢？下面这种方法可以解决：效果 …...

编程日记 2023/11/4 9:18:52

流媒体服务实现H5实时预览视频

目录背景方案业务实践细节注意待办背景客户aws服务磁盘存储告急，最高可扩容16T。排查如下：主要是视频文件存在大量复制使用的情况。例如发布节目时复制、预览时复制，这样上传一份视频后最大会有四份拷贝（预览、普通发布、互动…...

编程日记 2023/11/4 9:17:51

C++适配器

文章目录引言栈和队列 priority_queue仿函数迭代器区间引言栈的特性是先进后出，队列的特性是先进先出，然而双向队列同时具有栈和队列的特性，所以我们可以通过双向队列来适配出栈和队列。先看库里面栈和队列 stack和queue模板参数里面都…...

编程日记 2023/11/4 9:15:48

基于openresty waf二次开发多次匹配到的ip再做拉黑

我们想在openresty waf的基础上做二次开发，比如再精确一些。比如我们先匹配到了select的url我们先打分10分，匹配到cc 1000/s我们再给这个ip打10分…直到100分我们就拉黑这个ip。 [openresty waf][1] #cat reids_w.lua require lib local redis require…...

编程日记 2023/11/4 9:14:47

新一代构建工具Vite-xyphf

一、什么vite? vite:是一款思维比较前卫而且先进的构建工具,他解决了一些webpack解决不了的问题——在开发环境下可以实现按需编译，加快了开发速度。而在生产环境下，它使用Rollup进行打包，提供更好的tree-shaking、代码压缩和性能优化&…...

编程日记 2023/11/4 9:12:45

Flink源码解析三之执行计划⽣成

JobManager Leader 选举首先flink会依据配置获取RecoveryMode,RecoveryMode一共两两种:STANDALONE和ZOOKEEPER。如果用户配置的是STANDALONE,会直接去配置中获取JobManager的地址如果用户配置的是ZOOKEEPER,flink会首先尝试连接zookeeper,利用zookeeper的leadder选举服务发现…...

编程日记 2023/11/4 9:11:43

Flutter 常见错误记录总结

1、当 flutter pub get 指令报如下错误时： pub get failed command: "/Users/***/developer/flutter/bin/cache/dart-sdk/bin/dart __deprecated_pub --color --directory . get --example" pub env: { "FLUTTER_ROOT": "/Users/***/dev…...

编程日记 2023/11/4 9:10:42

[ASP]校无忧在线报名系统 v2.1

校无忧在线报名系统为了满足各地不同的报名人员的需求，为提供更为高效、方便、快捷的报名条件，同时也为减轻管理人员的工作难度；更为协调报名人员与管理人员的关系，快速提高了报名人员与管理人员的工作效率应运而生。系统适用于政…...

编程日记 2023/11/4 9:09:39

【Hydro】部分基流分割方法及程序代码说明

目录说明一、数字滤波法单参数数字滤波Lyne-Hollick滤波法Chapman滤波法Chapman-Maxwell滤波法Boughton-Chapman滤波法双参数滤波法Eckhardt滤波法二、其他基流分割方法基流指数（BFI）法时间步长（HYSEP）法PART法加里宁-阿里巴扬…...

编程日记 2023/11/4 9:08:38

C#Regex正则表达式（Regular Expression）

在C#中，Regex是正则表达式（Regular Expression）的缩写，它是一种强大的文本匹配和处理工具。正则表达式是一种用于描述模式的字符串，它可以用来在文本中查找、替换和提取满足特定模式的内容。在C#中，你可以…...

编程日记 2023/11/4 9:07:36

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用，操作系统：Ubuntu24.04，Neofj版本：2025.04.0。 Apt安装 Neofj可以进行官网安装：Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法最新版…...

编程新知 2025/7/8 12:02:42

（十）学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端，同时完善学生端的构建。本次工作主要包括： 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑一、学生端在主界面可以选择自己的用户角色选择学生则进入学生登录界面…...

编程新知 2025/7/9 4:24:11

【Oracle APEX开发小技巧12】

有如下需求： 有一个问题反馈页面，要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据，方便管理员及时处理反馈。我的方法：直接将逻辑写在SQL中，这样可以直接在页面展示完整代码： SELECTSF.FE…...

编程新知 2025/7/8 14:36:33

条件运算符

C中的三目运算符（也称条件运算符，英文：ternary operator）是一种简洁的条件选择语句，语法如下： 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true，则整个表达式的结果为“表达式1”…...

编程新知 2025/7/6 13:40:50

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备环境搭建： 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号项目创建： File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

编程新知 2025/7/8 20:29:33