color-log.js

function logColor(color, args) {
    console.log(`%c ${args.join(' ')}`, `color: ${color}`);
}

const log = {
  aliceblue: (...args) => { logColor('aliceblue', args)},
  antiquewhite: (...args) => { logColor('antiquewhite', args)},
  aqua: (...args) => { logColor('aqua', args)},
  aquamarine: (...args) => { logColor('aquamarine', args)},
  azure: (...args) => { logColor('azure', args)},
  beige: (...args) => { logColor('beige', args)},
  bisque: (...args) => { logColor('bisque', args)},
  black: (...args) => { logColor('black', args)},
  blanchedalmond: (...args) => { logColor('blanchedalmond', args)},
  blue: (...args) => { logColor('blue', args)},
  blueviolet: (...args) => { logColor('blueviolet', args)},
  brown: (...args) => { logColor('brown', args)},
  burlywood: (...args) => { logColor('burlywood', args)},
  cadetblue: (...args) => { logColor('cadetblue', args)},
  chartreuse: (...args) => { logColor('chartreuse', args)},
  chocolate: (...args) => { logColor('chocolate', args)},
  coral: (...args) => { logColor('coral', args)},
  cornflowerblue: (...args) => { logColor('cornflowerblue', args)},
  cornsilk: (...args) => { logColor('cornsilk', args)},
  crimson: (...args) => { logColor('crimson', args)},
  cyan: (...args) => { logColor('cyan', args)},
  darkblue: (...args) => { logColor('darkblue', args)},
  darkcyan: (...args) => { logColor('darkcyan', args)},
  darkgoldenrod: (...args) => { logColor('darkgoldenrod', args)},
  darkgray: (...args) => { logColor('darkgray', args)},
  darkgreen: (...args) => { logColor('darkgreen', args)},
  darkgrey: (...args) => { logColor('darkgrey', args)},
  darkkhaki: (...args) => { logColor('darkkhaki', args)},
  darkmagenta: (...args) => { logColor('darkmagenta', args)},
  darkolivegreen: (...args) => { logColor('darkolivegreen', args)},
  darkorange: (...args) => { logColor('darkorange', args)},
  darkorchid: (...args) => { logColor('darkorchid', args)},
  darkred: (...args) => { logColor('darkred', args)},
  darksalmon: (...args) => { logColor('darksalmon', args)},
  darkseagreen: (...args) => { logColor('darkseagreen', args)},
  darkslateblue: (...args) => { logColor('darkslateblue', args)},
  darkslategray: (...args) => { logColor('darkslategray', args)},
  darkslategrey: (...args) => { logColor('darkslategrey', args)},
  darkturquoise: (...args) => { logColor('darkturquoise', args)},
  darkviolet: (...args) => { logColor('darkviolet', args)},
  deeppink: (...args) => { logColor('deeppink', args)},
  deepskyblue: (...args) => { logColor('deepskyblue', args)},
  dimgray: (...args) => { logColor('dimgray', args)},
  dimgrey: (...args) => { logColor('dimgrey', args)},
  dodgerblue: (...args) => { logColor('dodgerblue', args)},
  firebrick: (...args) => { logColor('firebrick', args)},
  floralwhite: (...args) => { logColor('floralwhite', args)},
  forestgreen: (...args) => { logColor('forestgreen', args)},
  fuchsia: (...args) => { logColor('fuchsia', args)},
  gainsboro: (...args) => { logColor('gainsboro', args)},
  ghostwhite: (...args) => { logColor('ghostwhite', args)},
  gold: (...args) => { logColor('gold', args)},
  goldenrod: (...args) => { logColor('goldenrod', args)},
  gray: (...args) => { logColor('gray', args)},
  green: (...args) => { logColor('green', args)},
  greenyellow: (...args) => { logColor('greenyellow', args)},
  grey: (...args) => { logColor('grey', args)},
  honeydew: (...args) => { logColor('honeydew', args)},
  hotpink: (...args) => { logColor('hotpink', args)},
  indianred: (...args) => { logColor('indianred', args)},
  indigo: (...args) => { logColor('indigo', args)},
  ivory: (...args) => { logColor('ivory', args)},
  khaki: (...args) => { logColor('khaki', args)},
  lavender: (...args) => { logColor('lavender', args)},
  lavenderblush: (...args) => { logColor('lavenderblush', args)},
  lawngreen: (...args) => { logColor('lawngreen', args)},
  lemonchiffon: (...args) => { logColor('lemonchiffon', args)},
  lightblue: (...args) => { logColor('lightblue', args)},
  lightcoral: (...args) => { logColor('lightcoral', args)},
  lightcyan: (...args) => { logColor('lightcyan', args)},
  lightgoldenrodyellow: (...args) => { logColor('lightgoldenrodyellow', args)},
  lightgray: (...args) => { logColor('lightgray', args)},
  lightgreen: (...args) => { logColor('lightgreen', args)},
  lightgrey: (...args) => { logColor('lightgrey', args)},
  lightpink: (...args) => { logColor('lightpink', args)},
  lightsalmon: (...args) => { logColor('lightsalmon', args)},
  lightseagreen: (...args) => { logColor('lightseagreen', args)},
  lightskyblue: (...args) => { logColor('lightskyblue', args)},
  lightslategray: (...args) => { logColor('lightslategray', args)},
  lightslategrey: (...args) => { logColor('lightslategrey', args)},
  lightsteelblue: (...args) => { logColor('lightsteelblue', args)},
  lightyellow: (...args) => { logColor('lightyellow', args)},
  lime: (...args) => { logColor('lime', args)},
  limegreen: (...args) => { logColor('limegreen', args)},
  linen: (...args) => { logColor('linen', args)},
  magenta: (...args) => { logColor('magenta', args)},
  maroon: (...args) => { logColor('maroon', args)},
  mediumaquamarine: (...args) => { logColor('mediumaquamarine', args)},
  mediumblue: (...args) => { logColor('mediumblue', args)},
  mediumorchid: (...args) => { logColor('mediumorchid', args)},
  mediumpurple: (...args) => { logColor('mediumpurple', args)},
  mediumseagreen: (...args) => { logColor('mediumseagreen', args)},
  mediumslateblue: (...args) => { logColor('mediumslateblue', args)},
  mediumspringgreen: (...args) => { logColor('mediumspringgreen', args)},
  mediumturquoise: (...args) => { logColor('mediumturquoise', args)},
  mediumvioletred: (...args) => { logColor('mediumvioletred', args)},
  midnightblue: (...args) => { logColor('midnightblue', args)},
  mintcream: (...args) => { logColor('mintcream', args)},
  mistyrose: (...args) => { logColor('mistyrose', args)},
  moccasin: (...args) => { logColor('moccasin', args)},
  navajowhite: (...args) => { logColor('navajowhite', args)},
  navy: (...args) => { logColor('navy', args)},
  oldlace: (...args) => { logColor('oldlace', args)},
  olive: (...args) => { logColor('olive', args)},
  olivedrab: (...args) => { logColor('olivedrab', args)},
  orange: (...args) => { logColor('orange', args)},
  orangered: (...args) => { logColor('orangered', args)},
  orchid: (...args) => { logColor('orchid', args)},
  palegoldenrod: (...args) => { logColor('palegoldenrod', args)},
  palegreen: (...args) => { logColor('palegreen', args)},
  paleturquoise: (...args) => { logColor('paleturquoise', args)},
  palevioletred: (...args) => { logColor('palevioletred', args)},
  papayawhip: (...args) => { logColor('papayawhip', args)},
  peachpuff: (...args) => { logColor('peachpuff', args)},
  peru: (...args) => { logColor('peru', args)},
  pink: (...args) => { logColor('pink', args)},
  plum: (...args) => { logColor('plum', args)},
  powderblue: (...args) => { logColor('powderblue', args)},
  purple: (...args) => { logColor('purple', args)},
  red: (...args) => { logColor('red', args)},
  rosybrown: (...args) => { logColor('rosybrown', args)},
  royalblue: (...args) => { logColor('royalblue', args)},
  saddlebrown: (...args) => { logColor('saddlebrown', args)},
  salmon: (...args) => { logColor('salmon', args)},
  sandybrown: (...args) => { logColor('sandybrown', args)},
  seagreen: (...args) => { logColor('seagreen', args)},
  seashell: (...args) => { logColor('seashell', args)},
  sienna: (...args) => { logColor('sienna', args)},
  silver: (...args) => { logColor('silver', args)},
  skyblue: (...args) => { logColor('skyblue', args)},
  slateblue: (...args) => { logColor('slateblue', args)},
  slategray: (...args) => { logColor('slategray', args)},
  slategrey: (...args) => { logColor('slategrey', args)},
  snow: (...args) => { logColor('snow', args)},
  springgreen: (...args) => { logColor('springgreen', args)},
  steelblue: (...args) => { logColor('steelblue', args)},
  tan: (...args) => { logColor('tan', args)},
  teal: (...args) => { logColor('teal', args)},
  thistle: (...args) => { logColor('thistle', args)},
  tomato: (...args) => { logColor('tomato', args)},
  turquoise: (...args) => { logColor('turquoise', args)},
  violet: (...args) => { logColor('violet', args)},
  wheat: (...args) => { logColor('wheat', args)},
  white: (...args) => { logColor('white', args)},
  whitesmoke: (...args) => { logColor('whitesmoke', args)},
  yellow: (...args) => { logColor('yellow', args)},
  yellowgreen: (...args) => { logColor('yellowgreen', args)},
};

