学习 同源策略,jsonp,跨域 随记

简介: 学习 同源策略,jsonp,跨域 随记


同源策略不阻止将动态脚本元素插入文档中
2.注意:jquey是不支持post方式跨域的。

为什么呢?
虽然采用post +动态生成iframe是可以达到post跨域的目的,但这样做是一个比较极端的方式,不建议采用.
也可以说get方式的跨域是合法的,post方式从安全角度上,被认为是不合法的, 万不得已还是不要剑走偏锋..

client端跨域访问的需求看来也引起w3c的注意了,看资料说html5 WebSocket标准支持跨域的数据交换,应该也是一个将来可选的跨域数据交换的解决方案

  理解跨域首先必须要了解同源策略。同源策略是浏览器上为安全性考虑实施的非常重要的安全策略。

何谓同源:

    URL由协议、域名、端口和路径组成,如果两个URL的协议、域名和端口相同,则表示他们同源

什么是跨域?

   概念:只要协议、域名、端口有任何一个不同,都被当作是不同的域

a.同源策略;

JS只能与同一个域中的页面进行通讯.如:运行在 http://domain:port/app1/page.html;上的脚本不能和http://domain:port/app3/page.html;的浏览器窗口或iframe 进行交互.不能访问它的cookie,接收它的HTTP响应等(但它可以向任何其他源发送HTTP请求);AJAX 和 webservice 也受此策略管束.这种手段就叫同源策略;

两个脚本被认为是同源的条件是:

