3

I want to embed a HTTPS website in another HTTPS website. They are hosted at different places and under different domains and their certs are issued for their respective domains.

  • How can I make sure the embedded website is only available through the embedding website and not directly?

  • Shall I use an iFrame or something else?

  • Can HTTPS and certs become a problem in this constellation?

Clarification:

So the embedded site is an appointment booking tool written in vue.js. It should be integrated into the embedding site, that is including it's header and footer. There are no links on the embedded site, only the vue.js app. The user is to book an appointment and be done with it. I want the user to not notice the tool is coming from an external source. SEO is completely irrelevant. In fact, I don't want anybody opening the tool other than through the embedding site.

Improve this question
2
  • How do you want the site to behave when embedded? Are you just embedding one page? Does the embedded site need to have a header and footer from the embedding site or should it be a full page? What do you want to happen when somebody clicks on links in the embedded site? Stay embedded or break out of the embedding? Do you want the URL to change as a user navigates the embedded site? Is SEO of the embedded site important to you?
    – Stephen Ostermiller ♦
    Aug 3, 2021 at 12:23
  • So the embedded site is an appointment booking tool written in vue.js. It should be integrated into the embedding site, that is including it's header and footer. There are no links on the embedded site, only the vue.js app. The user is to book an appointment and be done with it. I want the user to not notice the tool is coming from an external source. SEO is completely irrelevant. In fact, I don't want anybody opening the tool other than through the embedding site.
    – MowTee
    Aug 3, 2021 at 15:21

1 Answer 1

Reset to default
2

iframes and framesets are commonly used for embedding functionality from another site such as an appointment booking form. It won't cause any issues with HTTPS or certificates. There are however some drawbacks:

  1. Iframes are not dynamically sized based on how much content they contain. Your main site needs to specify the expected size up-front. If it is too much, your page will have blank space in it. If it is too little, the iframe will have scrollbars.
  2. There is no good way of preventing the second site from being accessed directly. Users will be able to right click on it and open it in a new window. Search engines can find it and send users to it directly. The best you can do is make sure it has noindex tags so that it isn't indexed by search engines directly.
  3. Because it is cross-domain, your main page and the appointment site won't be able to communicate through JavaScript or cookies.

The other common way to handle this is through sub-domains. You can assign a subdomain of your main site to the appointment booking site. So for example if your main site is example.com the appointment booking site can be assigned the name book.example.com. That way the appointment booking can be handled on a different server, or even by a different company but it can still be part of your website. The disadvantes of this setup are:

  1. It takes more cooperation and custom setup from the appointment booking site
  2. You'll need to get a HTTPS certificate for book.example.com
  3. You'll need to replicate your header and footer on the subdomain (it won't be embedded inside the header and footer from your main site.)
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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