Is this use of Javascript eval() 100% safe?

Question

I'm writing a PHP library which generates Javascript code.

The Javascript code has a number of components named component001, component002, etc.

Pages are loaded dynamically via AJAX.

I need to pass the name of the component via URL variable which is then evaled() by the script.

The only way I am protecting what is being evaled is with the regular expression ^component[0-9]{3}$: if it passes it gets evaled, otherwise it does not.

To me this is 100% safe since nothing will get executed unless it is simply the name of one of my known components, or is there something about the eval() command that could be exploited in this code sample, e.g. regex injection, some kind of cross site scripting etc.?

window.onload = function() {

    // *** DEFINED IN ANOTHER JAVASCRIPT FILE:
    var component001 = 'testing111';
    var component002 = 'testing222';
    var component003 = 'testing333';

    var APP = {};

    APP.getUrlVars = function() {
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for(var i = 0; i < hashes.length; i++) {
            hash = hashes[i].split('=');
            vars.push(hash[0]);
            vars[hash[0]] = hash[1];
        }
        return vars;
    }

    APP.getUrlVar = function(name, defaultValue) {
        defaultValue = (typeof defaultValue == 'undefined') ? '' : defaultValue;
        var vars = APP.getUrlVars();
        if(vars[name] === undefined)
        {
            return defaultValue;
        } else {
            return vars[name];
        }
    }

    APP.safeEval = function(nameOfComponent) {
        var REGEX_VALID_NAME = /^component[0-9]{3}$/;
        if(REGEX_VALID_NAME.test(nameOfComponent)) {
            return eval(nameOfComponent);
        } else {
            return 'ERROR';
        }

    }

    // *** JAVASCRIPT FILE LOADED VIA AJAX:

    var nameOfComponentToDisplay = APP.getUrlVar('compname', 'component001');
    var component = APP.safeEval(nameOfComponentToDisplay);
    document.write(component);

}

Answer 1

There is almost zero reasons to use eval and I think that this is not one of them. Remember that all objects act like dictionaries so you can simply do something like this:

var components = {
    component001 : 'testing111',
    component002 : 'testing222',
    component003 : 'testing333'
};

APP.safeEval = function(nameOfComponent) {
    var result = components[nameOfComponent];
    if(result) {
        return result;
    } else {
        return 'ERROR';
    }
}

Answer 2

Well, if all there is is a name, then

  eval(component101)

won't do anything anyway, so it seems safe. Maybe you meant

  return eval(nameOfComponent + '()');

If so, then I don't see why you don't just put your components in a namespace object. Then you wouldn't need eval at all:

  return components[nameOfComponent]();

If they're not functions, then the same thing applies, but you'd leave off the "()".

Answer 3

If the variables are defined in another javascript file and contain only numbers and letters, then they are part of the global namespace. As such, they can be accessed as properties of the window object (no need for eval!):

if (typeof window[nameOfComponent] !== 'undefined')
    return window[nameOfComponent]
return 'ERROR';