Security of cross-origin XMLHttpRequest Javascript

Question

I am building a Chrome extension that will be making cross origin "get" and "post" requests to a few third party websites. I have been researching this process for hours and I am becoming increasingly concerned with security.

I need to get the "add to bag" URL info and post user information to that page to fill out the required fields. My Chrome extension has a background JavaScript page, a popup JavaScript page, a HTML page with user info, and a popup HTML page. The HTTP request will occur on the background JavaScript page and send a cross origin request to the website that user is currently visiting.

I am worried about the security when posting user data and the possibility of retrieving malicious info when I use the get request, to get data from the page, possibly an image, and the add to bag URL. I have read about escaping; but I am not really sure how this process works. Do I simply use encodeuricomponent()?

function httpGetAsync(theUrl, callback){
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function() { 
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
            var resp = encodeURIComponent(xmlHttp.responseText)
            callback(resp);         
    }
    xmlHttp.open("GET", theUrl, true);
};

I found this website covering how to prevent XSS attacks: XSS (Cross Site Scripting) Prevention Cheat Sheet

Should I use JsonP coupled with an escaping function such as, this function nestled under the if statement?

function (xmlHttp) {
    // function to escape data? not sure how to do this
    var resp = encodeURIComponent(xmlHttp.responseText)
    callback(resp);
}

The developers Chrome website states that:

document.getElementById("resp").innerText = xhr.responseText;
or: resp = JSON.parse(xhr.responseText);

are safe practices and to simply avoid using .innerhtml.

Any advice or suggested reading material for further research will help me out immensely.

Answer 1

Don't use encodeuricomponent - this is for percent encoding values for insertion into URIs (as suggested by its name).

Data itself cannot be malicious. It can only be "malicious" in the context where it is used. If all you are doing is displaying it on the page, go with the recommendation of setting text rather than HTML, as any characters with special meaning will be properly encoded using this property.

Use textContent rather than innerText as the latter is specific to Internet Explorer, with a few other browsers tagging along rather than a web standard.

JSONP is less secure than CORS, as you have to trust that the external domain is not injecting malicious script into your site (whether the external domain is malicious or has been itself compromised).