Why does toStaticHTML remove data-* attributes

Question

My application dynamically builds HTML content as a string and when finished the content is being attached to the DOM. In WinJS however this throws exceptions once I try to attach the string to the DOM. In order to work around these exceptions I have to sanitize the HTML by running it through toStaticHTML, which is globally defined in WinJS as well as in Internet Explorer. The issue that I am having is that there are quite a lot of use of data-* html5 attributes. Once I run those through toStaticHTML they are being stripped. Why does toStaticHTML remove data-* attributes? What is the real security concern with them?

Note that I cannot wrap the DOM insertion in MSApp.execUnsafeLocalFunction because I am using jQuery and I am not allowed to modify the jQuery code.

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

Produces:

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

Answer 1

This is because of security concerns about inserting random bits of HTML into the document, and potentially allowing unsafe code to execute inside a protected context (your app, with full access to the WinRT, and users documents).

toStaticHtml is intended to remain 'secure' in the case of evolving HTML/web patterns so it is a whitelist rather than a blacklist.

Given your challenge that you have here I see the following options:

• wrap the call to jquery in msExecUnsafeLocalFunction (see below). This means for the life of that call, all Dom insertions will be fine. This doesn't require a change to jquery, just your code.
• Completely rewrite any of the DOM calls that Jquery is using under the covers to call with msExecUnsafeLocalFunction
• Change the security context of your application to the web context rather than the local context. This, of course will lose you access to WinRT directly. You'll have to operate through some other mechanism (messaging between I frames or similar)
• Use WinJS.Binding.Template to render your content rather than Jquery. This clones the nodes rather than stringifying the HTML
• write your own node cloner
• set the attribute with setAttribute after the safe node is inserted.

Example usage of msExecUnsafeLocalFunction:

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

Answer 2

The data-role-attribute is not listed here: http://msdn.microsoft.com/en-us/library/windows/apps/hh465388.aspx

It's an unknown attribute and will be removed.

Answer 3

As mention in the docs data is not allowed: http://msdn.microsoft.com/en-us/library/windows/apps/hh465388.aspx