{"id":153,"date":"2020-05-22T16:05:22","date_gmt":"2020-05-22T16:05:22","guid":{"rendered":"https:\/\/shreyapohekar.com\/blogs\/?p=153"},"modified":"2022-02-09T18:54:57","modified_gmt":"2022-02-09T18:54:57","slug":"the-concepts-of-jwt","status":"publish","type":"post","link":"https:\/\/shreyapohekar.com\/blogs\/the-concepts-of-jwt\/","title":{"rendered":"The basic concepts of JWT"},"content":{"rendered":"\n<p>Nowadays JWTs are widely used as an authorization standard and allows for secure information transmission. There are a lot of features that make JWT the first choice to implement.So let&#8217;s dive into the blog post to uncover the basic terminologies of JWT, learn to build JWT from scratch and know about its working.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">What is JWT??<\/h3>\n\n\n\n<p>It stands for<strong> JSON Web Tokens<\/strong>. JWTs are open, industry-standard (RFC 7519) for representing trusts between the 2 parties. By trust, it is implied that there establishes a secure transfer of information between the 2 communicating parties. The information sent is digitally signed that keeps its integrity preserved. Lets learn more about its features that makes it popular.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Features of JWT<\/h3>\n\n\n\n<p><strong>Compact<\/strong> : The compact size of the jwt enables it to be sent via <strong>URL, POST request, HTTP header<\/strong>. The compactness also leverages high-speed transmission. Because of less overheads, Single sign-on widely uses jwt.<\/p>\n\n\n\n<p><strong>Self- Contained<\/strong>: JWT contains information about the user (will be discussed later in the post). So once a valid user is identified, the token is used to any further identification therefore removing the need to query the database again and again.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Structure of JSON Web Tokens<\/h3>\n\n\n\n<p>JWT is composed of 3 parts:<br>\nHeader<br>\nPayload<br>\nSignature<\/p>\n\n\n\n<p>So this is what a token looks like<\/p>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p>xxxxxxxxxxxxxx.yyyyyyyyyyyyyy.zzzzzzzzzzzzzzz<\/p>\n<\/div><\/div>\n\n\n\n<p>Still Confused? Lets break down!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Header<\/h3>\n\n\n\n<p>Header forms the first part of the token that contains the algorithm used for signing.<strong> HMAC SHA256 <\/strong>and <strong>RSA<\/strong> are some of the popularly used algorithms. Also, it holds the type of the token type. It is structured in json that is further<strong> base64 encoded<\/strong>.<\/p>\n\n\n\n<p>JWT can be distinguished as a <strong>JWS<\/strong>[ JSON Web Signature] or <strong>JWE<\/strong>[JSON Web Encryption]. If the value of alg (in the header) represents a signature algorithm, the JWT is a JWS; if it represents an encryption algorithm, the JWT is a JWE.<\/p>\n\n\n\n<p>If you are wondering whats the difference btw JWS and JWE, lets make it clearer.<\/p>\n\n\n\n<p>Signing is used in the token so that no one can tamper the data being communicated. Although the dilemma is, sensitive information can be sent if the token is just signed (as the base64 can be easily decoded).&nbsp;<br>\nSo if sensitive information is transferred as a part of token, a layer of security can be added by encrypting the token. That makes a JWE. <\/p>\n\n\n\n<p>Hope you got is clear now!&nbsp;<\/p>\n\n\n\n<p>Heading towards the format, let\u2019s see how it looks like:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted wpf-blue-background\">{<br>   \"alg\": \"HS256\",<br>   \"typ\": \"JWT\"<br> }<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Payload<\/h4>\n\n\n\n<p>It builds up the next part of the token. The payload contains the user information. They are called as claims.<\/p>\n\n\n\n<p>The claims are of 3 types: Registered, public and private claims.<\/p>\n\n\n\n<p>Payload Format<\/p>\n\n\n\n<pre class=\"wp-block-preformatted wpf-blue-background\">{<br> \"user\": \"testuser\"<br> \"admin\":\"true\"<br>}<\/pre>\n\n\n\n<p>The payload is then base64 encoded.<\/p>\n\n\n\n<p class=\"has-text-color has-background\" style=\"background-color:#fcebe6;color:#a91616\"><strong>Note:<\/strong> As the header and payload are readable, it is strongly advised to not to stuff in any sensitive information unless the jwt is encrypted.&nbsp;<\/p>\n\n\n\n<p>Signature<\/p>\n\n\n\n<p>Signatures verifies the identity of the sender and also endures that the sent data is not tempered with.This part basically takes in base64 encode header, base64 encoded payload, a secret, and the signing algo as the part of the header. All the 4 elements are combined to create a signature.<\/p>\n\n\n\n<p><strong>Format<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted wpf-blue-background\">HMACSHA256(<br> base64UrlEncode(header) + \".\" +<br> base64UrlEncode(payload),<br> secret)<\/pre>\n\n\n\n<p class=\"has-text-color has-background\" style=\"background-color:#fcefeb;color:#a21d1d\"><strong>Note<\/strong>: It is optional to create a signature, but its recommended. If you omit the signature, there jwt will contain only 2 parts (header and payload) and will be of the form (xxxxxxxxxx.yyyyyyyyyyyyy), that can be easily malformed over the transit.<\/p>\n\n\n\n<p>On Combining the 3 components, here\u2019s what we get<\/p>\n\n\n\n<p><strong><span class=\"has-inline-color has-vivid-red-color\">eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9<\/span>.<span class=\"has-inline-color has-vivid-purple-color\">eyJ1c2VyIjoidGVzdHVzZXIiLCJhZG1pbiI6InRydWUifQ<\/span>.<span class=\"has-inline-color has-pale-cyan-blue-color\">_e5Mro6PcJnrte1dJAFeuKEUoxPuy0e501Qg90LivD0<\/span><\/strong><\/p>\n\n\n\n<p>You can play around with these components on <a href=\"https:\/\/jwt.io\">https:\/\/jwt.io<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/Yosaz6zkLroC6sJ81gJbMdo1wO3PVUvTzkfCLv9bOmUY2rBtn1sZD4RRRARzl-roF2WL36NntiNJR0U5ld2QWZeFyGoM-fZ05WduSztFhfQ4yynzlwZbk_oMj0Ug70j0OKg81jne\" alt=\"\"\/><\/figure>\n\n\n\n<p>Also, when you are given the auth token as a part of request\/response header, you can decode the part to get some useful information.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Working of JWTs<\/h3>\n\n\n\n<p>When the user authenticates with the server with his credentials, JSON Web token is generated by the server is returned back as the response.<\/p>\n\n\n\n<p>Now when the user again requests for any protected route with JWT in its authorization header, as a first step, the server checks the JWT, verifies it and allows\/disallows the user access based upon his authorization rights.<\/p>\n\n\n\n<p>This authentication mechanism does not save the state of the user therefore on each request made, token verification has to be done.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/QgIyX-ir6s32AzOCxednl48zrdfeen45tstT6qWHfY_HD42mVlXREjvs8cRO23xfAEYIOmzhS7y0m_NLQEaCy9OeV-jwpEqnUp_Ip3slLVcDOWQq5df2fd6AYz_usVhoJzh2uA4B\" alt=\"\" width=\"704\" height=\"448\"\/><figcaption><strong>credits: auth0<\/strong><\/figcaption><\/figure>\n\n\n\n<p>Thats all for the blog post. In the upcoming post, I\u2019ll be covering how JWTs can be exploited!!<br>\nUntil then, keep exploring!!<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Nowadays JWTs are widely used as an authorization standard and allows for secure information transmission. There are a lot of features that make JWT the first choice to implement.So let&#8217;s dive into the blog post to uncover the basic terminologies of JWT, learn to build JWT from scratch and know about its working. What is [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":182,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"on","ocean_gallery_id":[],"footnotes":""},"categories":[2],"tags":[84,81,80,79,86,83,85,82],"class_list":["post-153","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-information-security","tag-authorization","tag-introduction","tag-json-web-token","tag-jwt","tag-jwt-features","tag-jwt-io","tag-payload","tag-signature","entry","has-media"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/shreyapohekar.com\/blogs\/wp-json\/wp\/v2\/posts\/153"}],"collection":[{"href":"https:\/\/shreyapohekar.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shreyapohekar.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shreyapohekar.com\/blogs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shreyapohekar.com\/blogs\/wp-json\/wp\/v2\/comments?post=153"}],"version-history":[{"count":11,"href":"https:\/\/shreyapohekar.com\/blogs\/wp-json\/wp\/v2\/posts\/153\/revisions"}],"predecessor-version":[{"id":929,"href":"https:\/\/shreyapohekar.com\/blogs\/wp-json\/wp\/v2\/posts\/153\/revisions\/929"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/shreyapohekar.com\/blogs\/wp-json\/wp\/v2\/media\/182"}],"wp:attachment":[{"href":"https:\/\/shreyapohekar.com\/blogs\/wp-json\/wp\/v2\/media?parent=153"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shreyapohekar.com\/blogs\/wp-json\/wp\/v2\/categories?post=153"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shreyapohekar.com\/blogs\/wp-json\/wp\/v2\/tags?post=153"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}