Using jQuery with the Windows 8 Metro JavaScript App Raises a Security Error

Question

Since it sounded like jQuery was an option for Metro JavaScript applications , I started to look forward to Windows 8 dev. I installed Visual Studio 2012 Express RC and started a new project (both empty and mesh templates have the same problem).

I made a local copy of jQuery 1.7.2 and added it as a script link.

<!-- SomeTestApp references --> <link href="/css/default.css" rel="stylesheet" /> <script src="/js/jquery-1.7.2.js"></script> <script src="/js/default.js"></script> 

Unfortunately, as soon as I launched the received application, it gives a console error:

HTML1701: Unable to add dynamic content 'a' A script tried to add dynamic content or elements that were previously dynamically changed that might be unsafe. For example, using the innerHTML property to add a script or garbled HTML will throw this exception. Use the toStaticHTML method to filter dynamic content or to explicitly create elements and attributes using a method such as createElement. For more information, see http://go.microsoft.com/fwlink/?LinkID=247104 .

I hit a breakpoint in a non-minified version of jQuery and found a violation line :

 div.innerHTML = " <link/><table></table><a href='/a' style='top:1px;float:left;opacity:.55;'>a</a><input type='checkbox'/>"; 

Apparently, the security model for Metro apps prohibits creating items this way . This error does not cause any problems for the user, but given its location, I am afraid that this will lead to a failure of the feature check in jQuery, which should not.

I definitely want jQuery $.Deferred to simplify things. I would rather be able to use the selector engine and event processing systems, but I would live without them if I had to.

How to get the latest jQuery to play well with Metro development?

Answer 1

You need to edit the jQuery source to pass the jQuery.support function to MSApp.execUnsafeLocalFunction , which disables the checking of insecure content, for example:

 jQuery.support = MSApp.execUnsafeLocalFunction(function() { var support, all, a, select, opt, input, fragment, tds, events, eventName, i, isSupported, div = document.createElement( "div" ), documentElement = document.documentElement; // lots of statements removed for brevity return support; }); 

You need to remember the last pair of brackets - you do not need a self- execUnsafeLocalFunction function, because execUnsafeLocalFunction automatically executes the passed function.

I suggest using WinJS functions better - this includes the WinJS.Promise object as an alternative to deferred operations (which themselves are an implementation of the Promise template). And you can do some basic DOM manipulations using the WinJS.Utilities namespace.

You should think twice about using jQuery for deferred operations. The WinJS.Promise object WinJS.Promise used in all Metro APIs to represent asynchronous actions, and you end up using two approaches that are similar to each other.

Answer 2

Here is your answer

https://github.com/appendto/jquery-win8

The official jquery library for windows 8

Answer 3

For what it's worth, I ported most of the jQuery core to wrap my own WinJS library. It is lightweight and provides almost everything jQuery does with the addition of some plugins for icons, notifications, etc.

This is a work in progress, but I'm trying to get some people to join in the fun.

https://github.com/rmcvey/winjq

Quick Record (documentation is added): http://practicaljs.com/jquery-in-windows-8-apps/

Answer 4

After a recent conference // Build / 2012, and in this conversation we talked about using jQuery in the Windows 8 Store Apps. In particular, they talk about the exact exception of script injection inside innerHTML and talk about the updates made in this.

AppendTo officially announced jQuery for Windows 8 during this conversation. It looks neat from the demo in the conversation in the link.

They also say that it’s nice to get jQuery from the CDN for Windows 8 applications in a local context!

Answer 5

GitHub's JavaScript dynamic content template was created and released by Microsoft Open Technologies to resolve this error. It has not been tested with jQuery, but will most likely solve your problem. A link to the winstore-jscompat.js file at the beginning of your application before running any other scripts and you will no longer see this error.

Answer 6

I did a little more research and wanted to clarify a couple of things.

The error you see is in the JavaScript console, and not as an actual exception. JQuery code continues to work fine. This is actually what the underlying system logs, not an error or exception.

There is no reason to fix jQuery or do anything else - this is a noisy system component, not an actual error.

Answer 7

I wrote a fairly detailed explanation of how to get jQuery to work with Windows 8 here http://davidvoyles.wordpress.com/2013/09/23/hacking-jquery-to-work-in-windows-8/

Answer 8

If you still need this, I am writing a reimplementation of the Deferred object found in jQuery.

Upon completion, it should be 100% compatible with the jQuery Deferred object. Now it is quite complete, but requires some testing.

See this .

Hope this helps!

However, I think it would be nice to learn how to use the Microsoft Promise implementation instead of jQuery when working with Windows 8 applications.

Answer 9

I managed to fix the problem by finding all the places in jQuery that set innerHTML and wrap the value set with toStaticHTML() .

So for example:

 div.innerHTML = " <link/><table></table><a href='/a' style='color:red;float:left;opacity:.55;'>a</a><input type='checkbox'/>"; 

become:

 div.innerHTML = toStaticHTML(" <link/><table></table><a href='/a' style='color:red;float:left;opacity:.55;'>a</a><input type='checkbox'/>"); 

To be safe, I also defined this immediately before the jQuery definition, if the file is used in a normal browser:

 window.toStaticHTML = window.toStaticHTML || function (s) { return s; }; 

This was the safest change for me, although jQuery needed to fix a dozen places. (do not use the var statement before toStaticHTML)

Answer 10

I believe this is the same restriction as the Content Security Policy (CSP). This particular case was considered in jQuery 1.8.0. Does the problem remain there?

https://github.com/jquery/jquery/commit/dc83072878ed9636c8158a014bd9fa4acc1ccce3

Answer 11

jQuery itself did not throw such exceptions for me in the latest version, while I replaced all form code, for example:

 $('<input type="button" value="Press Me" />') 

from

 $(toStaticHTML('<input type="button" value="Press Me" />')) 

Please note that not all HTML lines are considered unsafe, for example:

 $('<span></span>') 

Does not exclude any exceptions. However, jQuery still raises exceptions when adding if you do something:

 var div = '<div class="' + classesToApply + '"'; div += attrToAdd; div += '</div>'; $(div).appendTo(container); 

The above is not an example of good practice using jQuery, but some people do this so that you might run into an error. Please note that the above code does not generate the same error as the very first fragment, but instead throws an error inside jQuery.append. This error is still fixed when $(toStaticHTML(div)).appendTo(container);