使用 http:// 或 https:// 作为 iframe 的源自动将 iframe 的内容转换为 Web 上下文。当您使用 ms-appx 或 ms-appx-web 时，iframe 还可以是应用程序包中的资源。iframe 中的源引用 ms-appx:// 方案时，iframe 的内容在本地上下文中运行。这允许开发人员将应用程序包资源嵌入 iframe，同时仍可以访问本地上下文的功能（如 Windows 运行时、Windows JavaScript API 等）。另一个可用方案是 ms-appx-web://，它允许在 Web 上下文中运行本地应用程序包内容。当您需要在标记内嵌入远程内容时此方案很有用，如基于 Contoso Health 应用程序中的用户位置添加本地医院的 Bing 搜索结果（来自 Bing 搜索 API）。顺便提醒一下，无论何时在 HTML5 内提及 iframe，请记住您可以通过限制在 iframe 内内容的脚本执行将沙盒属性作为您的应用程序的额外保护措施。您可以在 bit.ly/Ppbo1a 上找到有关沙盒属性的更多信息。
图 3 显示本地和 Web 上下文中使用的各种方案以及它们的使用示例。
图 3 带上下文示例的方案
iframe 属于哪个上下文基于如何引用其中的内容。换句话说，方案决定了上下文。您可以在 bit.ly/SS711o 上找到有关 Windows 8 中使用的方案的更多信息。
还 记得本节开头的 Litware 侵入情形吗？上下文的 Windows 8 分隔将帮助将跨站点脚本攻击限制为 Web 上下文，在其中它无权访问 Windows 运行时或 Contoso Health 的应用程序数据。在 Web 上下文中，修改本地上下文没有用。上下文之间可以通信，但是您可以控制进行何种类型的通信。
上下文之间的通信
顶级文档如 何与在 Web 上下文中运行的 iframe 通信？使用 HTML5 的 postMessage 功能，Windows 应用商店应用程序可以在上下文之间传递数据。这允许开发人员设置两个源如何通信的结构并只允许已知的好提供程序（再次使用允许列表）访问本地上下文。将 iframe 与设置为 http://、https:// 或 ms-appx-web:// 的 src 属性结合使用，以引用需要在 Web 上下文中运行的页。
对于 Contoso Health 应用程序，系统从 Litware Exercise API 请求健康提示。Contoso Health 的开发小组已生成 litwareHelper.html 页，该页用于通过 jQuery $ajax 对象与 Exercise API 通信。由于远程资源 (exercise.js)，litwareHelper.html 需要在 Web 上下文中执行，这意味着它需要在 iframe 内运行。设置 iframe 与在任何其他 Web 应用程序中基本相同，除了引用该页的方式不同。因为 litwareHelper.html 页是本地应用程序包的一部分但是需要在 Web 上下文中运行，您使用 ms-appx-web 来加载它：
双击代码全选
|
1
|
<iframe id="litwareHelperFrame” src="ms-appx-web:///litwareHelper.html"></iframe>
|
开发小组将以下函数添加到本地上下文页，该页将数据请求发送到 Web 上下文页：
双击代码全选
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
function btnGetFitTips_Click() {
var msg = {
term: document.getElementById("txtExerciseSearchTerm").value,
itemCount: 25 }
var msgData = JSON.stringify(msg);
var domain = "ms-appx-web://" + document.location.host;
try {
var iframe = document.getElementById("litwareHelperFrame");
iframe.contentWindow.postMessage(msgData, domain);
}
catch (ex) {
document.getElementById("output").innerText = "Error has occurred!";
}
}
|
receiveMsg 方法处理来自本地上下文的消息。receiveMsg 的参数是提供给 postMessage 事件的数据（在本例中为 msgData 变量）以及消息目标、消息来源和几个其他信息片段，如图 4 中所示。
图 4 使用 receiveMsg 进行处理
双击代码全选
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
function receiveMsg(e) {
if (e.origin === "ms-appx://" + document.location.host) {
var output = null;
var parameters = JSON.parse(e.data);
var url = "https://api.litware-exercise.com/data/"
+ parameters.term +
"/count/" + parameters.itemCount;
var options = {
dataType: "jsonp",
jsonpCallback: "jsonpCallback",
success: function (results) {
output = JSON.stringify(results.items);
window.parent.postMessage(output, "ms-appx://"
+ document.location.host);
},
error: function (ex) {
output = ex;
}
};
$.ajax(url, options);
}
}
|
receiveMsg 首先检查 postMessage 的来源。这是至关重要的安全检查，以确保消息来自所认为的源。请记住 e.origin 检查发送 postMessage 的域和方案，这是您检查 ms-appx（本地上下文地址）的原因。从 Litware API 收集 JSON 数据后，应用程序使用 postMessage 命令将结果重新传回 window.parent。注意，在 receiveMsg 中将域设置为 ms-appx。这是消息传递的“目的地”地址并显示正在将数据返回给本地上下文。来自 iframe 的数据需要由本地上下文中的资源使用。开发小组添加 processResult 函数以将来自 Web 上下文的数据处理后返回给本地上下文。
双击代码全选
|
1
2
3
4
5
|
function processResult(e) {
if (e.origin === "ms-appx-web://" + document.location.host) {
document.getElementById("output").innerText = e.data;
}
}
|
再 次强调一下，请始终检查消息事件的来源，以确保只处理来自已批准位置（即在允许列表中注册的位置）的数据。请注意该来源是 Web 上下文方案： processResult 方法中的 ms-appx-web。在方案间切换可能是一个不足之处，开发人员在调试期间可以忽略它并了解消息发送到何处。
最后，为了接收来自 Web 上下文的数据并将它返回给本地上下文页，您添加了一个针对该消息事件的事件处理程序。在 app.onactivated 方法中，将事件侦听器添加到窗口对象：
双击代码全选
|
1
|
window.addEventListener('message', processResult, false);
|
默认情况下分隔本地和 Web 上下文将降低意外执行 Windows 应用商店应用程序之外的源中代码的风险。使用 postMessage，开发人员可以提供构成应用程序的外部脚本和本地脚本之间的通信通道。
Web 到 Windows 8： 针对旧习惯的新工具
Web 开发人员现在可以访问可用于构建安全的 Windows 应用商店应用程序的熟悉工具和新工具。使用现有技术（如 HTML5 输入验证）确保输入应用程序的数据的完整性。诸如数据保护 API（Windows 运行时的新功能）的新工具通过易于实现的严格加密保护用户的机密数据。使用 postMessage 允许应用程序利用 Web 上的数千个 JavaScript 库和旧代码，并保护用户不受无意的代码注入的侵害。所有这些元素相互配合，共同确保通常在 JavaScript 受忽视的重要方面： 安全性。
Windows 8 为 Web 开发人员带来反思某些旧习惯的机会。JavaScript 对服务器不再是外观，不再只是增强可用性的手段。JavaScript、Windows 运行时和 MSHTML 提供在 Windows 应用商店应用程序中构建安全功能所需的工具，不一定需要服务器。作为 Web 开发人员，我们拥有很多技能，但是需要密切关注一些旧习惯并将它们转换为学习 Windows 8 新技术的机会。
(责任编辑：12图资源库)
