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

2024年5月12日 244次阅读 来源: codevvvv9

本文是在了解了浏览器的同源划定规矩以后，进修了破解这个划定规矩的一个简朴有用的要领->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就能够了。
    2. window[functionName] = function (result) { } 在window全局对象上增加functionName属性，它的值是一个函数，当服务器端相应返来后，浏览器端的写的函数的参数就是服务器端的success，我们就晓得我的数据胜利了。
  //服务器端只须要如许就能够了，不关心你写的是什么函数名字
  response.write(`
     ${query.callback}.call(undefined, '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做喽☺

    原文作者：codevvvv9
    原文地址: https://segmentfault.com/a/1190000013277595
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