I'm making a javascript metro app and have some code like this:

    <script>
       document.writeln(foo());//this line is trouble
    </script>

and when I tried to run, it gave me a rather long error:

Unhandled exception at line 20, column 9 in ms-appx://a375ffac-3b69-475a-bd53-ee3c1ccf4c4e/default.html

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 /?LinkID=247104.

How can I get around this?

I'm making a javascript metro app and have some code like this:

    <script>
       document.writeln(foo());//this line is trouble
    </script>

and when I tried to run, it gave me a rather long error:

Unhandled exception at line 20, column 9 in ms-appx://a375ffac-3b69-475a-bd53-ee3c1ccf4c4e/default.html

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.

How can I get around this?

• javascript
• windows-8
• microsoft-metro

• 1 Why is document.write considered a 'bad practice'? – Peter Commented Jan 23, 2013 at 2:13
• 1 Why document.writeln() and not a real DOM manipulation method? – Matt Ball Commented Jan 23, 2013 at 2:13
• It says it in the exception, "use the toStaticHTML method." – İsmet Alkan Commented Jan 23, 2013 at 2:20

3 Answers 3

Windows 8 restricts the content you can set through innerHTML and Writeln, because it's considered unsafe...

The correct way to add content is:

// The untrusted data contains unsafe dynamic content
var unTrustedData = "<img src='http://www.contoso.com/logo.jpg' on-click='calltoUnsafeCode();'/>";

// Safe dynamic content can be added to the DOM without introducing errors
var safeData = window.toStaticHTML(unTrustedData);

// The content of the data is now 
// "<img src='http://www.contoso.com/logo.jpg'/>" 
// and is safe to add because it was filtered
document.write(safeData);

If your code has some javascript, you can use this function (But microsoft dont recomend it):

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

See at:

http://msdn.microsoft.com/en-us/library/windows/apps/Hh767331.aspx

For your case:

MSApp.execUnsafeLocalFunction(function() {
    document.writeln(foo());
});

Note that you should only do this if you understand your content is safe; if you don't, I would recommend using the toStaticHTML method.

regarding to the docs I would try :

document.writeln(window.toStaticHTML(foo()));

Windows 8 store apps have a restriction on placing dynamic content inside innerHTML attribute. To fix this you need to include winstore-jscompat.js file from following location in your page as first reference. Please see this link to know more about winstore-jscompat.

This file is not required on Windows 10.