为了账号安全,请及时绑定邮箱和手机立即绑定

html5+ 的api怎么用

/ 猿问

html5+ 的api怎么用

API
MYYA 2019-02-23 15:15:47

html5+ 的api怎么用


查看完整描述

1 回答

?
皈依舞

1.1 理解源安全
HTML5荣光引入源(origin)的概念对域安全进行了阐明和改进。源是在网络上用来建立信任关系的地址的子集。源由规则(scheme)、主机(host)、端口(post)组成。
源的概念中不考虑路径。
HTML5定义了源的序列化。源在API和协议中以字符串的形式出现。
postMessage的安全规则确保了消息不会被传递到非预期的源页面中。当发送消息时,由发送方制定接收方的源。如果发送方用来调用postMessage的窗口不具有特定的源(例如用户跳转到了其他站点),浏览器就不会传送消息。
类似地,接受消息的时候,发送方的源也被作为消息的一部分。为避免伪造,消息源由浏览器提供。接收方可以决定处理哪些消息,以及忽略哪些消息。我们可以保留一份白名单,告诉浏览器仅仅处理可信源的消息。
最好永远不要对来自第三方的字符串求值。再者,要避免使用eval方法处理应用内部字符串。可以通过window.JSON或者json,.org解析器使用JSON。
1.2 跨文档消息通信的浏览器支持情况
常用的做法是检测XMLHttpRequest对象中是否存在withCredentials属性:

JavaScript Code复制内容到剪贴板

  • var xhr = new XMLHttpRequest(); if (typeof xhr.withCredentials === undefined) { //不支持跨源的XMLHttpRequest } else { //支持跨源的XMLHttpRequest }  

  • 1.3 使用postMessage API


  • 提示 HTML5定义的MessageEvent接口也是HTML5 WebSockets和HTML5 WebWorkers的一部分。HTML5的通信功能用用于接受消息的API与MessageEvent接口是一致的。其他通信类API,如EventSource API和Web Workers,也都是使用MessageEvent接口来传递消息。


  • 1.4 使用postMessage API创建应用


  • 发送消息


  •   通过调用目标页面window对象中的postMessage()函数可发送消息,代码如下:


  • JavaScript Code复制内容到剪贴板

  • window.postMessage("Hello, world", "porta");  

  •   第一个参数包括要发送的数据,第二个参数是消息传送的目的地。要发送消息给iframe,可以再相应iframe的contentWindow中调用postMessage,代码如下:


  • JavaScript Code复制内容到剪贴板

  • document.getElementsByTagName("iframe")[0].contentWindow.postMessage("Hello, world", "cha");  

  • 监听消息事件


  •   接收消息时仅需在页面中增加一个事件处理函数。当某个消息到达时,通过检查消息的来源来决定是否对这条消息进行处理。


  • JavaScript Code复制内容到剪贴板

  • window.postMessage("Hello, world", "porta");  

  •   消息事件是一个拥有data(数据)和origin(源)属性的DOM事件。data属性是发送方传递的实际消息,而origin属性是发送来源。


  •   源由规则(scheme)、主机(host)、端口(port)组成。


  •   例如:由于规则不同(如https与http),所以页面与页面的源是不同的。


  •   源的概念中不考虑路径。如:与只是路径不同,他们是相同的源。


  •   源在API和协议中以字符串的形式出现。


  • JavaScript Code复制内容到剪贴板

  • var originWhiteList = ["porta", "game", ""]; function checkWhiteList(origin) { for (var i=0; i<originWhiteList.length; i++) { if (origin === originWhiteList[i]) { return true; } } return false; } function messageHandler(e) { if (checkWhiteList(e.origin)) { processMessage(e.data); } else { //忽略来自未知源的消息 } }  

  •   postMessage API可以适用于同源和非同源通信,鉴于它的一致性,在同源文档间通信时也推荐适用postMessage。


  • 2 XMLHttpRequest Level2


  • 作为XMLHttpRequest的改进版,XMLHttpRequest Level2在功能上有了很大的改进。主要集中在两个方面:


  • (1)跨源XMLHttpRequests;


  • (2)进度事件(Progress events)



查看完整回答
反对 回复 2019-03-02

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信