We have a web-based CCTV system - each camera effectively acts like a web server, and you simply browse to a URL to see the camera's image.
I've written a simple HTML page that "aggregates" each camera's image onto a single page. I use javascript to append a random query string value onto each image URL every couple of seconds, forcing the images to refresh. A URL might look something like this:
http://192.168.50.100/camera1/current.jpg?rand=324923
When this HTML page is viewed from the internal network, it all works fine.
Now, I've also created an "external" version of the page on our DMZ, so managers can view the CCTV while off-site. The HTML is identical to the "internal" page except for the image URLs, which are something like this:-
http://foo.com:1234/camera1/current.jpg?rand=...
Each camera has a different port number, so I'm assuming the IT guys are using some kind of port-forwarding. When you view this page, the camera images do appear initially, but don't refresh. In some cases it shows images that were captured seconds or even minutes ago. Using Chrome's F12 feature, I can see the random number changing in the image URLs, so I know the javascript is working.
Any idea why this external page isn't refreshing? It seems that something is serving up cached images, and ignoring the changing query string (the whole point of which should be to request an uncached version).
Related
I have a PHP file that I'm trying to get to load via an image tag:
<img src="https://example.com/tracker/">
I can see in Firebug that the PHP page is technically being loaded. But since it's not actually an image, it looks like not everything from that page is running - like Javascript that's supposed to run tracking certain visitors.
I'm probably just going to add all the javascript and stuff into the footer of each page instead, but I still don't understand why this didn't work.
Didn't affiliates used to load web pages as images for cookie stuffing like 10 years ago? I was under the impression that the page itself should load when being called, even as an image.
Or is it not loading as a result of some sort of browser security setting?
Loading an image that way won't treat the result as HTML and certainly won't try to run any javascript in it.
What that is good for is that /tracker/ can be a web application that does something with the request. Instead of just retrieving an image, it can increment a hit count or inspect a cookie. Then it can return an image of some kind, even if it's a 1x1 transparent PNG.
If you want to execute Javascript, then use a Script tag instead.
I just tried something rather trivial: get the source code of a web page (by saving it) and count how often a certain phrase occurs in the code.
Turns out, it doesn't work if that page uses Polymer / web components. Is this a browser bug?
Try the following: Go to http://www.google.com/design/icons/ and try to find star_half in the code (the last icon on the page). If you inspect the element inside of Chrome or Firefox, it will lead you to
<i class="md-icon dp48">star_half</i>
but this won't be in the source if you copy the root node or save the html to disk.
Is there a way to get the entire code?
Reason for this behavior is probably how source viewing( and source saving as well?) works for browser and because shadow roots are attached to web components on the client side.
When you press ctrl-u on a web page, browser essentially does a network call again on the same url to fetch a copy of what server returned when you hit that url.
In this case, when this page renders, browser identifies the component icons-layout and then executes code to attach a shadow-root to this node. All of this happens when your page reaches the client(browser).
When you are trying to save this page, you are saving what server returned not current state of the page. You'll see same behavior if you fire up chrome console and try to save an icons-layout node.
Is there a way to get the entire code?
I don't know how to do it from browser but phantomjs provides a way to save client side rendered html.
I have been using a dev tools network tab to check out the loading of resources within a HTML email, because sometimes some of the images do not load properly.
Now I am trying to understand if the email client will always execute the html code in a top to bottom approach, or if there are conditions which can change this.
So I have a tracking pixel and it is located at the very bottom of my email. This pixel does a lot of things which causes it to take about 15 seconds to load. However, because it is at the bottom of my email, it should not interfere with the images being loaded above it. That was what I thought all the time until I checked out the Network tab.
Within the email, a lot of the images are dynamically injected. In the network tab, these images normally have a status of 302 - moved temporarily. It then looks like these images are then reloaded after the tracking pixel has started its request, which could be the cause of some images not loading properly.
I was really hoping for some advice as to whether my theory could be correct, or if I am missing the point altogether?
Thanks
I want to achieve:
I have a html page that displays an image.
which is pretty easy. [say my image file name is xyz.jpeg]
When the file changes or replaced with new content, say, the server or by some other mechanism the file is getting changed,
Now I want this modified image gets displayed in the browser WITHOUT REFRESHING the web page
So, kind of a notification system in which the browser is notified with new image, and gets displayed.
I am not expecting the exactly source code, but a direction of which tool that can be used?.
I have come across websocket, but I am not sure if this solves this purpose.
The image can be refreshed on timely manner(for eg 10 seconds) using javascript, ie request will be send to server in specified time interval, and the image will be updated, this is pretty easy to code also. Please refer this question
However this solution has got a negative impact on performance, since the number of request to be served is too high if the page is accessed by multiple users.
Hope this solves your doubt.
Consider the following code :
<img src="http://website.com/Page/1"/>
"1" is a parameter to insert in some table in the "Page" page in website.com.
Will the visitor to this page (that contains the code above) cause an execute of the page and insert 1 to the table ? If the page contains some Javascript code. Will it be executes if we visit the page that contains the code above ?
A browser, if configured to load and display images, will first check whether it has the document matching URL in its own cache as fresh (by some caching criteria). If not, it will send, via HTTP, a GET request to mysite.com for the resource /Page/1. What happens then is up to the server. It may just pick up an image file from its resources and send it to the browser, or it may generate an image an send it, or it might (instead of or in addition to such things) store or update something in its database, or just a counter in a file, or whatever it has been programmed to do.
If the resource sent by the server is image data, the browser will try to display it. If it happens to be e.g. an HTML document, it will be discarded, and the browser will display the value of the alt attribute instead, or an icon of a broken image, or both.
When the browser finds this img tag in a visible area (so it should not be hidden with display: none for example), it executes the image as a http request. That's how statistic tracking works, too.
So as it's a regular http request it will execute the server-side code for that URL, which should in return deliver an image (be it just a blank 1x1 gif), so the browser does not report an error.
But keep in mind the browser might cache the image if you visit this page the second time. So either append a random string or timestamp at the end (e.g. http://website.com/Page/1?23423412341) or tell the browser with htaccess to not cache it.