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?
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.
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:
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.
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.
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:
It takes more cooperation and custom setup from the appointment booking site
You'll need to get a HTTPS certificate for book.example.com
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.)