Send message through image with Javascript

Question

I have two domains, one which contains an image and another which is trying to access this picture. The following works for loading the image:

image = new Image(); 
image.src = "someotherdomain.com/picture.png";

However, I would like to send back some information as well. I cannot use AJAX due to Same-Origin-Policy. This is what I am trying to do:

image = new Image(); 
image.src = "someotherdomain.com/picture.png";

console.log(image.message); // How can I receive the message from the other server to here?

I cannot enable CORS or any of that.

What kind of message? Is it tied to the specific image you're loading? — nrabinowitz, Jan 17 '14 at 00:14
Is the image even relevant to the question, then, or is the question just "How can I load a cross-domain message?" — nrabinowitz, Jan 17 '14 at 00:16
I want to load a cross-domain message via an image, that is the question. — High schooler, Jan 17 '14 at 00:17

epascarello · Accepted Answer · 2014-01-17T00:26:01.467

If you want to send a GET request to the server, you can just set the path to the file

image.src = "http://example.com/some.php?message=" + encodeUriComponent("your string here");

Now the server can return a one pixel gif and it will work.

BUT modern day browsers support Ajax calls with CORS, so if the server sets the right headers to allow your domain, you can use the XMLHttpRequest object.

If you want to send data back, you will need to make a JSONP request.

function myCallback(obj) {
    console.log(obj);
}

var scr = document.createElement("script");
scr.src = "http://example.com/some.php?callback=myCallback&message=" + encodeUriComponent("your string here");
document.body.appendChild(scr);

and the server returns a script that looks like

myCallback({"hello" : "world"});

Sorry I ment the other way around. How can the server send the message and the client read it. — High schooler, Jan 17 '14 at 00:20

score 0 · Answer 2 · answered Jan 17 '14 at 00:28

If you are generating image on the server side or if you are able to modify it, it might be possible to add the message to the image exif data and than to parse and read it on the client side with JS with something like this: https://github.com/jseidelin/exif-js. (Of course that's probably not the smartest and the easiest way to send a message).

score 0 · Answer 3 · edited May 23 '17 at 12:11

0

However, I would like to send back some information as well. I cannot use AJAX due to Same-Origin-Policy.

It is not allowed to read any data from a cross-origin-included image due to the exactly same Same-Origin-Policy that does forbid to read it via Ajax. You can only read image data by enabling CORS for the image file.

See also Ways to circumvent the same-origin policy.

edited May 23 '17 at 12:11

Community

1
1

answered Jan 17 '14 at 00:29

Bergi

630,263
148
957
1,375

Not necessarily, there are ways to send data with images but are inefficent. – High schooler Jan 17 '14 at 00:37

Send message through image with Javascript

3 Answers3