Page has URL that redirects to external URL

[RozelleNortje]

We have a couple of Pages that act as external URL tools. Somehow, URLs were added to the HTML content that redirects as soon as you try to view the content on the Page. It is impossible to edit the page because it immediately redirects.

We employed a freelance learning designer and no longer have access to the original content used. Ideally, we would like a solution to remove the link, go in, and edit the Pages without needing to redesign about 16 weeks' worth of content. Any idea how to circumvent the redirect? I have tried copying the Pages' URLs with /edit and it still redirects.

[James]

@RozelleNortje 

You are mixing some terms together that don't normally go together, so I'm not completely sure what is happening. I'll throw a bunch of stuff out here and hopefully one of them will help.

Pages refer content pages. To automatically move to an external location, they would need to employ JavaScript, which is not allowed within content pages. It's possible that you have custom JavaScript that looked for content and did the redirect. If so, you could edit the JavaScript using the theme manager, but in some cases, your JavaScript will just load JavaScript from another site (our Atomic Search does this). Canvas also recently (within the last year, I think) implemented a redirect feature when you rename a page.

Regardless, you can edit pages without actually loading them and getting any redirect. Use the Canvas Pages API to load the page. Then modify the body and update the page.

Canvas has an External URL that gets loaded as a module item, not as a page. This allows people to add a module item that contains an external link and you can load it in a new tab. When you open it from the modules or navigate to the item (using Previous and Next at the bottom without loading it in a new tab), it automatically tries to load the page in an iframe to prevent content on that page from doing bad things with the credentials of the user logged into Canvas.

You can edit these from the modules page, but I don't think that's what you're wanting to do.

If this is what you're talking about, then that page -- the one with the external URL -- is not hosted within Canvas [unless you're one of those people who uploaded HTML files to Canvas and then linked to them], then you're not editing it from within Canvas. The content is on another page. You need to find the source location on an external (to Canvas) server and edit there. If you don't have control over that page, then you may need to reach out to the owner. If it's a freelance designer that you don't have access to anymore, then you may need to host your own version of the file on a server somewhere. 

Depending on how the redirect is done, there may not be any content on the page that you are linking to. If the page uses JavaScript to handle the redirect, then you could use tools like curl or wget or other tool to fetch the content. They don't attempt to execute JavaScript like a browser would, so it would save any content. If the page is hosted on another site, you could disable JavaScript in the browser through the developer tools and then load the page.

If the redirect comes from the server itself, then you won't be able to access the page using curl, wget, or disabling JavaScript. For example, I had to reconstruct a tool I had and changed technology from PHP to JavaScript. I had hundreds of locations that referred to probcalc.php and other people had linked to it as well. There's no way to go through and change all those, so I told the server to automatically redirect the probcalc.php to the new location. There's nothing you can do on your end to get around that other than to reach out to the maintainer of the website.

Note that if you do happen to be one of those people who missed my warnings here in the Community about uploading HTML files into Canvas and then linking to them and did it anyway because "it could be done" or "I don't have external server to host files" or "I want to keep everything together" or whatever the reason, then you will can use the Canvas file system to find the file. You will need to edit it outside Canvas and re-upload it. There is also a content security policy that Canvas put in place to keep JavaScript in uploaded files from doing bad things, but your institution may not be using it.

Canvas has an External Tool that you can load as a module item that launches tools from third-party providers such as publisher systems. These require a special set up and cannot be executed from within a content page in Canvas or an external URL.

[RozelleNortje]

Hi James,

Thank you for your thoughtful reply. The issue in question is happing on Pages, not the URL tool. They contain content that you can see for a second before it redirects. 

English is not my first language, and I am not a developer, so I am not proficient in coding. I taught myself basics in my capacity as a Learning Technologist and Instructional Designer. I am not sure how to edit the page through the Canvas Pages API. I managed to open it in my browser. But how do I edit anything?

It seems that the redirect issue is coming from an <iframe> where a page was attempted to be embedded in the content. So editing it or removing the iframe could resolve the issue. 

iframe style=\"border: 0px #000 none;\" src=\"https://www.britannica.com/art/Third-Cinema\" width=\"600px\" height=\"400px\" name=\"myiFrame\" allowfullscreen=\"allowfullscreen\"\u003E\u003C/iframe

I just don't understand how to edit through the API.

[James · Accepted solution]

@RozelleNortje 

