Stefano Borini Stefano Borini - 3 months ago 8
HTML Question

How can I modify the web page produced by an external application without modifying the application?

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?

Answer

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!