盒子
盒子
文章目录
  1. 浏览器的同源规则
  2. 浏览器如何向服务器提交数据
  3. 动态创建JS脚本发数据
  4. 什么是JSONP呢
  5. 为什么JSONP不支持POST请求呢

破解浏览器同源政策利器之JSONP

本文是在了解了浏览器的同源规则之后,学习了破解这个规则的一个简单有效的方法->JSONP。主要通过阮一峰老师的博客学习

浏览器的同源规则

  • 有这样一个背景,如果你通过银行的网站进行的取钱的交易,而其他用户可以通过某个渠道获得你在银行网站的信息,那将是很可怕的。

  • 所以,1995年NetScape公司(火狐的前身),提出了浏览器的同源政策,目的是保护使用网站的用户的信息安全。那么何谓同源呢

    • 协议相同
    • 域名相同
    • 端口号相同

不过,随着互联网的发展,有些时候我们需要破解同源,所以要先学习一下,古老而有效的JSONP方法。

浏览器如何向服务器提交数据

  • 有一天,程序员小白在自学,看到JSONP很牛,就向大神程序员小黑请教。小黑,小黑,这个JSONP是啥啊,感觉很牛( ⊙ o ⊙ )!。
  • 小黑扶了扶500度的眼镜,摸了一下头顶的几根头发,若有所思的问小白。
  • 小白啊,你说,浏览器怎么向服务器提交数据啊,比如说,你要付款这个情形。
  • form表单啊,我规定<form method="POST" action="/..."></form>,我不用get请求。
1
2
3
4
5
6
<h5>您的账户余额是<span id="amount">200</span></h5>
<button id="button">付款1块钱</button>
<form action="/pay" method="post">
<input type="text" name="number" value="1">
<input type="submit" value="付款">
</form>
  • 恩,还是不错的啊,知道用POST发起请求。那你这提交完了之后,是不是还要在当前页面刷新一下,才能看到余额啊。
  • ……哎,是啊,不过我可以给你加一个iframe,就在当前页面刷新
1
2
3
4
5
6
<form action="/pay" method="post" target="result">
<input type="text" name="number" value="1">
<input type="submit" value="付款">
</form>

<iframe name="result" src="about:blank" frameborder="0"></iframe>

有什么反馈信息都在iframe显示。

  • 恩,也还行,不过你为啥要把总额200写死在页面呢,不应该动态从数据库中获得吗
  • ╮(╯▽╰)╭,稍等我改一哈