I embedded that page in an iframe on a regular HTML page (outside Canvas) and it stayed within the iframe. It also loaded a lot more than it needed to, implemented an infinite scroll, and showed me ads after a while.

What I noticed in my browser was a note that a redirect was blocked for this page. That's something I have in my security settings in Chrome.

When I embedded the iframe inside a Canvas page, I saw similar things. There was a redirect attempt made by Britannica -- likely to get people out of an iframe so people don't steal their content or misrepresent it to be theirs. I'm not saying that's what you're doing, but some people do, so content publishers have to resort to things to make sure it doesn't happen.

Unlike you, I was able to edit the page in Canvas because I have the redirects blocked.

It is the Britannica page that is doing the redirect.

On line 114, they have a script line that reads:

if (self !== top) { top.location = self.location; }

That checks to see if you're in an iframe and if so, then break out of it. 

We cannot control the settings on each user's browser to disable redirects. Instead, we can disable them within the settings.

If you add the word sandbox to the iframe element, then it disables the redirect. When I do that on my test page, the redirect message no longer appears. The same thing happens in Canvas.

<iframe style="border: 0px #000 none;" src="https://www.britannica.com/art/Third-Cinema"
  width="600px" height="400px" name="myiFrame" allowfullscreen="allowfullscreen"
  sandbox="">
</iframe>

There are other options to the sandbox attribute that control how much to allow. In particular, allow-top-navigation allows the resource to change the top-level browsing context, but only if initiated by the user -- as opposed to an automatic redirect. That means that if Britannica had a link to open in a new window and the user clicked on it, then it would open in a new window, but that it won't automatically do it.

<iframe style="border: 0px #000 none;" src="https://www.britannica.com/art/Third-Cinema"
  width="600px" height="400px" name="myiFrame" allowfullscreen="allowfullscreen"
  sandbox="allow-top-navigation">
</iframe>

I confirmed this worked with an external page and within a Canvas page.

I would use the sandbox without options unless other functionality was needed for viewing the page. 

You need to edit the page to make that change. That's the the problem -- but at least now I know what you're experiencing.

It turns out that we can do that without using the API.

The issue is that you have allowed redirects in your browser. If we disable them there, then we can edit the page directly from Canvas, add the sandbox attribute, save the page and be done with it. If you decide that you want to re-enable redirects, then you could do that.

I'm going to explain how to do this in Chrome, but if you have another browser with redirects already disabled, then you could use it. There are multiple ways to do what I'm going to explain, this is just a quick way.

1. Open Canvas within Chrome.
2. Left click your mouse on the Site Information icon right before the URL in the location bar at the top. For me, it looks like an o-- on one line and a --o on the second line.
3. Choose site settings.
4. It should open to the Privacy and Security page. If not, choose that page.
5. Under permissions, look for pop-ups and redirects.
6. Change it to Block. I have mine set to block by default so it says Block (default).

At this point, you can use edit the Canvas page (I would use a different tab) and add the sandbox="allow-top-navigation" or just sandbox="". You will need to use the HTML editor view on the page to do this.

You can optionally switch back to allowing redirects after you have made the change. Best practices for security suggest blocking redirects.

One warning, though. If you edit the page with redirects allowed, it will take you out of the edit mode to the full-screen Britannica page. This is because the edit mode doesn't load the content in a sandboxed iframe and it gets to run its script that makes it the top.

This means that the person editing the page needs to have redirects blocked while they edit. People viewing the page will be protected by the sandbox mode.

Another benefit of the sandbox mode, at least with the Britannica page, is that also prevents loading additional articles, the infinite scroll, and the ads. You get the article without the rest of the unwanted behaviors.

You mentioned removing the iframe completely. This can also be done and would make Britannica happy because you're not embedding their content on your page. There are other ways to prevent embeds as opposed to using JavaScript to redirect. They should probably look at those if they really want to protect their information.

If you completely remove the iframe, then you can have a link that will take you to the Britannica page and let the students view it there. This will open in a new tab since it is an external link.

[RozelleNortje]

Thank you, James!

I thought I had blocked pop-ups and redirects, so it did not even cross my mind to check that. I can now edit the page and agree that giving credit to a source by way of embedding is a bad practice. Instead, I will take the appropriate quote, put it in quotation marks, and cite and reference it properly.

I appreciate the sandbox solution and will keep it in mind for future use if it is appropriate and in line with my institution's academic integrity policy.