美文网首页饥人谷技术博客
同源策略、跨域、jsonp

同源策略、跨域、jsonp

作者: Nicklzy | 来源:发表于2016-09-19 10:56 被阅读200次

什么是同源策略

  • 同源策略是浏览器的安全设置。指的是在
  • 相同协议:
  • 相同域名:
  • 相同端口;

的网站只能访问与包含它的页面位于同一个域中的资源。

什么是跨域?跨域有几种实现形式

  • 跨域:实现不同域名下的信息通信。
  1. 降域
    1. 比如把child.a.com和a.com和xxx.child.a.com都可以降域为a.com
    • 实现的话需要在两个需要进行跨域的网站script都写document.domain = 'a.com'进行降域
    • 其中ajax不受降域的影响,得用iframe在页面中引用另一个页面的这种方式
    • 域名只能往下设置。比如xxx.child.a.com只能往下变成chlid.a.com或者再往下变成a.com。但是如果到了a.com就不能再回去到child.a.com、xxx.child.a.com
    • 降域有安全性的问题,如果一个子域名被攻击,多个被降域的域名都会被连带。
  • jsonp
  • CORS
  • postmessage(html5的功能)

http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html

jsonp 的原理是什么

首先json是一种数据格式,而jsonp是一种数据的调用方式。
这个方式允许用户传递一个callback参数给服务器端,然后服务器端会根据这个callback所附着的参数来响应数据,服务器端会按照这个callback作为函数名来包裹住json数据,这样客户端就返回了一个名为callback所对应名字的方法。

  • 只能进行get请求(因为script只能触发get请求,不能触发post请求)
  • 可被注入恶意代码(eg:callback: alert(1);),可用字符串筛选解决;
  • 需要校验身份(token):可以共用一套cookie体系实现安全性,也可以使用jsonp自带的token变量进行验证,但是安全性依然有待考量。

CORS是什么

跨域资源共享(Cross-Origin Resource Sharing ),允许不同源的站点获取对方的资源。这需要你所请求数据站点的后端配合,只有他允许了,你才可以获取到。

QQ截图20160919104702.png

本地搭建服务器,演示同源策略

  1. 本地搭建服务器(如果使用 SAE 可创建不同的代码版本,这样可通过1.xxx.sinapp.com和2.xxx.sinapp.com 访问了)
  2. 修改 本地host,通过不同域名访问本地服务器。比如访问http://a.com/index.html, http://b.com/ajax.php,本质是
  3. 在 index.html 里使用 ajax 接口访问 http://b.com/ajax.php 里的数据。
  4. 查看输出报错

搭建服务器,配置好host



主页代码



main.js配置

data数据



a.com

b.com
  • jsonp处理
  • CORS处理

未加入header("Access-Control-Allow-Origin:http://a.com");

同源策略被禁止引用

加入header("Access-Control-Allow-Origin:http://a.com");

相关文章

  • 前端基础(问答23)

    keywords: 同源策略、跨域、jsonp。 什么是同源策略(same origin policy) 同源:协...

  • 跨域

    主要内容: 同源策略、跨域实现形式(JSONP、CORS、降域、postMessage) 同源策略 (Same o...

  • 做demo和学习过程当中遇到的一些问题,收集的博文

    轻松搞定JSONP跨域请求--->关键字: 跨域, 同源策略, JSONP原理 git拉取远程分支到本地 git ...

  • jsonp

    jsonp的跨域原理解析 背景: 由于浏览器同源策略的限制,非同源下的请求,都会产生跨域问题,jsonp就是为了解...

  • Jsonp 跨域原理

    Jsonp 跨域原理。(摘选) 浏览器的同源策略把跨域请求都禁止了,但是页面中的 标签是例外,不受同源策略限...

  • 什么是跨域

    被同源策略限制的都叫做跨域,域名,端口,协议一只就要同源策略 如果跨域 1、jsonp 2、nginx反向代理 3...

  • 同源策略与跨域

    跨域就是违背了同源策略解决跨域的方法有:jsonp,cors和服务器代理

  • 常见跨域解决方案

    跨域 JSONP 使用 标签不受同源策略影响的特性,作为Ajax传输技术称为JSONP。 使用JSONP时,需要服...

  • Jsonp的实现原理

    1. Jsonp Jsonp: 主要是用来获取跨域的请求,由于同源策略的限制,我们不能获取跨域的资源 2. Jso...

  • Ajax跨域 —— Jsonp

    同源策略 同源/同域即域名、协议、端口号相同 JSONP(JSON with Padding) 是一种跨域请求方式...

网友评论

    本文标题:同源策略、跨域、jsonp

    本文链接:https://www.haomeiwen.com/subject/hycgettx.html