1
2
3
4
5
6
7
8
9
<h5>您的账户余额是<span id="amount">&&&amount&&&</span></h5>
<button id="button">付款1块钱</button>
...
button.addEventListener('click', (e) => {
let n = amount.innerText
let number = parseInt(n, 10)
let newNumber = number - 1
amount.innerText = newNumber
}

我用&&&amount&&&占位符表示总额,服务器端可以如下处理

1
2
3
4
var amount = fs.readFileSync('./db', 'utf-8') //从db中读取
string = string.replace('&&&amount&&&', amount) //把占位的数据换成真的数据
...
response.write(string)
  • 恩,不错,你再想想有没有其他的方式也可以发送数据到服务器端啊,不用刷新页面的那种
  • ……还有其他的( ⊙ o ⊙ )啊!
  • 那我老黑我给你讲讲前辈程序员们试过的方法吧
1
2
3
4
5
6
7
8
9
10
//用图片发起get请求
let image = document.createElement('img')
image.src = '/pay'
image.onload = function() {
alert('打钱成功')
amount.innerText = amount.innerText - 1
}
image.onerror = function() {
alert('打钱失败')
}

这种也是可以的,而且也会用提示给用户,交互性还可以,不过只能发起GET请求,哈哈,我就是秀一下黑科技,很少用啦……

  • (@ο@) 哇~这也可以,小黑,你好棒,又长见识啦,不过还是没给我讲JSONP啊,你是不是忘了……
  • 没忘啦,不要着急,接下来,就给你好好讲讲这个JSONP

动态创建JS脚本发数据

  • 小白啊,你平常用的最多的是哪门语言啊
  • 中文啊,英语不大好。
  • ……我说编程的时候
  • 呃呃,那个用的JavaScript多啊
  • 好,那咱们就用js脚本发数据呗
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//用js脚本发起请求  
let script = document.createElement('script')
script.src = '/pay'
document.body.appendChild(script)
script.onerror = function() {
alert('failed')
}

...
//服务器端一般这么干
if(path === '/pay') {
var amount = fs.readFileSync('./db', 'utf8')
var newAmount = amount - 1

fs.writeFileSync('./db', newAmount)
response.setHeader('Content-Type', 'application/javascript')
response.statusCode = 200
response.write(`
amount.innerText = amount.innerText - 1
`)

response.end()
}

以上是js脚本的大致意思,细节不要深究,明白就行。注意一下,添加script后,要记得document.body.appendChild(script)

  • 不过,小黑啊,你这动态加上了script没错,可是你每次都往我的html底部加js,这破坏我的html啊
  • 恩,小白啊,你思考能力还是可以的,目前确实有这个弊端,我给你处理一下
1
2
3
4
5
6
7
8
9
10
11
//用js脚本发起请求  
let script = document.createElement('script')
script.src = '/pay'
document.body.appendChild(script)
script.onload = function(e) {
e.currentTarget.remove() //加载完了,就移除
}
script.onerror = function(e) {
alert('failed')
e.currentTarget.remove() //加载完了,就移除
}
  • 可以可以,小黑你这波操作可以的。快让我见识见识JSONP吧

  • 好,这就给你变出来

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
button.addEventListener('click', (e) => {
//用js脚本发起请求
let script = document.createElement('script')
let functionName = 'wushao' + parseInt((Math.random()*100000), 10)
window[functionName] = function (result) {
if (result === 'success') {
amount.innerText = amount.innerText - 1
} else {
}
}
script.src = 'http://想访问的另一个网站:端口号/pay?callback=' + functionName
document.body.appendChild(script)
script.onload = function(e) {
e.currentTarget.remove()
}
script.onerror = function(e) {
alert('failed')
e.currentTarget.remove()
}
})
  • ヾ(。`Д´。)黑神,你这跨度有点大,咋变了个大魔术。
  • O(∩_∩)O哈哈~,你让我给你快点讲的……,我给你讲讲细节吧
    1. let functionName = ‘wushao’ + parseInt((Math.random()*100000), 10) 使用一个随机函数构建自己的函数名字,可以与服务器端代码完美解耦,服务器端只需要,获得查询参数?callback=functionName 里面的functionName就可以了。
    2. window[functionName] = function (result) { } 在window全局对象上添加functionName属性,它的值是一个函数,当服务器端响应回来后,浏览器端的写的函数的参数就是服务器端的success,我们就知道我的数据成功了。
1
2
3
4
//服务器端只需要这样就可以了,不关心你写的是什么函数名字
response.write(`
${query.callback}.call(undefined, 'success')
`)
  • 哇,厉害啊,不过你又犯了一个相同的错误啦,哈哈,每次要把添加的全局对象的属性去掉哦~
1
2
3
4
5
6
7
8
9
script.onload = function(e) {
e.currentTarget.remove()
delete window[functionName]
}
script.onerror = function(e) {
alert('failed')
e.currentTarget.remove()
delete window[functionName]
}
  • O(∩_∩)O哈!,这样子就对了,小白啊,既然你学过jQuery,你试一试jQuery的写法吧
  • (^o^)/~行,小黑,我也给你变一个
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$.ajax({
url: "http://想访问的另一个网站:端口号/pay",

// The name of the callback parameter, as specified by the YQL service
jsonp: "callback",

// Tell jQuery we're expecting JSONP
dataType: "jsonp",

// Work with the response
success: function (response) {
if(response === 'success') {
amount.innerText = amount.innerText - 1
}
}
})
  • 哎呦,不错呦,小白~
  • O(∩_∩)O哈哈~,我就是Google的 jquery jsonp
  • 不过,这个可和ajax,没啥关系啊,不明白为啥jquery为啥这么写。

具体的代码链接在============>传送门

什么是JSONP呢

请求方是一个网站(浏览器端),响应方是另一个网站(服务器端)

  1. 请求方动态的创建一个script脚本,src属性是响应方的地址,同时传递一个查询查参数?callback=functionName,一般functionName使用随机函数构造。

  2. 响应方根据收到的查询参数callback=functionName,去构造形如

    2.1 functionName.call(undefined, 'success')

    2.2 或者直接functionName.('success')

    这样的响应。

  3. 浏览器收到响应之后,就会执行functionName.call(undefined, 'success')或者functionName.('success')

  4. 然后,请求方就知道了他想要获得的数据如何了。

这就是JSONP的原理

为什么JSONP不支持POST请求呢

答曰:JSONP是动态创建的js脚本,这个方法只能发起GET请求,不能发起POST请求。

接下来学习ajax啦~加油↖(^ω^)↗