同源策略、跨越请求和JSONP

最新推荐文章于 2024-03-04 11:49:02 发布
最新推荐文章于 2024-03-04 11:49:02 发布
阅读量479 收藏
点赞数
分类专栏： 跨域 文章标签： javascript

1、同源策略

同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。这个策略可以追溯到 Netscape Navigator 2.0。

Mozilla 认为两个页面拥有相同的源，如果它们的协议、端口（如果指明了的话）和主机名都相同。下表给出了相对http://store.company.com/dir/page.html同源检测的结果:

URL 结果 原因
http://store.company.com/dir2/other.html 成功  
http://store.company.com/dir/inner/another.html 成功  
https://store.company.com/secure.html 失败 协议不同
http://store.company.com:81/dir/etc.html 失败 端口不同
http://news.company.com/dir/other.html 失败 主机名不同

同源策略，简单地说就是要求动态内容（例如，JavaScript或者VBScript）只能阅读与之同源的那些HTTP应答和cookies，而不能阅读来自不同源的内容。更为有趣的是，同源策略对写操作没有任何限制。

 

2、JSONP

以上同源策略是基于安全考虑的，当前域不能访问其他域的东西。但这也带来一个问题，不同域之间如何协助。

 

先看一个简单的不同源请求的例子。准备2段代码，用来模拟2个不同源的服务器，分别部署在2个不同的web容器上。为了方便，我们直接使用jquery进行异步请求，不使用原生的 XMLHttpRequest.

 

localfile.html

 

Html代码   收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>  
  6. <body>  
  7.     <script type="text/javascript">  
  8.     $(document).ready(function () {  
  9.         $.get('./sayhello.js', function(result) {});  
  10.         $.get('http://freeyun.duapp.com/jsonp/sayhello.js', function(result) {});  
  11.     });  
  12.     </script>  
  13. </body>  
  14. </html>  

 

 

sayhello.js

 

Js代码   收藏代码
  1. alert("hello jsonp");  
 

 

这两个文件同时放到一个远程的服务器freeyun.duapp.com和本机的容器localhost的容器上。

在本机访问http://localhost:8080/jsonp/localfile.html，我们只能看到一个 hello jsonp的提示框。

通过F12打开chrome流程器的调试窗口，刷新，在network一栏可以看到如下信息：

 

对于远程服务器的请求出错了。

在console栏可以看到出错信息为：

XMLHttpRequest cannot load http://freeyun.duapp.com/jsonp/sayhello.js. Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin.

这个也就是因不同源导致了一个跨域请求失败。

 

那怎么解决这个问题呢？你一定发现了刚刚我们localfile.html里对jquery的引用，script标签里src属性里的jquery路径和我们的本地服务器并不是同源的，也就是说script标签里的src属性里的路径不受同源策略的限制的。

 

 

我们修改一下localfile.html

 

Html代码   收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <script type="text/javascript" src="http://freeyun.duapp.com/jsonp/sayhello.js"></script>  
  6. </head>  
  7. <body>  
  8. </body>  
  9. </html>  

 

 重新访问localfile.html，这样依然会弹出 hello jsonp 的提示框，也就是说我们能过本地服务器访问到的远程服务器信息。

 

 

Html代码   收藏代码
  1. 通过script标签的开放策略，抓到的资料并不是 JSON，而是任意的 JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。  

 JSON只是一种数据描述格式，究竟是JSONP还是其他的“XXP”、“YYP”其实只是2个不同源的服务器之间的数据交换采用什么样的格式而已。

 

 

因为跨域的请求主要是为了能从别的服务器上获取数据，那么一般在数据获取完成后本地服务器都会做相应的数据处理，所以在JSONP这种模式里，会要求把返回结果放到本地一个回调函数中，这样就能直接通过本地回调方法对数据进行加工，这也就是我们常说的JSONP模式。

