Targeting an app page's URL with Javascript

[gpillsbury]

I am trying to help our users understand the Redirect Tool by modifying some of the default Canvas content on that tool's installation page.  To do so, I am using the Theme Editor to upload a .js file containing Javascript to target the specific URL of the tool's page: https://xxxxx.instructure.com/courses/####/settings/app/redirect.  Here is the code:

if(window.location.href.indexOf("redirect") > -1) {
     alert("Huzzah"); 
}

All this means is: if the URL of the browser ("location.href") contains the word "redirect", then the browser will show a silly alert box.  It's a proof-of-concept.

So, when I arrive at the Redirect's installation page via the normal method (Settings > Apps > Search for Redirect Tool and go to it), the expected alert does not appear even though the browser address bar clearly shows the expected URL.  Further, if I copy-paste that same URL back into the browser address bar and press <enter>, the alert does appear as expected. Unfortunately, after I dismiss the alert, Canvas immediately rewrites the URL and goes back the to the main Apps home page ("/settings/apps").

What I don't understand: if the full URL actually appears in the browser address bar when you first arrive at an app's installation page, why is the Javascript comparison not returning a "true" result?  Canvas seems to be "spoofing" the URL somehow, but I don't know that such a thing is possible.  Why does it only work when you manually copy-paste the URL and go to it?

Has anyone explored this aspect of Canvas in conjunction with the ability to use a Javascript file in the Theme editor?

[kmeeusen · Accepted solution]

Hi @gpillsbury 

If you are using Javascript anywhere within the Canvas UI, Canvas will strip it out. It's part of the Canvas security measures in place - no active scripting permitted.  This excerpt  is from the How_do_I_use_the_HTML_view_In_new_Rich_Content_Editor_as_an_instructor

"You can embed HTML in the New Rich Content Editor. When creating custom HTML coding in Canvas, you may discover that certain HTML codes do not work upon saving. This is because Canvas will only support certain HTML elements for security reasons. This also applies to content copied and pasted from an external source. Below is a link to a list of HTML tags that are permissible in Canvas. HTML tags that are not on this list may be stripped out of the New Rich Content Editor when you save your work. View the Canvas HTML Editor Allowlist PDF for more information."

I hope this helps,

Kelley

[gpillsbury]

Hi,

Sorry, I wasn't clear.  I am not trying to put Javascript in the RCE.  Rather, I am uploading a .js file via the Theme Editor that contains the Javascript.  I've updated the the original post to make that clearer.

Glenn