Using Bookmarklet to save images on current page to Remote Server

Question

I have created a bookmarklet that extracts all images from a page when clicked.

var imgs = $('img');
for(var i=0; i < imgs.length; i++) {
    console.log(imgs[i].src);
}

The next time will be to save these images to the server so that the user can access these images on my website.

After digging through the scripts used by pinterest etc, they seem to use an iframe, but I cant figure out what the iframe is for, as its an empty HTML doc. How can the iframe, or anything else, be used to submit images from the current website to my web site?

Updated code with the loop, im unsure about how the image can be sent (AJAX style with `$.post`?) to the remote server — Nyxynyx, Dec 05 '12 at 05:49
AFAIK, because of cross domain security restrictions AJAX is not allowed. But you can still use query parameters in a URL. — Calvin, Dec 05 '12 at 07:17

score 1 · Accepted Answer · edited May 23 '17 at 11:48

1

This requires cooperation from the other website to insert your <iframe> securely with JavaScript (a lot of websites like Facebook do this). Take a look at this answer: How does the Facebook Like button work?

You can create a cross-domain request using JSONP. I would just post the image sources to your site. Then, your site can download the images (as opposed to downloading the images from the html itself).

edited May 23 '17 at 11:48

Community

1
1

answered Dec 05 '12 at 08:15

Explosion Pills

188,624
52
326
405

If I understand correctly, all I need is JSONP to send the image sources to the remote server. What purpose does the iframe serve in this case? – Nyxynyx Dec 06 '12 at 04:09
@Nyxynyx you probably don't need it; I think just if you wanted to have some sort of icon on the page or what have you – Explosion Pills Dec 06 '12 at 12:15
If sending the image sources back to the server via JSONP requires that the user be logged in, according to the link on the Facebook Like button that you've posted, an iframe will provide access to the cookies to check if the user is logged in? Or am I able to do this logged in status check via the JSONP request? – Nyxynyx Dec 06 '12 at 12:29
@Nyxynyx I'm actually not sure whether cookies are sent over JSONP – Explosion Pills Dec 06 '12 at 12:30
Just tried and seems like it works over JSONP. Wondering if theres any security issues which checking for session cookies over JSONP... – Nyxynyx Dec 06 '12 at 12:51

DG. · Answer 2 · 2012-12-07T15:41:28.570

0

You can't submit the binary image files through a bookmarklet. You can only submit an HTTP GET or POST which contains the URLs of those images to your server and your server fetches the images itself. One way to do a cross-domain post is to submit a form. A blank iframe can be used at the target for a form so what when you submit that form the current page location does not change.

Example:

<iframe style="display:none" name="myHiddenIframe"></iframe>
<form action="http://savepicturesite.abc/transload.php" target="myHiddenIframe" method="post">
  <input type="hidden" name="pic1" value="http://domain.com/pic.jpg">
</form>

edited Dec 07 '12 at 15:41

answered Dec 06 '12 at 17:09

DG.

3,417
2
23
28

This may sound silly, but when the form is submitted, where does the POST data go to after being submitted to the iframe? – Nyxynyx Dec 07 '12 at 03:06
The post data is not submitted *to* the iFrame. It is submitted to the URL specified by the `action`. I forgot to add that. I have updated my code. The `target` gets the response from the server. Since the targeted iframe gets the response, and the location of the iframe is what changes, the location of the parent page does not change. – DG. Dec 07 '12 at 15:40

Using Bookmarklet to save images on current page to Remote Server

2 Answers2