ywltoread
关注
专栏目录
同源策略与跨域访问与跨域攻击CSRF
向小雅的博客
11-03 631
参考文章：https://blog.csdn.net/qq_38128179/article/details/84956552 同源策略 浏览器的同源策略限制，是浏览器最核心也最基本的安全功能。web基于同源策略构建，浏览器是针对同源策略的实现。同源策略会阻止一个域的js脚本和另外一个域的内容进行交互。 同源指协议+域名+端口三者相同 可以在一定程度上防止跨域攻击CSRF。 跨域访问 访问不同源，即跨域。 协议不同、域名不同（主域名、子域名）、端口不同 比如https://www.baidu.com:808
同源政策 、跨域及解决方法——jsonp,CORS
泊一的博客
11-10 741
同源政策 Ajax请求限制 Ajax 只能向自己的服务器发送请求。比如现在有一个A网站、有一个B网站，A网站中的 HTML 文件只能向A网站服务器中发送 Ajax请求，B网站中的 HTML 文件只能向 B 网站中发送 Ajax 请求，但是 A 网站是不能向 B 网站发送 Ajax请求的，同理，B网站也不能向 A 网站发送 Ajax请求。 什么是同源 如果两个页面拥有相同的协议、域名和端口，那么...
同源策略漏洞测试
ll18672920250的博客
03-19 4278
在对一个网站进行渗透测试的过程中，为什么我总是感觉在猜呢？是水平太低，还是本来就有很大猜的成分？求解惑！谢谢！
浅谈同源策略漏洞及XSSCSRF
actistsec的博客
10-21 924
跨域漏洞/XSS/CSRF在蜜罐上也有相应利用点
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
12-11
由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源。如果要进行跨域请求，我们可以通过使用html的script标记来进行跨域请求，并在响应中返回要执行的script代码，其中可以直接使用JSON...
同源策略与跨域
热门推荐
mijichui2153的博客
11-21 1万+
前言：最近业务上前端同学多次联系说访问腾讯云cos资源的时候因为跨域的问题访问不到。大致看了下腾讯云关于设置跨域访问的教程，按照前端同学给的域名等选项就给配了，而且测试下来也是好的。但是呢一直不知道什么是跨域这里就做一个简单的学习记录。 一、同源策略 同源策略(Same Origin Policy)是一种约定，它是浏览器最核心也是最基本的安全功能。同源策略会阻止一个域的javascrip脚本和另一个域的内容进行交互，是用于隔离潜在恶意文件的关键安全机制；关于这一点我们后面会举例说明。...
Ajax跨域请求解决方案-JSONP
12-03
然而，Ajax技术在实现动态网页交互时常常需要跨越这个限制，这时就引入了JSONP（JSON with Padding）作为跨域请求的一种解决方案。本文将详细介绍JSONP的工作原理以及如何在ASP.NET网站开发中应用JSONP解决Ajax跨域...
ajax跨越请求
03-27
总结，Ajax跨域请求涉及浏览器的同源策略、CORS、JSONP、POSTMessage等多个知识点，理解并熟练运用这些技术是现代Web开发中的必备技能。在确保安全性的前提下，合理地利用跨域机制可以极大地提升用户体验和应用性能...
同源策略&CORS跨域漏洞&JSONP跨域漏洞
niqiu320的博客
04-23 461
同源策略介绍 什么是同源策略？ 同源策略是一种约定，它是浏览器最核心的也是最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能会受影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对 同源策略的一种实现。 同源策略，它是由Netscape提出的一个著名的安全策略。 当一个浏览器的两个tab页中分别打开来百度和谷歌的页面。 当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的。 即检查是否同源，只有和百度同源的脚本才会执行。 如果非同源，那么在请求数据时，浏览器会在控制台中报
跨域 同源策略 CORS漏洞
weixin_42299862的博客
09-09 1000
https://blog.csdn.net/qq_38128179/article/details/84956552 一、什么是跨域 当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域 非同源限制 【1】无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB 【2】无法接触非同源网页的 DOM 【3】无法向非同源地址发送 AJAX 请求 二、为什么会出现跨域问题：SOP同源策略 出于浏览器的同源策略限制。 同...
浏览器同源策略、跨域解决方案JSONP、CORS
yinqian_Golang的博客
05-15 321
同源策略 同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。 同源的定义： 两个页面的协议，域名，端口相同。 如果两个脚本非同源，会有三个行为受到限制： DOM 无法获得； Cookie、LocalStorage 和 In...
《web应用安全》被动攻击与同源策略
weixin_42368489的博客
09-23 379
被动攻击与同源策略 浏览器针对被动攻击的防御策略--沙盒（沙盒的核心概念为同源策略） 主动攻击 指攻击者直接攻击web服务器，如SQL注入 被动攻击 单纯的被动攻击攻击者针对网站的用户设下陷阱，利用掉入陷阱的用户来攻击应用程序 恶意利用网站进行的被动攻击 利用正规网站进行的被动攻击，入侵正规网站，往其内容中嵌入恶意代码， 用户在浏览了含有恶意代码的内容后，就会感染病毒。 在正规网站中设置陷...
Jsonp&Cors跨域（同源策略、跨域、劫持漏洞）
精品博客,你值得一看~
08-16 905
CORS）跨域资源共享，其思想是使用自定义的HTTP头部字段让浏览 器与服务器进行沟通，它允许浏览器向跨域服务器发出XMLHttpRequest请求，从而克服AJAX只能同源 使用的限制。CORS的基本原理是当浏览器在进行跨域请求时，会在请求中添加头部origin来表明自己的协议、主 机、端口号，当服务器接到请求并且看到这个origin头部时，如果设置过允许此域名进行访问，就得添 加头部Access-Control-Allow-Origin。
同源策略 & 内容安全策略
4ct10n
12-18 1911
为了更好的理解掌握 同源策略（Same origin policy）、内容安全策略(CSP,ContentSecurityPolicy)、跨站脚本攻击(Cross Site Scripting)、跨站请求伪造（Cross-site request forgery）、服务器端请求伪造（Server-Side Request Forgery）做了以下实验环境配置 在80端口开放Apache服务器 在80
什么是同源策略？如何检测跨站点 WebSocket 劫持漏洞？post 表单跳转跨域问题、Ajax跨域请求、浏览器特性和安全策略、WebSocket 协议连接
最新发布
代码讲故事
03-04 634
什么是同源策略？如何检测跨站点 WebSocket 劫持漏洞？post 表单跳转跨域问题、Ajax跨域请求、浏览器特性和安全策略、WebSocket 协议连接。
web安全同源策略以及跨站脚本，跨站请求伪造
hello world
11-30 1084
http是无状态协议 所以服务器为了辨识访问者是否已经访问过 会给浏览器一个cookie 浏览器再次访问时候 将cookie传过去 服务器就可以知道 该访问者已经登陆过 不需要再次登陆       但是早起 服务器是被动 也就是 当浏览器发起请求 才会有回应，如果说对于一些特殊情况，比如需要实时更新的股票信息，不免需要 浏览器每间隔一段时间重复去询问 查询股票是否已经变化 浏览器 股...
Web安全基础：同源策略
qq_43642093的博客
03-17 5554
前言 二、同源策略 1.主动攻击与被动攻击 2.沙盒 3.同源策略 前言 首先讲述被动攻击，介绍浏览器针对此类攻击的防御策略——沙盒。沙盒技术的核心概念为“同源策略”，对于理解Web应用的安全隐患智攻关重要。 二、同源策略 1.主动攻击与被动攻击 针对Web应用程序的攻击可分为主动攻击（Active Attack）和被动攻击（Passive Attack）。 主动攻击指攻击者直接攻击Web服务器，例如SQL注入攻击。 1.1 被动攻击 攻击者并不直接攻击服务器，而是针对网站的用户..
为什么jsonp不跨越，axios请求跨域
06-06
JSONP 不跨域的原因是因为 JSONP 利用的是通过 script 标签加载资源不受同源策略的限制，但是这种方式只适用于 GET 请求，而且服务端需要特殊的支持，返回的数据必须是一个函数调用，而不是普通的 JSON 格式数据。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值