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
I have some HTML file with an <img src="..."></> tag inside. I can open the HTML and see the image just fine. But when I sent this HTML file to someone (by email, Skype, or whatever), even to me, the image is no longer there. The error I get when I open the HTML that I sent to myself is:
Failed to load resource: net::ERR_FILE_NOT_FOUND
What may be causing the problem? I thought of uploading the image somewhere on the Internet, so there will be no problem with finding it when I point to it with a url.
if the source of the image is on your computer and not using a url, then you will either need to upload the image source onto the web or email the image source to the recipient.
you also need to make sure to have the image source located in the correct location/directory
I am displaying around 20 thumbnail images at a time from google drive using the following link syntax, the thumbnail links are stored in a database and are grabbed using ajax POST request. I am testing this on localhost and every time i clear the cache and reload i get a 403 no response from server error on at least a few images. The images are public and are made accessable to anyone and visiting the link manually opens the image every time.
Heres the link i use:
"https://lh3.googleusercontent.com/d/" + imgid + "=s500?authuser=0"
Why are you using this link to get the files?
Try to get one of the links in the File resource:
webContentLink Link for downloading the content of the file in a browser. This is only available for files with binary content in Google Drive.
webViewLink Link for opening the file in a relevant Google editor or viewer in a browser.
iconLink Static, unauthenticated link to the file's icon.
thumbnailLink A short-lived link to the file's thumbnail, if available. Typically lasts on the order of hours. Only populated when the requesting app can access the file's content.
Choose one of the attributes that best fit your needs after that. Make the necessary request
GET https://www.googleapis.com/drive/v3/files/<yout-file-id>?fields=webContentLink&key=[YOUR_API_KEY] HTTP/1.1
Authorization: Bearer [YOUR_ACCESS_TOKEN]
Accept: application/json
After that you can use your retrieved link to show the image.
There is on person having your problem if you want to look over the final result of the 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.