协议相同(比如都是http://) ;端口相同(通常都是80) ; 域名相同;

如果这三个条件中有任何一条不满足,就不允许两个脚本进行交互.如:www.mydomain.com上的脚本不能访问video.mydomain.com上的页面 ,因为两者的域名不同,虽然后者是前者的子域.同样,它也不能访问www.mydomain.com:8080上的页面 ,因为端口不同,也不能访问about:blank 因为协议不同(后者不是http://)

跨域资源共享(CORS)

CROS(Cross-Origin Resource Sharing)跨域资源共享,定义了必须在访问跨域资源时,浏览器与服务器应该如何沟通。CROS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功还是失败。

什么是jsonp?

   维基百科的定义是:JSONP(JSON with Padding)是资料格式 JSON 的一种“使用模式”,可以让网页从别的网域要资   料。

  JSONP也叫填充式JSON,是应用JSON的一种新方法,只不过是被包含在函数调用中的JSON,例如:

 callback({"name","trigkit4"});

  JSONP由两部分组成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数,而数据就是传入回调函数中的JSON数据。

在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的。但是,在页面上引入不同域上的js脚本文件却是可以的,jsonp正是利用这个特性来实现的。

例如:

js文件载入成功后会执行我们在url参数中指定的函数,并且会把我们需要的json数据作为参数传入。所以jsonp是需要服务器端的页面进行相应的配合的。 

<?php

$callback = $_GET['callback'];//得到回调函数名

$data = array('a','b','c');//要返回的数据

echo $callback.'('.json_encode($data).')';//输出

?>

最终,输出结果为:dosomething(['a','b','c']);

如果你的页面使用jquery,那么通过它封装的方法就能很方便的来进行jsonp操作了。

jquery会自动生成一个全局函数来替换callback=?中的问号,之后获取到数据后又会自动销毁,实际上就是起一个临时代理函数的作用。$.getJSON方法会自动判断是否跨域,不跨域的话,就调用普通的ajax方法;跨域的话,则会以异步加载js文件的形式来调用jsonp的回调函

JSONP的优缺点

JSONP的优点是:它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;它的兼容性更好,在更加古老的浏览器中都可以运行,不需要XMLHttpRequest或ActiveX的支持;并且在请求完毕后可以通过调用callback的方式回传结果。

JSONP的缺点则是:它只支持GET请求而不支持POST等其它类型的HTTP请求;它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

Jsonp原理:

首先在客户端注册一个callback (如:'jsoncallback'), 然后把callback的名字(如:jsonp1236827957501)传给服务器。注意:服务端得到callback的数值后,要用jsonp1236827957501(......)把将要输出的json内容包括起来,此时,服务器生成 json 数据才能被客户端正确接收。

然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 'jsoncallback'的值 jsonp1236827957501 .

最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。

客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时javascript文档数据,作为参数,
传入到了客户端预先定义好的 callback 函数(如上例中jquery $.ajax()方法封装的的success: function (json))里.(动态执行回调函数)

可以说jsonp的方式原理上和是一致的(qq空间就是大量采用这种方式来实现跨域数据交换的) .JSONP是一种脚本注入(Script Injection)行为,所以也有一定的安全隐患.

jsonp的原理:

首先在客户端注册一个callback (如:'jsoncallback'), 然后把callback的名字(如:success_jsonpCallback)传给服务器端对应的处理函数。

服务器先生成需要返回给客户端的 json 数据。然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数(jsoncallback)的值(success_jsonpCallback) 。

最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。
客户端浏览器,解析script标签,并将服务器端返回的数据,作为参数,
传入到了客户端预先定义好的 callback 函数(如上例中jquery $.ajax()方法封装的的success: function (json))里。

实际上跨域是通过动态增加script来加载数据,无法直接获得数据,所以需要使用回调函数。

执行原理:

发送请求时需要传一个callback的回调函数名到服务器端,服务器端拿到这个回调函数名,再将返回数据用参数的形式反回到客户端,这样客户端就能够调到。

所以发送请求URL的地址后面一定要上jsoncallback=?这样的参数,jquery会将?号自动替换成自动生成的回调函数的名称。

所以最终的实际请求为:http://api.taobao.com/apitools/ajax_props.do&jsoncallback=jsonp1322444422697

所以和ajax的方式想比较,也就是callback函数一个是自动生成的函数名,一个是手工指定的函数名

原理的示例代码:

//客户端的JAVASCRIPT代码

var script=document.createElement("script");

script.src="http://www.pl4cj.com:8888/5/6/action.php?param=123&callback="+fnName;

document.getElementsByTagName("head")[0].appendChild(script)

//服务器端的PHP代码,一定要有callback来进行回调,在这里加上括号,是让它以语句块的方式来进行解析

<?php

echo $_GET["callback"]."(".json_encode($_GET).");";

?

相关文章
|
缓存 监控 算法
JVM简介—2.垃圾回收器和内存分配策略
本文介绍了Java垃圾回收机制的多个方面,包括垃圾回收概述、对象存活判断、引用类型介绍、垃圾收集算法、垃圾收集器设计、具体垃圾回收器详情、Stop The World现象、内存分配与回收策略、新生代配置演示、内存泄漏和溢出问题以及JDK提供的相关工具。
JVM简介—2.垃圾回收器和内存分配策略
|
缓存 开发工具 数据安全/隐私保护
通过一篇文章带你玩转git和GitHub
在现代软件开发中,版本控制系统是不可或缺的工具。Git和Github是其中最受欢迎的组合。Git是一个开源的分布式版本控制系统,用于追踪代码的改动,而Github则是一个基于Git的代码托管平台,提供了代码托管、协作开发等功能。
415 2
通过一篇文章带你玩转git和GitHub
|
安全 数据安全/隐私保护 Windows
2024一带一路暨金砖国家技能发展与技术创新大赛第二届企业信息系统安全赛项选拔赛(北部赛区)
本文介绍了如何通过分析Kerberos网络流量来查找受感染Windows计算机的信息,包括主机名、IP地址和MAC地址。通过过滤特定的网络流量,可以提取出这些关键信息,帮助识别和定位受感染的设备。文中还提供了相关练习网站,供读者进一步学习和实践。
194 2
|
JSON 测试技术 API
【探花交友】day06—即时通信(二)
【探花交友】day06—即时通信(二)
213 0
|
关系型数据库 MySQL Java
MySQL为Null会导致5个问题,个个致命!(7)
MySQL为Null会导致5个问题,个个致命!(7)
198 0
MySQL为Null会导致5个问题,个个致命!(7)
|
20天前
|
人工智能 数据可视化 安全
王炸组合!阿里云 OpenClaw X 飞书 CLI,开启 Agent 基建狂潮!(附带免费使用6个月服务器)
本文详解如何用阿里云Lighthouse一键部署OpenClaw,结合飞书CLI等工具,让AI真正“动手”——自动群发、生成科研日报、整理知识库。核心理念:未来软件应为AI而生,CLI即AI的“手脚”,实现高效、安全、可控的智能自动化。
34899 55
王炸组合!阿里云 OpenClaw X 飞书 CLI,开启 Agent 基建狂潮!(附带免费使用6个月服务器)
|
15天前
|
人工智能 自然语言处理 安全
Claude Code 全攻略:命令大全 + 实战工作流(建议收藏)
本文介绍了Claude Code终端AI助手的使用指南,主要内容包括:1)常用命令如版本查看、项目启动和更新;2)三种工作模式切换及界面说明;3)核心功能指令速查表,包含初始化、压缩对话、清除历史等操作;4)详细解析了/init、/help、/clear、/compact、/memory等关键命令的使用场景和语法。文章通过丰富的界面截图和场景示例,帮助开发者快速掌握如何通过命令行和交互界面高效使用Claude Code进行项目开发,特别强调了CLAUDE.md文件作为项目知识库的核心作用。
13875 42
Claude Code 全攻略:命令大全 + 实战工作流(建议收藏)
|
3天前
|
缓存 人工智能 自然语言处理
我对比了8个Claude API中转站,踩了不少坑,总结给你
本文是个人开发者耗时1周实测的8大Claude中转平台横向评测,聚焦Claude Code真实体验:以加权均价(¥/M token)、内部汇率、缓存支持、模型真实性及稳定性为核心指标。