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

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

浏览器的同源规则

  • 有这样一个背景,如果你通过银行的网站进行的取钱的交易,而其他用户可以通过某个渠道获得你在银行网站的信息,那将是很可怕的。
  • 所以,1995年NetScape公司(火狐的前身),提出了浏览器的同源政策,目的是保护使用网站的用户的信息安全。那么何谓同源呢
    • 协议相同
    • 域名相同
    • 端口号相同

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

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

  • 有一天,程序员小白在自学,看到JSONP很牛,就向大神程序员小黑请教。小黑,小黑,这个JSONP是啥啊,感觉很牛( ⊙ o ⊙ )!。

  • 小黑扶了扶500度的眼镜,摸了一下头顶的几根头发,若有所思的问小白。

  • 小白啊,你说,浏览器怎么向服务器提交数据啊,比如说,你要付款这个情形。

  • form表单啊,我规定<form method="POST" action="/..."></form>,我不用get请求。

    <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,就在当前页面刷新

    <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写死在页面呢,不应该动态从数据库中获得吗

  • ╮(╯▽╰)╭,稍等我改一哈

    <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&&&占位符表示总额,服务器端可以如下处理

    var amount = fs.readFileSync('./db', 'utf-8') //从db中读取
    string = string.replace('&&&amount&&&', amount) //把占位的数据换成真的数据
    ...
    response.write(string)
    
  • 恩,不错,你再想想有没有其他的方式也可以发送数据到服务器端啊,不用刷新页面的那种

  • ……还有其他的( ⊙ o ⊙ )啊!

  • 那我老黑我给你讲讲前辈程序员们试过的方法吧

    用图片发起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脚本发数据呗

      //用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啊

  • 恩,小白啊,你思考能力还是可以的,目前确实有这个弊端,我给你处理一下

        //用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吧

  • 好,这就给你变出来

     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就可以了。

      //服务器端只需要这样就可以了,不关心你写的是什么函数名字
      response.write(`
         ${query.callback}.call(undefined, 'success')
      `)
      
    2. window[functionName] = function (result) { } 在window全局对象上添加functionName属性,它的值是一个函数,当服务器端响应回来后,浏览器端的写的函数的参数就是服务器端的success,我们就知道我的数据成功了。

  • 哇,厉害啊,不过你又犯了一个相同的错误啦,哈哈,每次要把添加的全局对象的属性去掉哦~

    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)/~行,小黑,我也给你变一个

    $.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属性是响应方的地址,同时传递一个查询查参数?callbackName=functionName。对于callbackNamefunctionName,通常使用callback来代替callbackName,使用一串具有特殊含义的字母+随机函数构造functionName

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

    2.1 functionName.call(undefined, 'success')

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

    这样的响应。

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

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

这就是JSONP的原理

为什么JSONP不支持POST请求呢

答曰:

  1. JSONP通过动态创建script来实现的
  2. 动态创建script的时候,只能用get,没办法用post

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

推荐阅读更多精彩内容

  • pdf下载地址:Java面试宝典 第一章内容介绍 20 第二章JavaSE基础 21 一、Java面向对象 21 ...
    王震阳阅读 70,213评论 26 501
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 67,788评论 12 114
  • JSONP 问:什么是JSONP? 1. 问题引入 在日常开发中,前端程序员想要从后端请求一些数据,是如何操作的呢...
    黄同学2019阅读 67评论 0 2
  • 题目1: 什么是同源策略 同源策略限制了从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离...
    馒头Mum阅读 702评论 0 1
  • AJAX 原生js操作ajax 1.创建XMLHttpRequest对象 var xhr = new XMLHtt...
    碧玉含香阅读 1,081评论 0 7