为什么 toStaticHTML 删除 data-* 属性

Question

我的应用程序将 HTML 内容动态构建为字符串，并在完成后将内容附加到 DOM。但是，在 WinJS 中，一旦我尝试将字符串附加到 DOM，就会引发异常。为了解决这些异常，我必须通过 toStaticHTML 运行它来清理 HTML，它在 WinJS 和 Internet Explorer 中全局定义。我遇到的问题是有很多使用 data-* html5 属性。一旦我通过 toStaticHTML 运行它们，它们就会被剥离。为什么 toStaticHTML 删除 data-* 属性？他们真正的安全问题是什么？

请注意，我无法将 DOM 插入包装在 MSApp.execUnsafeLocalFunction 中，因为我使用的是 jQuery，并且不允许修改 jQuery 代码。

var html = "<ul><li data-role='list-node'>My list node</li></ul>";
$('#container').html(toStaticHTML(html));

生产：

<ul>
    <li>My list node</li>
</ul>

Answer 1

这是因为将 HTML 的随机位插入到文档中的安全问题，并可能允许不安全的代码在受保护的上下文（您的应用程序，对 WinRT 和用户文档的完全访问权限）内执行。

toStaticHtml 旨在在不断发展的 HTML/Web 模式的情况下保持“安全”，因此它是 白名单 而不是 黑名单。

鉴于您在这里遇到的挑战，我看到以下选项：

• 将对 jquery 的调用包装在 msExecUnsafeLocalFunction 中（见下文）。这意味着在该调用的整个生命周期中，所有 Dom 插入都可以。这不需要更改 jquery，只需更改您的代码即可。
• 完全重写任何 Jquery 在幕后使用的 DOM 调用，以使用 msExecUnsafeLocalFunction 调用
• 将应用程序的安全上下文更改为 Web 上下文而不是本地上下文。这当然会让您无法直接访问 WinRT。您必须通过其他一些机制（I 框架或类似框架之间的消息传递）进行操作
• 使用WinJS.Binding.Template 来呈现您的内容，而不是使用Jquery。这会克隆节点而不是对 HTML 进行字符串化
• 编写自己的节点克隆器
• 插入安全节点后，用setAttribute设置属性。

msExecUnsafeLocalFunction 的使用示例：

MSApp.execUnsafeLocalFunction(function() {
    $('#container').html(html);
});

Answer 2

data-role-属性未在此处列出：http://msdn.microsoft.com/en-us/library/windows/apps/hh465388.aspx

这是一个未知属性，将被删除。

Answer 3

正如文档中提到的那样，data 是不允许的：http://msdn.microsoft.com/en-us/library/windows/apps/hh465388.aspx