Do you all remember when Candy Crush was popular on Facebook and most of the players always tried to copy/paste scripts into the
console in order to get in-game credits?
Sounds funny but it is not. This was an exploit(for what I know) created to steal peoples password and break into their accounts. This actually took about 4-6 months before Facebook finally decided to do something.
I don’t recall what exactly was made in order to counter attack these malicious scripts but something I do remember to this day is that people were made to be more aware about what an script is and can do.
One solution that I find to be great is the message thrown by Facebook when accessing to the console, it simply states:
This is a browser feature intended for developers. If someone told you to copy-paste something here to enable a Facebook feature or “hack” someone’s account, it is a scam and will give them access to your Facebook account.
See https://www.facebook.com/selfxss for more information.– Facebook
In order to access to this message, the user has to press the
F12 key and then access to the
console tab; once in there you can easily see the message.
What is it that I find so cool about this console.log()?
Well, that’s the format in which the message is displayed. When looking at a website, article, etc; people tend to read the big letters first, speciallly when they are written in – bright colors – or when they come highligthed. In Facebook’s case, they have used the red color and it damn works!; the first time that I saw it, it scared the hell out of me thinking that I did something which I should not have done.
How can I do it?
CSS baby!!!. We all know that
console.log can take as many parameters as we want. We can add one single string parameter; two string parameters; multiple data types parameters; operators; etc. Many more that I will not write about because is just too much to explain.
You and I know very well what we need to do in order to accomplish this, right? First thing first, let’s create our log with an empty string:
This is the very first step when dealing with the browsers consoles. However, we need to throw a message to the user, let’s make it happen:
console.log("Put whatever the fuck you want in this string");
Now, that’s something that can be read by every user but there’s an issue with it and becomes an easy-to-spot problem because it might get lost with any other message the developer has forgotten to hid(as a developer, you never want to display messages coming from a
console.log(); it should only be used in a development environment).
To further extend the readibility, we will have to use some CSS in our string. We need to create some properties and will pass them as a second parameter to our
console.log();. Take a look in the code below:
var cssOptions = "color: rgb(249, 162, 34);" + "font-size: 60px;" + "font-weight: bold;" + "text-shadow: 1px 1px 5px rgb(249, 162, 34);" + "filter: dropshadow(color=rgb(249, 162, 34), offx=1, offy=1);";
That’s how you declare a variable, a value thats gets stored in memory until used. If you don’t know what those values mean, don’t worry, you’re going to be able to play with them in the end of this post.
Our CSS has been made and is great but we are forgetting something important, we need to pass it to our
var cssOptions = "color: rgb(249, 162, 34);" + "font-size: 60px;" + "font-weight: bold;" + "text-shadow: 1px 1px 5px rgb(249, 162, 34);" + "filter: dropshadow(color=rgb(249, 162, 34), offx=1, offy=1);"; console.log(
"Puto el que lo lea", cssOptions);
Did you see how did I pass it? That’s how parameters works and they are usually separated by commas. Let’s move on.
The code seems perfect, some of you might say that we’re done with it but let me tell you something, you’re WRONG!.
console.log(); needs a style format variable, that is
c%. Replace the previous
console.log(); with the following:
"%cPuto el que lo lea", cssOptions);
Play with it but remember,
That is it. Bye-Bye 🙂 .