同源策略与Jsonp

同源策略与Jsonp

同源策略

同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。

同源策略,它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指,域名,协议,端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的,即检查是否同源,只有和百度同源的脚本才会被执行。如果非同源,那么在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问。

示例:

项目1:

setting.py

STATIC_URL = ‘/static/‘
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, ‘static‘),
)

 静态文件: 

<script src="http://code.jquery.com/jquery-latest.js"></script>

urls.py

from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
    url(r‘^admin/‘, admin.site.urls),
    url(r‘index/$‘,views.index),
    url(r‘ajax_send/$‘,views.ajax_send),
]

  

views.py

from django.shortcuts import render,HttpResponse

def index(request):
    return render(request,"index.html")

def ajax_send(request):   print(‘项目1...............‘)
    return HttpResponse("项目1的数据")

  

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<h3>pro1的首页</h3>

<button class="b1">send a request</button>
</body>
<script src="/static/jquery.js"></script>
<script>
    $(".b1").click(function(){
        $.ajax({
            //url:"/ajax_send/", //访问项目1的本路径
            url:"http://127.0.0.1:8080/ajax_send/", //访问项目2的路径
            success:function(data){
                alert(data);
            }
        })
    })

</script>
</html>

  

项目2的代码同上

//===================================setting.py

STATIC_URL = ‘/static/‘
STATICFILES_DIRS = (
    os.path.join(BASE_DIR,‘static‘),
)

//===================================urls.py

from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
    url(r‘^admin/‘, admin.site.urls),
    url(r‘index/$‘,views.index),
    url(r‘ajax_send/$‘,views.ajax_send),
]

//===================================views.py

from django.shortcuts import render,HttpResponse

def index(request):
    return render(request,"index.html")

def ajax_send(request):   print(‘项目2..............‘)
    return HttpResponse("项目2的数据")

//===================================index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<h3>pro2的首页</h3>

<button class="b2">send a request</button>
</body>
<script src="/static/jquery.js"></script>
<script>
    $(".b2").click(function(){
        $.ajax({
            url:"/ajax_send/",
            success:function(data){
                alert(data);
            }
        })
    })

</script>
</html>

  

同源问题: 当点击项目1的按钮时,发送了请求,但是会发现报错如下:

已拦截跨源请求:同源策略禁止读取位于 http://127.0.0.1:7766/SendAjax/ 的远程资源。(原因:CORS 头缺少 ‘Access-Control-Allow-Origin‘)。

但是注意,项目2中的访问已经发生了,说明是浏览器对非同源请求返回的结果做了拦截。

注意:jquery.js也是非同源请求,但却能拿到数据。script标签请求不拦截,就拦截ajax请求。

script标签请求:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<h3>pro1的首页</h3>

<button class="b1">send a request</button>
</body>
<script src="/static/jquery.js"></script>
<script>
    /*
    $(".b1").click(function(){
        $.ajax({
            //url:"/ajax_send/", //访问项目1的本路径
            url:"http://127.0.0.1:8080/ajax_send/", //访问项目2的路径
            success:function(data){
                alert(data);
            }
        })
    })
    */
</script>
<!-- 单发一个script请求。刷新页面则请求。-->
<script src="http://127.0.0.1:8080/ajax_send/"></script>

</html>

  

刷新页面:

项目2的返回值改成英文。定义成一个变量。

from django.shortcuts import render,HttpResponse

def index(request):
    return render(request,"index.html")

def ajax_send(request):
    print(‘项目2.........‘)
    # return HttpResponse("项目2的数据")
    return HttpResponse("baobao")

  

Jsonp

jsonp是json用来跨域的一个东西。原理是通过script标签的跨域特性来绕过同源策略。

思考:这算怎么回事?

原文地址:https://www.cnblogs.com/c-x-m/p/8921160.html

时间: 2024-10-10 18:21:37

同源策略与Jsonp的相关文章

同源策略和JSONP(概念性)

