javascript - 为什么 toStaticHTML 会删除 data-* 属性

Question

我的应用程序将 HTML 内容动态构建为字符串，完成后内容将附加到 DOM。然而，在 WinJS 中，一旦我尝试将字符串附加到 DOM，就会抛出异常。为了解决这些异常，我必须通过在 WinJS 和 Internet Explorer 中全局定义的 toStaticHTML 运行它来清理 HTML。我遇到的问题是 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 位，并可能允许不安全的代码在 protected 上下文(您的应用程序，具有对 WinRT 和用户文档的完全访问权限)内执行的安全问题。

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

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

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

msExecUnsafeLocalFunction 的用法示例:

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