The tokens that wouldn’t die

Here’s a funny post from The Daily WTF that shows some production code that allowed an API to issue tokens that were valid for nearly 50 years!

https://thedailywtf.com/articles/the-tokens-that-wouldn-t-die

I found this especially relevant to me as I’ve been working with API authentication recently and it reminds me to take extra care when dealing with theses security concerns, especially as someone who is new to this area of software development.

 

Advertisements

Making a POST request to an oAuth2 secured API using RestSharp

Recently, a coworker asked me how to best consume (using C#) an oAuth2 secured API which I had deployed.  I have been using RestSharp (along with JSON.NET) to make web requests in some of my applications recently, so I wrote a quick sample application for him demonstrating how to communicate with my API using those libraries.  I included it with the documentation for that API, but I want to share the basic concepts here as well.  Since the API is using oAuth2, the first step is to get an access token using an API key and password:

var url = "https://my.api.endpoint/GetToken";
var apiKey = "api_key";
var apiPassword = "api_password";

//create RestSharp client and POST request object
var client = new RestClient(url);
var request = new RestRequest(Method.POST);

//add GetToken() API method parameters
request.Parameters.Clear();
request.AddParameter("grant_type", "password");
request.AddParameter("username", apiKey);
request.AddParameter("password", apiPassword);

//make the API request and get the response
IRestResponse response = client.Execute<AccessToken>(request);

//return an AccessToken
return JsonConvert.DeserializeObject<AccessToken>(response.Content);

If you were successfully able to authenticate using your API credentials, you should receive a response that contains an access token and other information. Depending on the API you’re accessing, it may look similar to this:

{
  "access_token": "v5s5UckbViR9gZUXiu...",
  "token_type": "bearer",
  "expires_in": 43199,
  "userName": "api_key",
  ".issued": "Sun, 30 Jul 2017 17:05:37 GMT",
  ".expires": "Mon, 31 Jul 2017 05:05:37 GMT"
}

Now that the application has been authenticated and has be granted an access token, we can then provide this token when calling various API methods to get authorization.  Here is a sample POST request to my API, calling the DoStuff() method and including an object which contains the input parameters:

var url = "https://my.api.endpoint/DoStuff";

//create RestSharp client and POST request object
var client = new RestClient(url);
var request = new RestRequest(Method.POST);

//request headers
request.RequestFormat = DataFormat.Json;
request.AddHeader("Content-Type", "application/json");

//object containing input parameter data for DoStuff() API method
var apiInput = new { name = "Matt", age= 34 };

//add parameters and token to request
request.Parameters.Clear();
request.AddParameter("application/json", JsonConvert.SerializeObject(apiInput), ParameterType.RequestBody);
request.AddParameter("Authorization", "Bearer " + access_token, ParameterType.HttpHeader);

//make the API request and get a response
IRestResponse response = client.Execute<ApiResponse>(request);

//ApiResponse is a class to model the data we want from the API response
ApiResponse apiResponse = new ApiResponse(JsonConvert.DeserializeObject<ApiResponse>(response.Content));

And that’s pretty much it – the ApiResponse object now has all the data we need from the server response, whatever that may be depending on the API.  As you can see, both of these libraries together make sending and receiving data to/from a server very easy with just a few lines of code.  Getting authenticated with the API server, sending some data, and receiving a deserialized response is very simple.  More information about RestSharp and JSON.NET can be found here:

http://restsharp.org/

http://www.newtonsoft.com/json

 

Color Calibrate Your Monitor

When designing a web app or map, it is important to realize that the colors you see on your monitor may not be the same colors somebody else sees on their monitor or mobile device.  Perhaps you may have noticed that one of your monitors looks a little “off” compared to a second monitor, or maybe a map you designed looks different on screen when compared to a printed copy.  This is because your monitor color settings may not be calibrated correctly.  Most modern flat panel monitors will have on-board controls to adjust various display settings like brightness, sharpness, and contrast. Often they will come with preset options like “theater mode” or “game mode.” These work well for the average consumer, allowing them to quickly pick a color setting that looks good for their preferences.  However, if you’re doing color sensitive work – cartography, web development, photography, etc – you don’t want the monitor to just “look good,” you need your monitor to display as close to true colors as possible.  This will ensure that content created on your computer will display as accurately as possible when viewed on a wide array of devices – devices which may or may not have been properly color calibrated by their user.

So how do you color calibrate a monitor?  There are two basic ways to do this, the first involves purchasing a device that can sense the color output of your monitor and automatically adjust settings.  These devices are very accurate, but are more aimed at professional photographers and others who perform extremely color sensitive work.

The second method for color calibrating a monitor involves using test images and adjusting various hardware and software settings.  This method is sufficient for most web developers and GIS professionals, and depending on the make and model of the monitor, should yield sufficiently accurate color display.  If you’re using Windows, there are some basic built in settings accessible via Control Panel > Display > Calibrate Color:

This wizard will take you through some easy to follow steps and will yield a rough monitor calibration.  More information is available from digitaltrends.com, including information on performing the same task in MacOS.

I prefer to fine tune the calibration on my monitors a bit more, however. I use some test images from lagom.nl that allow me to properly adjust settings on both the monitor itself, as well as settings in the operating system or video card settings application.  Here is the first test image, which assists in adjusting contrast.  When properly calibrated, a monitor should display roughly equal steps in brightness over the full range from 1 to 32 for each color:

Adjust the contrast setting on your monitor until you can just barely see the first color bar, and you can also see a division between each subsequent color bar.  Here is a link to the complete set of monitor test images – each image tests a different setting and gives some instructions on what setting to adjust:

http://www.lagom.nl/lcd-test/

If you are using an NVIDIA graphics card, they provide some excellent utilities and information on how to properly calibrate monitor color:

https://www.geforce.com/whats-new/guides/how-to-calibrate-your-monitor

Browser diversity is good for the web

Develop for the web, not for a browser! Here’s a good quick read about why having a single web browser for all operating systems and devices would not be a good thing:

medium.com/samsung-internet-dev/because-browser-diversity-is-good-for-the-web-910d1cbcdf3b

The article also included this quote from Steve Jobs that I found kind of interesting:

“What’s the point of focusing on making the product even better when the only company you can take business from is yourself?”

Competing browsers are part of what drives innovation on the web. Developing for the ever-changing hardware and software landscape of the web is definitely a challenge. It is important to test websites thoroughly – you want your users to have a good experience regardless of the device and browser they are using.

 

Linking to another page using target=”_blank” can hinder performance and pose a security risk

I recently learned that using target="_blank" to have links open in a new tab causes the new page to run on the same process as your page. If the new link is executing large chunks of JavaScript, your page’s performance may also suffer.  But in addition to a potential performance hit, using  target="_blank" is also a security vulnerability.  Using rel=noopener is recommended.  This will prevent the newly opened page from accessing your window object via window.opener.

<a href="http://mylink.com" target="_blank" rel="noopener">My Link</a>

WordPress began implementing this when adding a hyperlink to text and selecting the “Open link in new window/tab” checkbox.  It does not appear that rel=noopener is supported by Edge at this time.

Here is some more info on rel=noopener:

developers.google.com/web/tools/lighthouse/audits/noopener

Here are a few examples demonstrating the security vulnerability and how the page that is linked to can manipulate the original page.

mathiasbynens.github.io/rel-noopener

jakearchibald.com/2016/performance-benefits-of-rel-noopener