I'm working on embedding pixel tracking on our pages. We have a setup wherein the users could enter up to 4 pixel tracking URLs. Basically, for each pixel tracking URL, I just need to append a script tag with the URL in its src attribute.
For example:
URL: https://code.jquery.com/jquery-3.6.1.min.js
Then the script would be:
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
But what happens when the URL is an image? I tried this and it's giving me a "refused to execute script" error due to the mime type. I kinda expected this since it is an image and I'm alright with the error since the image call is still being logged in the network and was actually successful since it has a status code of 200. I just need to be sure that the image will still be logged in the network with a successful call. Does anyone know if there are any instances that the browser will block this kind of scenario and will cause the web service call for the image to fail? Thanks
Related
I run a website where people frequently copy and paste the output from my website and email it to their clients. The website outputs flight details which includes some images such as below:
when a user copies the content from my website, pastes it into outlook/mail everything is fine and the images display correctly,
however if the recipient of the email uses gmail the images display as a broken link
if I inspect the image element in Gmail then the image src = https://ci3.googleusercontent.com/proxy/ILKyipOTRb8QYVwkcZjePBkX69veJwqeS5fACyVhX2QnAswpuJKXodiMxxv0hRDXoiyxH7W0dsGx4PO9YHpCC8QV=s0-d-e1-ft#https://pnrconverter.com/images/airlines/nz.svg"
where https://pnrconverter.com/images/airlines/nz.svg is the url where the image is stored.
In the console I get the following error messages
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://hangouts.google.com') does not match the recipient window's origin ('https://mail.google.com').
and then
Failed to load resource: the server responded with a status of 404 ()
Most of the other solutions on stack over flow refer to iframes, however there are no iframes used in my site,
has anyone got any sugegstions?
Thanks
If anyone else comes across this problem, the answer is simply that gmail doesn't support svg images. They need to be PNG or JPG!
I want to do something similar to what Google Analytics does to track visitor information. Google Analytics' javascript file puts a 1x1 img on your site. When a visitor comes to your site, they load that IMG from Google. The IMG SRC attribute includes a number of URL variables about your visit. For example:
<img src="http://www.google-analytics.com/__utm.gif?utmwv=5.4.6&utms=1&utmn=116154048&utmhn=www.example.com&utmcs=UTF-8&utmsr=1920x1080&utmvp=1439x356...">
When Google receives the request for this image, they record the URL variables.
I can create an image with a custom source with all the URL variables I need. That's easy. But I can't think of how to record it on the server? I want it to end up in a database so I can run reports. My server is running IIS7 and ColdFusion 10. Any ideas?
Thanks!
Back in the days before ajax, people used to create a .cfm page that served up a small transparent gif via cfcontent.
<cfcontent type="image/gif" file="c:/path/to/clear.gif">
Since the script actually returns a valid image, it can be used as the src of an <img> tag.
<img src="path/to/yourScript.cfm?param1=xxx¶m2=yyyy" />
When the image is displayed, the URL variables are passed to the .cfm script, and you can easily insert the values into a database. Just be sure you always return an image, even if a database error occurred for some reason.
I am sure there are slicker options, but that is the basic concept of how it could be achieved using only an <img> tag.
In both image and script tags.
My understanding was that you can access both scripts and images on other domains. So when does one use this attribute?
Is this when you want to restrict the ability of others to access your scripts and image?
Images:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-crossorigin
Scripts:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
The answer can be found in the specification.
For img:
The crossorigin attribute is a CORS settings attribute. Its purpose is to allow images from third-party sites that allow cross-origin access to be used with canvas.
and for script:
The crossorigin attribute is a CORS settings attribute. It controls, for scripts that are obtained from other origins, whether error information will be exposed.
This is how we have successfully used crossorigin attribute it in a script tag:
Problem we had: We were trying to log js errors in the server using window.onerror
Almost all of the errors that we were logging had this message : Script error. and we were getting very little information about how to solve these js errors.
It turns out that the native implementation in chrome to report errors
if (securityOrigin()->canRequest(targetUrl)) {
message = errorMessage;
line = lineNumber;
sourceName = sourceURL;
} else {
message = "Script error.";
sourceName = String();
line = 0;
}
will send message as Script error. if the requested static asset violates the browser's same-origin policy.
In our case we were serving the static asset from a cdn.
The way we solved it was adding the crossorigin attribute to the script tag.
P.S. Got all the info from this answer
CORS-enabled images can be reused in the element without being tainted. The allowed values are:
The page already answers your question.
If you have a cross-origin image you can copy it into a canvas but this "taints" the canvas which prevents you from reading it (so you cannot "steal" images e.g. from an intranet where the site itself doesn't have access to). However, by using CORS the server where the image is stored can tell the browser that cross-origin access is permitted and thus you can access the image data through a canvas.
MDN also has a page about just this thing: https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image
Is this when you want to restrict the ability of others to access your scripts and image?
No.
If you're developing a quick piece of code locally, and you're using Chrome, there's a problem. if your page loads using a URL of the form "file://xxxx", then trying to use getImageData() on the canvas will fail, and throw the cross-origin security error, even if your image is being fetched from the same directory on your local machine as the HTML page rendering the canvas. So if your HTML page is fetched from, say:
file://D:/wwwroot/mydir/mytestpage.html
and your Javascript file and images are being fetched from, say:
file://D:/wwwroot/mydir/mycode.js
file://D:/wwwroot/mydir/myImage.png
then despite the fact that these secondary entities are being fetched from the same origin, the security error is still thrown.
For some reason, instead of setting the origin properly, Chrome sets the origin attribute of the requisite entities to "null", rendering it impossible to test code involving getImageData() simply by opening the HTML page in your browser and debugging locally.
Also, setting the crossOrigin property of the image to "anonymous" doesn't work, for the same reason.
I'm still trying to find a workaround for this, but once again, it seems that local debugging is being rendered as painful as possible by browser implementors.
I just tried running my code in Firefox, and Firefox gets it right, by recognising that my image is from the same origin as the HTML and JS scripts. So I'd welcome some hints on how to get round the problem in Chrome, as at the moment, while Firefox works, it's debugger is painfully slow, to the point of being one step removed from a denial of service attack.
I've found out how to persuade Google Chrome to allow file:// references without throwing a cross-origin error.
Step 1: Create a shortcut (Windows) or the equivalent in other operating systems;
Step 2: Set the target to something like the following:
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files
That special command line argument, --allow-file-access-from-files, tells Chrome to let you use file:// references to web pages, images etc., without throwing cross-origin errors every time you try to transfer those images to an HTML canvas, for example. It works on my Windows 7 setup, but it's worth checking to see if it will work on Windows 8/10 and various Linux distros too. If it does, problem solved - offline development resumes as normal.
Now I can reference images and JSON data from file:// URIs, without Chrome throwing cross-origin errors if I attempt to transfer image data to a canvas, or transfer JSON data to a form element.
I have an image :
<img id="img1" src="http://igyaan.in/wp-content/uploads/2013/03/Nvidia-580x362.jpg" />
The image from the url is getting cached, but image is not getting displayed.
I analysed it using firebug, where I could see a GET request to the image, and image is returned. And in addition, there is a request to some facebook pic which I never requested (firebug: Bad request):
http://a1.sphotos.ak.fbcdn.net/hphotos-ak-snc7/424831_319096764809781_1948053300_n.jpg
jsFiddle: http://jsfiddle.net/Qb6YX/5/
Any idea why this is happening? And how do i solve this issue?
MoreInfo : iam working on a Rss feed reader , it displays images of posts . I had trouble with this specific website.
It is likely that the image is hotlink-protected. That's why it gets redirected when you try to load it on your page. In this case you should use a server-side proxy to retrieve the image and load it from there.
Using an external service from Images.weserv.nl:
<img src="http://images.weserv.nl/?url=igyaan.in/wp-content/uploads/2013/03/Nvidia-580x362.jpg" />
See jsFiddle
It would be better if you host the proxy script on your server for this purpose so that you have fewer dependencies for your RSS feed reader.
However, there are times when we should respect the site owner's decision of hotlink protection. One way to go about it is to replace an image that cannot be loaded with a default one.
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.