0

I have the following problem: I have a frontend application A that authenticates, sets up a reverse proxy, and then forwards to a separate application B I don't control.

I would like to add decorations to the resulting page of the B application, for example adding a button "logout", but I can't modify B's code or templates.

Is there some magic trick I don't know about to obtain this result?

Stefano Borini
  • 138,652
  • 96
  • 297
  • 431
  • 1
    Your tag HTML is a bit, lonely. Do you have more context? – roberrrt-s Sep 05 '16 at 08:22
  • 1
    @Roberrrt: I would if I knew what I am talking about, but if I did, I wouldn't be here asking :) – Stefano Borini Sep 05 '16 at 08:23
  • Fair play, hehe. My first instinct says: 'no' you cannot modify an external page from a different source, but there are some contextual sideways that would work on certain conditions. Take a bookmarklet (https://en.wikipedia.org/wiki/Bookmarklet) as an example. – roberrrt-s Sep 05 '16 at 08:24
  • I can give the details of the actual application frameworks, but I doubt they are relevant. One (the frontend, A) is a tornado app. The other (the secondary app, B) is a flask app. A logs the user in, starts B, sets up a reverse proxy, then forwards you to the url associated with B. – Stefano Borini Sep 05 '16 at 08:25
  • 1
    @Roberrrt However, B is a mess, I don't want to touch it, it's a bad idea to do so for other reasons. Yet, the user experience it gives would be improved if I could add decorations on top of it, such as a logout button, and a button that brings you back to the application A main page. – Stefano Borini Sep 05 '16 at 08:26
  • Is it possible to include application B inside an ` – roberrrt-s Sep 05 '16 at 08:28
  • Uhm... iframe sounds plausible as an approach. Not trivial but I guess I can obtain something. I though it was deprecated though... – Stefano Borini Sep 05 '16 at 08:32
  • http://stackoverflow.com/questions/8702704/alternative-to-iframes-with-html5 – roberrrt-s Sep 05 '16 at 08:32
  • @Roberrrt That's a great reply. Thank you. Could you please post it as an answer so I can mark it as resolved? – Stefano Borini Sep 05 '16 at 08:34
  • I've wrapped the discussion inside an answer, so future viewers can see them as well. Good luck with your application! – roberrrt-s Sep 05 '16 at 08:36
  • When you're proxying B through A, A could rewrite the HTML on the fly to insert or modify elements. It's "just" a bit of DOM manipulation at the proxy. This is a pretty ugly situation and you never know when it's going to break, but it's certainly *possible*. – deceze Sep 05 '16 at 09:01
  • @deceze In practice, the proxying is done by a node.js reverse proxy, which is pretty simple and just forwards the request. I could technically do that, but I would have to change the revproxy completely. – Stefano Borini Sep 05 '16 at 11:00

1 Answers1

2

Your case, as discussed in the comments, leaves you open for a couple options:

  • Wrap application b inside an <iframe>

Load application b inside an <iframe>, while keeping a custom navigation bar in the top on a fixed position. This would be possible if the <iframe> is hosted on the same location as application b. This would avoid tampering with the original code of application b, while still giving you freedom to alter the user experience.

Example:

<iframe src="https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html" width="400" height="300"> <p>Your browser does not support iframes.</p> </iframe>

(variation on this):

<object data="http://www.web-source.net" width="600" height="400">
    <embed src="http://www.web-source.net" width="600" height="400"> </embed>
     Error: Embedded data could not be displayed.
</object>

Alternatively, this is a great related question with some viable solutions: Alternative to iFrames with HTML5

  • Insert custom JavaScript / CSS inside application b

If you have control over the code of application b, you could include a small JavaScript file that automatically inserts some absolute elements to enhance the user experience. It would avoid to ruin the original code, but it's not really a clean solution

  • Modify the existing code

It's an option, but you shouldn't if you're not comfortable to edit it. Because you'll most likely waste a lot of time on it.

Good luck with your application!

Community
  • 1
  • 1
roberrrt-s
  • 7,914
  • 2
  • 46
  • 57