破解浏览器同源政策利器之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属性是响应方的地址，同时传递一个查询查参数？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啦～加油↖(^ω^)↗