Windows Phone App in JavaScript with AngularJS

Question

I am developing a Windows Phone Application in JavaScript. I am using the AngularJS library. The problem is that I cannot add a dynamic content because of security reasons.

The error I get: HTML1701: Unable to add dynamic content '<div id="view_login" class="view"> <div id="view_login_container"> <img class="logo" src="http://oi60.tinypic.com/okwifa.jpg"> <input type="text" placeholder="Username" ng-model="loginUsername"> <input type="password" placeholder="******" ng-model="loginPassword"> <button ng-click="doLogin()">Login</button> <button ng-click="changeView('/signup')" class="link">... or sign up now</button> </div> </div>'. A script attempted to inject dynamic content, or elements previously modified dynamically, that might be unsafe. For example, using the innerHTML property to add script or malformed HTML will generate this exception. Use the toStaticHTML method to filter dynamic content, or explicitly create elements and attributes with a method such as createElement. For more information, see http://go.microsoft.com/fwlink/?LinkID=247104.

I changed one line in AngularJS library which should fix the problem:

append:function(a,c){
   **MSApp.execUnsafeLocalFunction(function () {**
      r(new N(c),function(c){
         1!==a.nodeType&&11!==a.nodeType||a.appendChild(c)
      })
   });
} 

Unfortunately it did not work.

I spent several hours trying to find a solution, but I did not manage it. I would appreciate any suggestions how to make working the Windows Phone App written in JavaScript with AngularJS.

Answer 1

Microsoft Open Technologies recently released a shim which will prevent this exact problem for Windows Store apps using AngularJS, as well as many other popular JavaScript libraries.

Simply download the JavaScript Dynamic Content shim off of GitHub, then reference the file towards the beginning of your app before any other scripts are run. You should no longer see a dynamic content error.

Let me know if this solves your problem!

Answer 2

I encountered this issue when using Angular in a Windows Store App. The solution I came up with was to monkey patch the DOM manipulation functions that were unsafe, rather than having to hack up Angular or jQuery because I still wanted to be able to update using bower.

var patch = {
    methods: [
        'appendNode',
        'cloneNode',
        'insertBefore',
        'removeChild',
        'replaceChild'
    ],

    properties: [
        'innerHTML',
        'outerHTML'
    ]
};

patch.methods.forEach(function (name) {
    proxyUnsafeMethod(HTMLElement.prototype, name);
});

patch.properties.forEach(function (name) {
    proxyUnsafeProperty(HTMLElement.prototype, name);
});

function proxyUnsafeMethod(object, name) {
    var _unsafe = object[name];

    object[name] = function () {
        var context = this;
        var args = arguments;

        return MSApp.execUnsafeLocalFunction(function () {
            return _unsafe.apply(context, args);
        });
    };
}

function proxyUnsafeProperty(object, prop) {
    var descriptor = Object.getOwnPropertyDescriptor(object, prop);

    proxyUnsafeMethod(descriptor, 'set');

    Object.defineProperty(object, prop, descriptor);
}

Answer 3

Angular dynamically puts HTML comment tags <!-- --> for ng-repeat and other directives. Unfortunately, Microsoft considers these to be unsafe when put in from javascript using element.innerHTML, and thus is not allowed.

The workaround is to modify the actual angular.js file and wrap all element.innerHTML calls in MSApp.execUnsafeLocalFunction();

In the version of Angular that I'm using, this is line 2539 and line 2162

Line 2539:

MSApp.execUnsafeLocalFunction(function() { element.innerHTML = value; });

Line 2162:

MSApp.execUnsafeLocalFunction(function() { div.innerHTML = '<div>&#160;</div>' + element });

The best method would be to search the angular.js file for all instances of innerHTML and wrap it.

Answer 4

In a lot of cases where you run into issues with dynamic content Winstore-jsContrib might help. Simply add the .js file at the beginning of your app and you're good to go.