Javascript generated html element to load resources from a specific hostname - javascript

I create an HTML element from a string to parse something from it
html = document.createElement('html');
html.innerHTML = 'some html string loaded from a different host';
but I see that the resources loaded using an absolute path without hostname, try to be loaded from the current window location.
Is there a way to set a specific location from where to load the resources without having to replace all absolute or relative src paths?
for example if I have an image in the html string
<img src="/abspathto/img.jpg">
when I create the html element and set its innerHTML, the browser tries to load the image from the current hostname/abspathto/img.jpg
I want to be able to set from which host name the browser can load the images that have only the pathname on their src on that html element generated from javascript.

So, it is best practice to use relative file paths (if possible).
The reason why is that it will work regardless of hostname, meaning it would also work in any stage of development or deployment as long as the directory structure does not change.
Source: https://www.w3schools.com/html/html_filepaths.asp
You can control which level at which HTML starts at by using double dots (i.e "../images/path/to/img", this goes up 1 directory).
You can use a website such as: "https://www.stackoverflowexample.com/images/path/to/img.jpg"
You can use another computer's resources using UNC path or IP address if the user that is accessing them has permission to do so. Stack overflow answer on that:
https://stackoverflow.com/a/29257902/8570546
This should allow you to navigate to any resource you have access to using HTML File Paths.

Related

Make common headers and footers for website with folders

I'm wanting to create a website with common headers and footers for each webpage and am currently using the answer supplied here.
However, I have a website with a tree diagram similar to:
- index.html
- header.html
- footer.html
- folder
- info.html
In my header and footer files, there are multiple (relative) links such as to image sources, other pages, etc, which means while they may work in index.html, if I try to load it into info.html, the links break.
Is there any way to change all links to look one folder back, etc, or would I have to use javascript to change the src property for every referenced image?
Add the <base> element to your info.html and make its href tallying the relative links of your header and footer markups.
For example, if your website is hosted in http://example.com/foo and your relative links are such as ./images/xyz.jpg, the base element of the info.html would be like this:
<base href="http://example.com/foo">
The browser will compose the relative urls from there.
Another option is to configure your relative urls to pick up resources from the root.
In above configuration, instead of this:
<img src="./images/xyz.jpg">
...you can use
<img src="/foo/images/xyz.jpg">
So, wherever it is executed from, browsers will start the relative paths from the root.
The advantage is that this will enable easy local testing too.
You can use <base> tag in your info.html file's <head> tag with a href attribute.
The <base> tag specifies the base URL and target for all relative URLs in a document.
The <base> tag must have either an href or a target attribute present, or both.
There can only be one single <base> element in a document, and it must be inside the <head> element.
You can find more in this example.
This is basically what the <base> element is for. You include it in the document and specify an href from which all relative links/urls are resolved.

Avoiding multiple GET requests due to un initialized value of SRC attribute in IMG element

I have an img element with src attribute
<a><img src="{imgSrc}" alt="Image"></a>
The value of imgSrc is generated dynamically when a certain user induced event happens after the page loads.
My problem is, when the page loads there are a bunch of GET requests being sent to the server since there are many src attributes with imgSrc for the URL and as expected they return 404 errors since the imgSrc is not constructed by the time.
My question is, is there any way to make sure that the request is not sent to the server when imgSrc variable is not populated with an image URL.
Additional details:
This is fully developed web application by some one else and I am fixing defects in this.
The developer has designed the application in such a way that almost all src attributes have variable for their URLs and loaded when the page loads, but the URL values are generated only when certain events happen.
Unfortunately, browsers will try downloading the resource specified in the src attribute of img node elements as soon as this attribute is set.
This happens even if the img elements are not inserted into the DOM! They just need to be transformed from HTML string into node elements within the current document context (but not necessarily its DOM).
So if you cannot manipulate that HTML string before it is parsed by the browser, there is absolutely nothing you can do to prevent it from trying to fetch the resources.
A dumb workaround would be to provide a dummy image (like a transparent 1px * 1px?) with that exact name, so that browsers are happy and stop requesting it…
If this is an option for you, you could try replacing the entire img tag (rather than just its src value). But you will need a way to hide the placeholder text so that the user does not see it before you replace it by an actual img tag.
Good luck!

Best way to block images in email rendered in browser?

I've created a simple web email client.
I want to "block" (i.e. not show) images whose protocol is http (vs https) because my site is served over ssl and I don't want insecure content warnings.
What's the best way to go about this? Should I traverse the email dom and set the image href to "" (ie. empty string)?
Is there a better way?
I should note that this is a temporary measure. In the future I will set up an image proxy/cache system similar to gmail's.
I've looked at the way it's done in Outlook, gmail, yahoo, etc. Basically they just use a placeholder image (hosted on some cdn) that's just a small grey box, and they let the size attributes of the img tag scale it to the right size.
So all they do is change the url of the img tag to be the url of the grey box.
A smart variation if you want to eventually show the correct image (enable images) is to store the url of the real image location as part of a query string that can be parsed and used later to get the real image:
http://mycdn.com/placeholderimage.jpg?http://realcdn.com/therealimage.jpg

Resolving paths within HTML from another domain

I need to get an HTML from another domain, highlight some words in it and display it in an iframe, keeping the look and behaviour of original page.
So, I pass the page's URL with Ajax script to a PHP file, which retrieves HTML content with CURL, processes it, and returns it to Ajax script. Then I put processed content into an iframe. Now, everything is OK except that paths to all website's resources are relative to another domain's root (beginning with just '/'), so naturally page inside my iframe is rendered without any CSS, JS, images etc. Also, all website's navigation links are naturally dead.
What's the best way to handle this? Especially considering that obtained HTML can also contain paths relative to the document as well.
Try this:
<base href="http://www.theotherwebsite.com">

Only Absolute Paths Work With Jquery When Dynamically Setting An Image While Using Django Static Files

I have some jquery code that toggles an active vs. inactive image for a button when a user clicks it. It works fine when I just run everything from windows statically with relative paths.
However, once I migrated it to my django dev box clicking the button will fail to load the desired image if I set a relative path to it through jquery. All other static images are serving fine through css with relative paths, but if I set the relative path through jquery on document load, for instance, it doesn't work. I've confirmed through inspect element that the paths are the same and jquery is setting them correctly.
After trying various relative paths for 20 minutes, I found out that setting the absolute path of the development server works, i.e. "url('http://127.0.0.1:8000/static/img/img.jpg'). I'd like to get relative paths working as this method has its limitations with flexibility and deployment.
Am I running into a limitation of django static file serving? Did I find a bug? Or is there something I'm missing?
Thanks in advance!
I don't know Django, but one approach when your server-side framework gives you a root path is to export that into JavaScript in the main document:
<script>
templateRootPath = {{% static "path to your template dir" %}}
</script>
and to then use where appropriate:
$('#mybutton').css('background,"url('"+templateRootPath+"/img/img.jpg')");

Categories

Resources