URL Hash

Many Moons Ago

When I first began to create HTML pages many many moons ago I remember being fascinated that I could have a web page scroll directly to a portion of the page by giving the element an id and then using the hash symbol # , followed by the id as the href value in an anchor tag. OR I could put that same thing at the end of the URL to have the page directly navigate to that portion of the page. I know that doesn’t sound that exciting but at this time I was also using notepad (not notepad++) to create web pages. Random tidbit my first web page was about Kevin Garnett.

Many Suns Later

Fast forward many many suns later (last weekend to be exact) and the hash symbol in a URL is brought to my attention again while working with Twitch’s OAuth authentication. Without getting deep into the details when using the OAuth implicit code flow a http request is sent in order to receive a token that used in subsequent request to the Twitch API. How is the token returned? In the URL of course (sarcasm). A redirect_uri parameter is sent in the authentication request. After the user authenticates the authentication process will redirect the user’s browser to the redirect_uri with the token appended using the hash symbol.

REQUEST: GET http://twitchauth?redirect_uri=http://comeback_to_this_page
RESPONSE: http://comeback_to_this_page#access_token=TOKEN_NOW_GO_HAVE_FUN

Well now that I have the token how do I get it so that I can use it? Since I was using javascript I simply used the location.hash function to get the token (of course removing the unnecessary characters also).

So what exactly is the hash?

Well the hash is technically a URL fragment that is used to scroll the browser to predefined positions on the page. The hash is located at the end of the url separated by the # symbol. I was introduced to hashes as HTML anchors. Now they are also used to add dynamic functionality web pages. Other places that you might see the url hash in action is single-page webapps, React Router’s HashRouter or in URLs used to open apps or webpages on mobile phones.