I would like to show a web page from another website and show it on my website. I want to annotate some text on their website content. Conceptually I know what needs to be done:
- I will capture their web page's html and probably the css and js files and put them in a folder on my web server. I will keep the images url pointing to them so I don't have to download all of them.
- I will modify the html of their web page which I have a copy of and add what I need to do. For example, highlight some text and display it. Probably do this in an iframe.

I know some sites download assets asynchronously after the initial html has loaded which complicated things.

The capturing part and injecting my js code should not be hard. I am soliciting ideas on how to display another site's page on my page while their page displays properly on mine as if I am on their site and trying the save the minimal amount of their assets whatever they are, on my server.

The image below shows what I want to do. The user is on mypage.com which is my site. The box is showing a web page from another site reconstructed by me showing the same content with some additions. I colored some of their text in red to put focus on that text and explain something to the user.

Any ideas on how to do this beside of what I mentioned? Any software or libraries which do some of this work? The backend is in C#.

enter image description here

  • 3
    Note that unless the site (and content) in under an open-source license or unless you have specific permissions, you are not allowed to make a copy of the site or make modifications to it. – Bart van Ingen Schenau Sep 9 '17 at 7:54
  • First.. different countries have different laws. You can't make a blanket statement like that. Second.. That's not copying for the sake of mischievous act or profiting. Third.. not all assets are copied. Fourth.. I have seen commercial sites similar to my idea do this so they probably have consulted with a lawyer. Fifth. Google and million other sites display content from their servers which belong to other sites. Last..that's not a good reason to downvote, to whoever did it. – Tony_Henrich Sep 10 '17 at 14:57
  • The content of the page itself is likely under copyright. You would need to conform to fair use guidelines for this to be legal. – Aluan Haddad Sep 11 '17 at 22:10
  • I want to keep this question technical only please. – Tony_Henrich Sep 13 '17 at 16:41

I had to do something similar but did not want to use an iframe or worry about pulling their resources files onto my server. The solution was to pull the HTML from the external URL and inject a <base href="http://url-to-external-site.com" /> tag pointing to the original url. I could then use the HTML on my site as normal (without an iframe).

I did this in node.js and open sourced the project node-iframe-replacement:

A small node server that grabs the source code of an external website and injects your content - thus allowing you to host your app on a subdomain and without an iframe. Changes to the external site (navigation etc) are automatically picked up every 5 minutes and reflected in your app.

It should be relatively straightforward to port it to C#

EDIT: When using a base tag to an external URL, you need to ensure all your URL's are absolute!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.