Starting from Chrome 51, a new attribute SameSite has been introduced for browser cookie. This attribute is to prevent CSRF attack.Cookie is normally used to store data exchanged between client and server. It frequently stores user login information. If a malicious website can forge a HTTP request with the valid third party website cookie, it may be called a CSRF attack.For example, if a user logins to a bank website your-bank.com, the bank server responds a cookie:Set-Cookie:id=a3fWa;Later the user somehow visits malicious.com and there is a form on the website.<form action="your-bank...

When debugging JavaScript application, one may frequently use console.log to print data so that it is easy to debug when issue occurs and also helps on understand the data flow. The common way of printing a variable would be something like. let user = { name: "test"};console.log(user);In this case it will print:{ name: 'test' }This is OK when there is no much logging or the program is not complicated. But it becomes difficult to debug if there are lots of variables to be printed as there is no clear indication on which variable or object it is.So in this case one may add some extra log...

As a front end developer, there is frequent need to debug JS code and sometimes need to find out what event handler has been bound to a HTML element. In this post, we will show how to find out the click event handler bound to a HTML element, this same applies to other events as well.Nowadays, a web application is usually very complicated and there are lots of JS codes which makes it difficult to find out what click event handler has been bound to a HTML element, especially when the JS source code has been obfuscated or compressed.By using Chrome, it becomes relative easy to find out this kind ...

With the evolvement of JavaScript, lots of new features have been added this old but robust language.  Among them are lots of functional programming language related functions like map, filter, each etc. In this post, we will cover one function map and its interesting behavior.Before dive into the details, let first take an example, do you know the output of below function call?['1', '7', '11'].map(parseInt)You may think that it's easy and the output would be[1, 7, 11]Can you try to run this by yourself and you may be surprised of the output. The actual result is[1, NaN, 3]What's happenin...

In some cases, there might be some JavaScript code needs to be ran in a GoLang project. Fortunately, there are a few libraries which support running JavaScript in GoLang. The most famous one would be v8. This is a Go API for the famous v8 JavaScript engine originally developed for the Chrominum project and the foundation of NodeJS.In this post, we will show some simple steps to get v8 working in a GoLang program on MacOS. First you need to install the package so that you can import it. Run belowgo get github.com/augustoroman/v8Unluckily you would encounter an error where some header file ...

This post will cover the JavaScript questions I have encountered and have seen during my programming career. They will mainly focus on vanilla JavaScript though there are lots of excellent frameworks out there and many people are using them in their daily work.this keywordthis keyword is an very important but easy to confuse concept in JavaScript since it is always referring to the calling object of the function.1. What will be the output of below code snippet?function User(name) { this.name = name; this.display = function(){ console.log(this.name); }}var user = new User("javas...

In JavaScript, there are two types of values: primitive and object. Primitives consist undefined, null, boolean, number and string. Other values such as array and function are objects. When applying + operation on different type of values, there would be three kinds of type conversion.Primitive conversionNumber conversionString conversionThere three type conversions have corresponding abstract operations in JavaScript: ToPrimitive(), ToNumber(), ToString().For number addition, it's normal math addition(ToNumber). For strings, they are just string concatenations(ToString). For ob...

To ensure security and reduce spamming, modern browsers have implemented very strict rules on when a new window can be opened in a web page. Currently browsers restrict that any new web page to be opened in a new window must be initiated with an user action. The action is usually an user click event. Otherwise, a popup blocker would show on the browser address bar which indicates that something is blocked.To workaround this issue, normally you should implement the window open logic in a click event handler. An example code block would look like:jQuery("#some_element").click(function(){ var win...