JS errors in MFP Windows Universal apps when using AngularJS

Have you experienced the "add dynamic content Errors" in MFP Windows Universal apps?

When you are building a Mobilefirst Hyrid app using frameworks like AngularJS, you will see some errors on the Windows universal platform. Windows Universal apps are built as Win JS apps. the WinJS Universal apps are built on the Windows 8 WinRT platform. The reason behind this is that these frameworks relies on innerHtml that injects the dynamic contents. For security reason on Windows Phone 8.1 or Windows Surface / Desktop 8.1 apps Microsoft doesn't allow to inject scripts this way.

Running such apps results in the below error:

Unhandled exception at line 12229, column 11 in ms-appx://b5fb28e5-26bc-40e7-b0b8-91afcaef904d/www/default/lib/ionic/js/ionic.bundle.js

0x800c001c - JavaScript runtime error: Unable to add dynamic content. 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

To avoid or ignore such errors while using the frameworks in your app, Microsoft provides a way to disable the scripts injection validation. It can be disabled by just wrapping the function that injects the content dynamically with MSApp.execUnsafeLocalFunction and in this way your code works without errors.

Example:

MSApp.execUnsafeLocalFunction(function() {
  var body = document.getElementsByTagName('body')[0];
  body.innerHTML = '<div style="color:' + textColor + '">example</div>';
});

The only problem in here is that we will have to search and replace it in all the places in the framework files and this causes maintenance overheads and is error prone.

Can we avoid modifying the framework files and still make the app work ? Yes, we have tried our sample with one of the below JavaScript dynamic content Shim. It works just by including the JavaScript file before any your framework file is loaded.Include the JavaScript Dynamic Content shim for Windows Store apps in your app to address this issue.

Refer the below Microsoft links for more information on how to build a secured WinJS apps

• About execUnsafeLocalFunction method
• Developing secure apps

Also note that when it comes to Silverlight apps (MFP Windows Phone 8) this restriction doesn't exist.