Top JavaScript keyword doesn't work when loaded in iFrame via LTI

Question

My content is loaded in another application via LTI launch. That application is trying to load the content in its iFrame.

My content has javascript calls which is written as top.setLinkVisibility=setLinkVisibility; top.isDeeplinkSession()

When these JavaScript keywords get executed the content is not loaded properly (getting permission denied exception):

Error: Permission denied to access property**

This content would be loaded within my application and also out of my application (via LTI launch).

Now we tried to replace top keyword with self and it works fine

But to make it work for all the content we have to replace the keyword top to self in more than 1000 files and that's really tedious.

Any other way to make the content work? Replacing top to self is one way .. but any easier way?

Answer 1

No, there is no other way. top automatically refers to the topmost window in the window hierarchy. Since it's read-only (to prevent an iframe from accessing the parent document's window), there's no way to use the window.top property. You will either have to replace all top usages with self (which is not read-only or reserved), or place your entire script in a different scope.

Since the window.top property is a property of the window object, it is automatically a global variable. If you define a variable outside any functions (in the global scope), it'll be a property of the window object, so it's not possible to define var top in the global scope, since that'd have to overwrite the read-only window.top. If you were to use var top inside a function though, it'd work just fine, as can be demonstrated in this example:

function foo() {
    var top = 'test';
    return top;
}
alert(foo()); //Alerts "test"

In the future, it's best to avoid overly generic variable names such as top. They can easily cause problems. Especially when they need to be global variables.