HiveBrain v1.2.0
Get Started
← Back to all entries
debugjavascriptMinor

Fix base64 data URI scripts function

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
fixuriscriptsfunctionbase64data

Problem

So I noticed Chrome has quirky behaviour when it encounters script tags whose src is a base64 value. I decided to write a quick jQuery method that is supposed to work around it:

jQuery.extend({

    /**
     * Takes a script decodes the base64 src, puts it into the body of the script tag,
     * then puts it in whatever parent specified.
     *
     * @requires https://plugins.jquery.com/base64/
     * 
     * @param  {Object} script The script tag that should be manipulated
     * @param  {Object} parent The parent element to append the final script tag to.
     * 
     * @return {Object}        The script tag in question
     */
    importBase64Script : function ( script, parent ) {

        // Check for base64 library
        if ( typeof $.base64 === 'undefined' )
            throw 'No $.base64 found!';

        // Sanitize our script var
        // Normalize our script object
        script = ( script instanceof jQuery ? script : $(script) );

        // Check if it is a script tag
        if ( script[0].tagName !== "SCRIPT" )
            throw "Not a script tag";

        // Set default parent value
        parent = parent || $('head');
        // Normalize our parent var
        parent = ( parent instanceof jQuery ? parent : $(parent) );

        // We're gonna extract the base64 value
        var re        = /data:[a-z]+\/[a-z]+;base64,([0-9a-zA-Z\=\+]+)/,
        base64Content = script.prop('src').match(re)[1],
        scriptContent = $.base64.decode( base64Content );

        // Drop the decoded javascript into the contents of the script tag
        script.html( scriptContent );
        // Clear src value
        script.prop('src','');

        // Append it to the parent
        parent.append(script);

        return script;

    }
});


I tested a few of the conditions on JsPerf to see which is better performance wise. Granted, I didn't do a full sweep on every browser.

Any suggestions that anybody could make?

Solution

Watch out!

jQuery is full of secrets. html method is not just a simple wrapper around innerHTML property.

Possible fail condition:



var src = if ("" !== "") {
console.log("Math gone wrong.");
};

$("").html(src).appendTo(document.head)






Let's see what exactly is happening here:



console.log($("").html("")[0].innerHTML)





jQuery html method replaces ` with . I guess it is perfectly valid for some HTML, but it fails with our JavaScript input.

The π robbery

Let's try to exploit this with malicious input and steal some valuable data:



var src = var username = "Kevin Mitnick";;

$("").html(src).appendTo(document.head);





I suggest you to carefully check jQuery
html source code.

Also you may replace it with plain old
innerHTML`.

Context

StackExchange Code Review Q#44583, answer score: 5

Revisions (0)

No revisions yet.