// example
log.tomato('I am tomato');
log.chocolate('I am chocolate');
log.cornflowerblue('I am cornflowerblue');
log.darkcyan('I am darkcyan');
log.goldenrod('I am goldenrod');

Pwned by Ukari.

In OP's version log.noExistColor('I am not exist color'); throws an exception while Ukari's version acts like nothing bad happened. Depends on your preference in this case but I would rather know something went wrong.

just linking back 👋
https://hackernoon.com/im-harvesting-credit-card-numbers-and-passwords-from-your-site-here-s-how-9a8cb347c5b5

It's nice to see the power of metaprogramming in the wild 👍

@josejbreijo Correct me if I'm wrong, but this is actually not metaprogramming (too bad, I hoped it was haha). The malicious JS script mentioned in the article (which I believe is what you're referring to) is hidden in a file under lib/ directory, which was not included on GitHub, but could (hypothetically) be published to an npm package - hence, the sources didn't match, and you simply wouldn't find the malicious code here. The source above is... literally what it is :).

@ukari May I know why you are using proxy here ?

@arun-cm Fewer LoC :)

That being said, you lose potential autocomplete when using the lib in the console thus reducing the developer experience :(
Also, no error handling on this Proxy on missing method calls (easily fixable)

@brandonmcconnell - sure, why not:

function logColor(color, args) {
    console.log(`%c${args.join(' ')}`, `color: ${color}`);
}

const log = console.log;

log.aliceblue = (...args) => { logColor('aliceblue', args)};
log.antiquewhite = (...args) => { logColor('antiquewhite', args)};
log.aqua = (...args) => { logColor('aqua', args)};
log.aquamarine = (...args) => { logColor('aquamarine', args)};
log.azure = (...args) => { logColor('azure', args)};
log.beige = (...args) => { logColor('beige', args)};
log.bisque = (...args) => { logColor('bisque', args)};
log.black = (...args) => { logColor('black', args)};
log.blanchedalmond = (...args) => { logColor('blanchedalmond', args)};
log.blue = (...args) => { logColor('blue', args)};
log.blueviolet = (...args) => { logColor('blueviolet', args)};
log.brown = (...args) => { logColor('brown', args)};
log.burlywood = (...args) => { logColor('burlywood', args)};
log.cadetblue = (...args) => { logColor('cadetblue', args)};
log.chartreuse = (...args) => { logColor('chartreuse', args)};
log.chocolate = (...args) => { logColor('chocolate', args)};
log.coral = (...args) => { logColor('coral', args)};
log.cornflowerblue = (...args) => { logColor('cornflowerblue', args)};
log.cornsilk = (...args) => { logColor('cornsilk', args)};
log.crimson = (...args) => { logColor('crimson', args)};
log.cyan = (...args) => { logColor('cyan', args)};
log.darkblue = (...args) => { logColor('darkblue', args)};
log.darkcyan = (...args) => { logColor('darkcyan', args)};
log.darkgoldenrod = (...args) => { logColor('darkgoldenrod', args)};
log.darkgray = (...args) => { logColor('darkgray', args)};
log.darkgreen = (...args) => { logColor('darkgreen', args)};
log.darkgrey = (...args) => { logColor('darkgrey', args)};
log.darkkhaki = (...args) => { logColor('darkkhaki', args)};
log.darkmagenta = (...args) => { logColor('darkmagenta', args)};
log.darkolivegreen = (...args) => { logColor('darkolivegreen', args)};
log.darkorange = (...args) => { logColor('darkorange', args)};
log.darkorchid = (...args) => { logColor('darkorchid', args)};
log.darkred = (...args) => { logColor('darkred', args)};
log.darksalmon = (...args) => { logColor('darksalmon', args)};
log.darkseagreen = (...args) => { logColor('darkseagreen', args)};
log.darkslateblue = (...args) => { logColor('darkslateblue', args)};
log.darkslategray = (...args) => { logColor('darkslategray', args)};
log.darkslategrey = (...args) => { logColor('darkslategrey', args)};
log.darkturquoise = (...args) => { logColor('darkturquoise', args)};
log.darkviolet = (...args) => { logColor('darkviolet', args)};
log.deeppink = (...args) => { logColor('deeppink', args)};
log.deepskyblue = (...args) => { logColor('deepskyblue', args)};
log.dimgray = (...args) => { logColor('dimgray', args)};
log.dimgrey = (...args) => { logColor('dimgrey', args)};
log.dodgerblue = (...args) => { logColor('dodgerblue', args)};
log.firebrick = (...args) => { logColor('firebrick', args)};
log.floralwhite = (...args) => { logColor('floralwhite', args)};
log.forestgreen = (...args) => { logColor('forestgreen', args)};
log.fuchsia = (...args) => { logColor('fuchsia', args)};
log.gainsboro = (...args) => { logColor('gainsboro', args)};
log.ghostwhite = (...args) => { logColor('ghostwhite', args)};
log.gold = (...args) => { logColor('gold', args)};
log.goldenrod = (...args) => { logColor('goldenrod', args)};
log.gray = (...args) => { logColor('gray', args)};
log.green = (...args) => { logColor('green', args)};
log.greenyellow = (...args) => { logColor('greenyellow', args)};
log.grey = (...args) => { logColor('grey', args)};
log.honeydew = (...args) => { logColor('honeydew', args)};
log.hotpink = (...args) => { logColor('hotpink', args)};
log.indianred = (...args) => { logColor('indianred', args)};
log.indigo = (...args) => { logColor('indigo', args)};
log.ivory = (...args) => { logColor('ivory', args)};
log.khaki = (...args) => { logColor('khaki', args)};
log.lavender = (...args) => { logColor('lavender', args)};
log.lavenderblush = (...args) => { logColor('lavenderblush', args)};
log.lawngreen = (...args) => { logColor('lawngreen', args)};
log.lemonchiffon = (...args) => { logColor('lemonchiffon', args)};
log.lightblue = (...args) => { logColor('lightblue', args)};
log.lightcoral = (...args) => { logColor('lightcoral', args)};
log.lightcyan = (...args) => { logColor('lightcyan', args)};
log.lightgoldenrodyellow = (...args) => { logColor('lightgoldenrodyellow', args)};
log.lightgray = (...args) => { logColor('lightgray', args)};
log.lightgreen = (...args) => { logColor('lightgreen', args)};
log.lightgrey = (...args) => { logColor('lightgrey', args)};
log.lightpink = (...args) => { logColor('lightpink', args)};
log.lightsalmon = (...args) => { logColor('lightsalmon', args)};
log.lightseagreen = (...args) => { logColor('lightseagreen', args)};
log.lightskyblue = (...args) => { logColor('lightskyblue', args)};
log.lightslategray = (...args) => { logColor('lightslategray', args)};
log.lightslategrey = (...args) => { logColor('lightslategrey', args)};
log.lightsteelblue = (...args) => { logColor('lightsteelblue', args)};
log.lightyellow = (...args) => { logColor('lightyellow', args)};
log.lime = (...args) => { logColor('lime', args)};
log.limegreen = (...args) => { logColor('limegreen', args)};
log.linen = (...args) => { logColor('linen', args)};
log.magenta = (...args) => { logColor('magenta', args)};
log.maroon = (...args) => { logColor('maroon', args)};
log.mediumaquamarine = (...args) => { logColor('mediumaquamarine', args)};
log.mediumblue = (...args) => { logColor('mediumblue', args)};
log.mediumorchid = (...args) => { logColor('mediumorchid', args)};
log.mediumpurple = (...args) => { logColor('mediumpurple', args)};
log.mediumseagreen = (...args) => { logColor('mediumseagreen', args)};
log.mediumslateblue = (...args) => { logColor('mediumslateblue', args)};
log.mediumspringgreen = (...args) => { logColor('mediumspringgreen', args)};
log.mediumturquoise = (...args) => { logColor('mediumturquoise', args)};
log.mediumvioletred = (...args) => { logColor('mediumvioletred', args)};
log.midnightblue = (...args) => { logColor('midnightblue', args)};
log.mintcream = (...args) => { logColor('mintcream', args)};
log.mistyrose = (...args) => { logColor('mistyrose', args)};
log.moccasin = (...args) => { logColor('moccasin', args)};
log.navajowhite = (...args) => { logColor('navajowhite', args)};
log.navy = (...args) => { logColor('navy', args)};
log.oldlace = (...args) => { logColor('oldlace', args)};
log.olive = (...args) => { logColor('olive', args)};
log.olivedrab = (...args) => { logColor('olivedrab', args)};
log.orange = (...args) => { logColor('orange', args)};
log.orangered = (...args) => { logColor('orangered', args)};
log.orchid = (...args) => { logColor('orchid', args)};
log.palegoldenrod = (...args) => { logColor('palegoldenrod', args)};
log.palegreen = (...args) => { logColor('palegreen', args)};
log.paleturquoise = (...args) => { logColor('paleturquoise', args)};
log.palevioletred = (...args) => { logColor('palevioletred', args)};
log.papayawhip = (...args) => { logColor('papayawhip', args)};
log.peachpuff = (...args) => { logColor('peachpuff', args)};
log.peru = (...args) => { logColor('peru', args)};
log.pink = (...args) => { logColor('pink', args)};
log.plum = (...args) => { logColor('plum', args)};
log.powderblue = (...args) => { logColor('powderblue', args)};
log.purple = (...args) => { logColor('purple', args)};
log.red = (...args) => { logColor('red', args)};
log.rosybrown = (...args) => { logColor('rosybrown', args)};
log.royalblue = (...args) => { logColor('royalblue', args)};
log.saddlebrown = (...args) => { logColor('saddlebrown', args)};
log.salmon = (...args) => { logColor('salmon', args)};
log.sandybrown = (...args) => { logColor('sandybrown', args)};
log.seagreen = (...args) => { logColor('seagreen', args)};
log.seashell = (...args) => { logColor('seashell', args)};
log.sienna = (...args) => { logColor('sienna', args)};
log.silver = (...args) => { logColor('silver', args)};
log.skyblue = (...args) => { logColor('skyblue', args)};
log.slateblue = (...args) => { logColor('slateblue', args)};
log.slategray = (...args) => { logColor('slategray', args)};
log.slategrey = (...args) => { logColor('slategrey', args)};
log.snow = (...args) => { logColor('snow', args)};
log.springgreen = (...args) => { logColor('springgreen', args)};
log.steelblue = (...args) => { logColor('steelblue', args)};
log.tan = (...args) => { logColor('tan', args)};
log.teal = (...args) => { logColor('teal', args)};
log.thistle = (...args) => { logColor('thistle', args)};
log.tomato = (...args) => { logColor('tomato', args)};
log.turquoise = (...args) => { logColor('turquoise', args)};
log.violet = (...args) => { logColor('violet', args)};
log.wheat = (...args) => { logColor('wheat', args)};
log.white = (...args) => { logColor('white', args)};
log.whitesmoke = (...args) => { logColor('whitesmoke', args)};
log.yellow = (...args) => { logColor('yellow', args)};
log.yellowgreen = (...args) => { logColor('yellowgreen', args)};

// example
log.tomato('I am tomato');
log.chocolate('I am chocolate');
log.cornflowerblue('I am cornflowerblue');
log.darkcyan('I am darkcyan');
log.goldenrod('I am goldenrod');
log('I am without color');

we can still cut down on code here while still taking the strict whitelist approach

const logColor = (color, args) => (
  console.log(`%c ${args.join(' ')}`, `color: ${color}`)
)

const colors = [
  'aliceblue',
  'antiquewhite',
  'aqua',
  'aquamarine',
  'azure',
  'beige',
  'bisque',
  'black',
  'blanchedalmond',
  'blue',
  'blueviolet',
  'brown',
  'burlywood',
  'cadetblue',
  'chartreuse',
  'chocolate',
  'coral',
  'cornflowerblue',
  'cornsilk',
  'crimson',
  'cyan',
  'darkblue',
  'darkcyan',
  'darkgoldenrod',
  'darkgray',
  'darkgreen',
  'darkgrey',
  'darkkhaki',
  'darkmagenta',
  'darkolivegreen',
  'darkorange',
  'darkorchid',
  'darkred',
  'darksalmon',
  'darkseagreen',
  'darkslateblue',
  'darkslategray',
  'darkslategrey',
  'darkturquoise',
  'darkviolet',
  'deeppink',
  'deepskyblue',
  'dimgray',
  'dimgrey',
  'dodgerblue',
  'firebrick',
  'floralwhite',
  'forestgreen',
  'fuchsia',
  'gainsboro',
  'ghostwhite',
  'gold',
  'goldenrod',
  'gray',
  'green',
  'greenyellow',
  'grey',
  'honeydew',
  'hotpink',
  'indianred',
  'indigo',
  'ivory',
  'khaki',
  'lavender',
  'lavenderblush',
  'lawngreen',
  'lemonchiffon',
  'lightblue',
  'lightcoral',
  'lightcyan',
  'lightgoldenrodyellow',
  'lightgray',
  'lightgreen',
  'lightgrey',
  'lightpink',
  'lightsalmon',
  'lightseagreen',
  'lightskyblue',
  'lightslategray',
  'lightslategrey',
  'lightsteelblue',
  'lightyellow',
  'lime',
  'limegreen',
  'linen',
  'magenta',
  'maroon',
  'mediumaquamarine',
  'mediumblue',
  'mediumorchid',
  'mediumpurple',
  'mediumseagreen',
  'mediumslateblue',
  'mediumspringgreen',
  'mediumturquoise',
  'mediumvioletred',
  'midnightblue',
  'mintcream',
  'mistyrose',
  'moccasin',
  'navajowhite',
  'navy',
  'oldlace',
  'olive',
  'olivedrab',
  'orange',
  'orangered',
  'orchid',
  'palegoldenrod',
  'palegreen',
  'paleturquoise',
  'palevioletred',
  'papayawhip',
  'peachpuff',
  'peru',
  'pink',
  'plum',
  'powderblue',
  'purple',
  'red',
  'rosybrown',
  'royalblue',
  'saddlebrown',
  'salmon',
  'sandybrown',
  'seagreen',
  'seashell',
  'sienna',
  'silver',
  'skyblue',
  'slateblue',
  'slategray',
  'slategrey',
  'snow',
  'springgreen',
  'steelblue',
  'tan',
  'teal',
  'thistle',
  'tomato',
  'turquoise',
  'violet',
  'wheat',
  'white',
  'whitesmoke',
  'yellow',
  'yellowgreen',
]

const log = {}
colors.forEach(color => log[color] = (...args) => logColor(color, args))

// example
log.tomato('I am tomato');
log.chocolate('I am chocolate');
log.cornflowerblue('I am cornflowerblue');
log.darkcyan('I am darkcyan');
log.goldenrod('I am goldenrod');

log.rebeccapurple = (...args) => { logColor('rebeccapurple', args)};

log.chucknorris = (...args) => { logColor('chucknorris', args) };

EDIT: aww, doesn't work :(

Can anybody explain this code to me? Everything is so innocently looking for somebody who doesn't understand much js, that I'm confused.

@sukiletxe: There is nothing malicious going on in this part of the code. This is simply the alibi for including it in other packages: easy log colors, hooray! @josejbreijo described above where the funny business is hidden:

@josejbreijo […] The malicious JS script mentioned in the article (which I believe is what you're referring to) is hidden in a file under lib/ directory, which was not included on GitHub, but could (hypothetically) be published to an npm package - hence, the sources didn't match, and you simply wouldn't find the malicious code here. The source above is... literally what it is :).