Inline Scripting issue in windows 10 apps with Microsoft edge

Question

Im developing Windows 10 store apps Javascript/Html and since there is Microsoft EDGE in apps as the browser, inline scripting no longer works. If i put the code in an external file, the page loads, but none of the click events work. Is there any solution for this. Small example where onclick attribute does not work.

Code

default.html 7 default.js

// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509

function gored() {
    document.body.style.backgroundColor = red;
}


(function () {
    "use strict";

    WinJS.Binding.optimizeBindingReferences = true;

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    var isFromBackground = false;
    app.onactivated = function (args) {

        var localSettings = Windows.Storage.ApplicationData.current.localSettings;
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll());
        }
    };

    app.oncheckpoint = function (args) {
        // TODO: This application is about to be suspended. Save any state
        // that needs to persist across suspensions here. You might use the
        // WinJS.Application.sessionState object, which is automatically
        // saved and restored across suspension. If you need to complete an
        // asynchronous operation before your application is suspended, call
        // args.setPromise().
        isFromBackground = true;
    };

    app.start();
})();

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>App1</title>

    <!-- WinJS references -->
    <!-- To get the latest version of WinJS, go to: http://go.microsoft.com/fwlink/?LinkId=533245 -->
    <link href="WinJS/css/ui-dark.css" rel="stylesheet" />
    <script src="WinJS/js/WinJS.js"></script>

    <!-- App1 references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>

    <p>Content goes here</p>
    <button onclick="gored()"> Click Me</button>
</body>
</html>

if you're testing locally, i.e. file:/// then you need to explicitly allow javascript to run (if edge is anything like other internet exploder versions) — Jaromanda X, Jul 06 '15 at 06:55
IE 10 and 11 has no problems. I am dynamically injecting html . The inline script loads but the click events do not work in that html — Query21, Jul 06 '15 at 07:35
perhaps your script has a problem in that case. how are you adding the click events in your script? — Jaromanda X, Jul 06 '15 at 07:41
let me be clear - are you using .addEventListener (should work), .attachEvent (probably wont work) or some obscure method (who knows if it will work) to attach the click event — Jaromanda X, Jul 06 '15 at 08:54
Click events in html that is onclick is not working. html has an inline script which loads a js. — Query21, Jul 06 '15 at 09:40
Please include the code that isn't working in your question. — TylerH, Jul 06 '15 at 20:20

score 2 · Answer 1 · edited May 23 '17 at 11:59

I went into detail about this in a blog post.

Windows HTML5 apps have a strict security setting, especially when it comes to injecting code at runtime via JavaScript. I ran into this issue before as well.

You can wrap the function that you are using to inject the Javascript with another function, MSApp.execUnsafeLocalFunction().

When attempting to dynamically insert a div, Windows 8 throws an error. Specifically, it’s when trying to use something like:

div.innerHTML = "A string of some stuff"

HTML1701: Unable to add dynamic content ' a' 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=

Reason:

The reasoning behind all of these problems is the same, so I’ll just state it here once for the sake of brevity. `Microsoft fears that the string can be intercepted somewhere along the line, and malicious content can be added to the values of your string.

Work Around:

The big issue with this method is that you’re trying to use innerHtml. Instead, use .append.

That still won’t work if you just try to pass in a string, however. What you need to do is set your string to a variable, then pass in that variable. If you do not create an object (that is, setting the string to a variable) then this will not work. If you just try to use a string, then you’ll see nothing but text where the div should be.

Here’s a single line example:

$panel.append('<'img src="' + item.thumbImageUrl +'" >');

If you try to pass that in, Windows 8 will throw the error seen above. Even if I wrap that in MSApp.execUnsafeLocalFunction() I will still see an error.

The workaround is as follow:

var appendString = '<'img src="' + item.thumbImageUrl '" >';
$panel.append(appendString);

Because I’m now taking that string and setting it to a variable (thereby turning it into an object), Windows 8 will allow me to pass in that object and create dynamic content.

Even then, it will occasionally throw the error above. HOWEVER, if you were to wrap that object in MSApp.execUnsafeLocalFunction(), you would then be in the clear. WinJS offers a function to wrap your own functions in, which allows you to basically say “I take responsibility for this function, and I assure you it’s safe.” That function is called: MSApp.execUnsafeLocalFunction().

So the final solution looks like this:

var appendString = '<'img src="' + item.thumbImageUrl '" >';
 MSApp.execUnsafeLocalFunction(function() {
     $panel.append(appendString); 
});

You can read more about this issue here.

Further Reading:

execUnsafeLocalFunction from MSDN

TutsPlus tutorial on jQuery and Win8

Ok thanks for info. But even without inline scripting, and using external file onclick html attribute dosent work. why is that — Query21, Jul 08 '15 at 06:27
Oh I see now -- you are just trying to use an OnClick event within edge, and not even trying to insert a new .js file to the page. Hmm this is odd behavior. Let me look into this and see what I can come up with. — Dave Voyles, Jul 08 '15 at 13:16

Nigel Dibben · Answer 2 · 2016-03-24T12:05:52.087

I had a similar problem and found that a script read in the header did not work but when I moved it to the body, it did:

WORKS ON MOST BUT NOT ALL PAGES WITH 'EDGE'. WORKS WITH ALL PAGES ON ALL OTHER BROWSERS:

LT script type="text/javascript" src="../ie5.js" GT LT /script GT
LT script type="text/javascript" src="../common_functions.js" GT LT /script GT
LT /head GT
LT body GT

WORKS ON ALL PAGES WITH 'EDGE' AND OTHER BROWSERS:

LT /head GT
LT body GT   
LT script type="text/javascript" src="../ie5.js" GT LT /script GT
LT script type="text/javascript" src="../common_functions.js" GT LT /script GT

Why? Only Microsoft will know.

Inline Scripting issue in windows 10 apps with Microsoft edge

2 Answers2