同源策略 浏览器有一个很重要的概念——同源策略(Same-Origin Policy). 所谓同源是指,域名,协议,端口相同.不同源的客户端脚本(javascript.ActionScript)在没明确授权的情况下,不能读写对方的资源. 同源策略是基于安全考虑的,当前域不能访问其他域的东西.但这也带来一个问题,不同域之间如何协助.    简单的来说,浏览器允许包含在页面A的脚本访问第二个页面B的数据资源,这一切是建立在A和B页面是同源的基础上. 同源策略是由Netscape提出的一个著名的安全策

Ajax跨域请求 同源策略与Jsonp

同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现.同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略.所谓同源是指,域名,协议,端口相同.当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个

同源策略、jsonp、阻塞事件

同源策略: 举个例子,你在访问 某个网页的时候比如 www.xxxx.com ,返回的html页面中存在的js在执行的时候只会在 xxxxx 这里执行,如果同时存在另一个tab 是 www.yyyyy.com 其中的js 在执行的时候只在 yyyyy 返回的这个首页网页中执行. 浏览器加载js的时候会判断 js 所属的 1.域名 2.端口 3.协议 jsonp: json 是数据表达格式,类似于xml 当然,我说的类似值得的是它们都是数据表达格式,但是实现方式和格式都不同,在此不多说. json

同源策略:JSONP和CORS

什么是同源策略: 同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源.同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互.这是一个用于隔离潜在恶意文件的重要安全机制. 但是两个源在达成共识后,需要相互传递数据就需要避开这个问题.所有就要使用JSONP和CORS 更多参考:点击 Jquery中JSONP官方文档:点击 一.JSONP处理非同源拦截 基于Ajax的JSONP使用方法:一般情况下使用ajax提供的方法即可. 传递数据方的地址

同源策略与JSONP劫持原理

同源策略 浏览器中有两个安全机制,一个浏览器沙盒(Sandbox),另一个就是同源策略(Same Origin Policy,简称SOP) ,下面介绍同源策略.同源是指同协议.同域名.同端口,必须三同,缺一不可.下面列举了一些例子,为方便读者了解哪些是属于同源,下面列举一些案例: 根据这个策略,a.com域名下的JavaScript无法跨域操作b.com域名下的对象.跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的.如下流程图: 流程图1. 流程图2. 不同源也意味着不能通信,

Django 【第十九篇】JS实现的ajax、同源策略和前端jsonp解决跨域问题

一.回顾jQuery实现的ajax 首先说一下ajax的优缺点 优点: AJAX使用Javascript技术向服务器发送异步请求: AJAX无须刷新整个页面: 因为服务器响应内容不再是整个页面,而是页面中的局部,所以AJAX性能高: jquery 实现的ajax index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t

JS实现的ajax和同源策略

一.回顾jQuery实现的ajax 首先说一下ajax的优缺点 优点: AJAX使用Javascript技术向服务器发送异步请求: AJAX无须刷新整个页面: 因为服务器响应内容不再是整个页面,而是页面中的局部,所以AJAX性能高: jquery 实现的ajax 1 <!DOCTYPE html> 2 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <

Web - JSONP和同源策略漫谈

0x00 前言 关于JSONP网上有很多文章了,我也是在拜读了别人的文章的基础上来写写自己的看法,这样可以加深自己印象,巩固一下学习效果.我们需要做的就是站在巨人的肩膀上眺望远方. 0x01 起 在Web前端开发中有一种安全机制,Javascript脚本只能访问与它同域的内容,这就是同源策略. 这里就需要先说明一个问题:如果确定脚本的域? html页面中试用脚本有两种方式:内联和引用. 上图中滑红框部分,src为引用方式,直接在script中写代码是内联方式. 如果html的页面url为:htt

同源策略 JSONP(实践篇)

JSONP详解 json相信大家都用的多,jsonp我就一直没有机会用到,但也经常看到,只知道是“用来跨域的”,一直不知道具体是个什么东西.今天总算搞明白了.下面一步步来搞清楚jsonp是个什么玩意. 同源策略 首先基于安全的原因,浏览器是存在同源策略这个机制的,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性.看起来不知道什么意思,实践一下就知道了. 1.随便建两个网页 一个端口是2698,一个2701,按照定义它们是不同源的. 2.用jQuery发起不同源的请求 在26