I am dealing with a situation where my page contains "domain relative URLs" like ../file/foo or /file/foo within a href attributes, img src attributes, video, audio, web components, js ajax calls, etc.
The issue arises when these URLs need to be relative to a specific domain different from the one on which the page resides. For example, if the page is on http://localhost:8081/page/, I want the browser to translate them as:
http://localhost:8081/page/../file/foohttp://localhost:8081/file/foo
However, my actual requirement is for all relative URLs to be independent of the current domain and related to another domain, such as http://localhost:5462/. In that case, they should be translated as:
http://localhost:5462/page/../file/foohttp://localhost:5462/file/foo
In essence, I need a way to ensure that the URLs on the page remain constant regardless of where it is viewed from, maintaining consistency in fetching content from the same source. This behavior naturally works for complete URLs but not for relative ones. I am seeking a method to define and enforce a specific domain that relative URLs relate to, ensuring consistent content and behavior regardless of the viewing location.
What are the potential solutions available to address this challenge, and which option would be most effective? Here are some ideas:
- Frontend Solutions
- Create a markdown to html converter plugin that can identify domain-relative links and convert them to complete URLs. However, this may have limitations with complex markdown components or non-markdown defined links.
- Utilize JavaScript to dynamically convert domain-relative links on the page to complete URLs. This approach may miss certain links added after initial page load.
- Consider intercepting all http calls, clicks, and requests using JavaScript to manipulate any detected domain-relative URLs appropriately. However, this could impact user experience.
- Explore the use of meta tags, such as the base tag, to potentially alter the relationship between domain-relative links/calls and domains in HTML elements.
- Backend Solutions
- Route
localhost:5462underlocalhost:8081to allow seamless access to data across both domains. While effective, this solution may not always be applicable without routing. - Investigate injecting domain information into response objects/headers when requesting the page from the backend, tricking all HTTP requests on the page to utilize the desired domain for domain-relative URLs.
- Route
- Other Solutions
- Consider restricting the use of domain-relative links but ensure support for
file:///links where necessary. Implementing a ban on specific link types may present challenges.
- Consider restricting the use of domain-relative links but ensure support for
- Are there any additional solutions worth considering?
Key Considerations
- This scenario extends beyond localhost and could apply to various domain combinations or within an Electron app environment.
- An ideal outcome would involve unmodified appearances of links in the page source code, while providing accurate indications of link destinations upon hover.
- User-facing functionality should ideally work seamlessly, with any potential issues limited to developer-facing interactions.
- CORS restrictions do not complicate the situation.
- An optimal solution would function universally across backend setups, favoring completely frontend implementations but being adaptable to specific backends if necessary.
- The backend in question utilizes Node/Koa technology.
An ideal resolution might resemble the functionality provided by the base tag, but extending its usability to encompass JavaScript functionalities beyond HTML elements.
If such a solution does not exist, perhaps leveraging the base class for HTML elements alongside judicious JavaScript implementations could effectively intercept and redirect all relevant JavaScript and network requests to the correct domain for domain-relative URLs. In such a scenario, technical feasibility and implementation details merit further exploration.