{"id":237451,"date":"2016-01-29T07:15:48","date_gmt":"2016-01-29T14:15:48","guid":{"rendered":"http:\/\/css-tricks.com\/?p=237451"},"modified":"2018-11-08T07:18:43","modified_gmt":"2018-11-08T14:18:43","slug":"hookbin-capture-inspect-http-requests","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/hookbin-capture-inspect-http-requests\/","title":{"rendered":"Hookbin &#8211; Capture and Inspect HTTP Requests"},"content":{"rendered":"<p><em class=\"explanation\">The following is a guest post by <a href=\"https:\/\/twitter.com\/matylla\" rel=\"noopener\">Przemek Matylla<\/a>, who created a tool I suspect will be mighty useful for some of you out there. There is a lot of mystery out there in webdev. What value is this variable at this moment in execution? Why is this property being overridden? What&#8217;s causing this scrollbar? There is also a mystery with HTTP requests. What data came along for the ride? What metadata? Is everything there (and not there) as I expect? Hopefully, Przemek&#8217;s tool can help.<\/em><\/p>\n<p><!--more--><\/p>\n<p class=\"explanation\"><strong>Update September 2018:<\/strong> This service looks dead. Reader Ankit Jain suggested others like <a href=\"https:\/\/beeceptor.com\/\" rel=\"noopener\">Beeceptor<\/a>, <a href=\"http:\/\/mockbin.org\/\" rel=\"noopener\">Mockbin<\/a>, or (self-hosted) <a href=\"https:\/\/github.com\/Runscope\/requestbin\" rel=\"noopener\">RequestBin<\/a>.<\/p>\n<p class=\"explanation\"><strong>Update November 2018<\/strong>: Przemek wrote to say that the service was offline due to extreme abuse, but now has been re-written and re-launched and is more resiliant to attacks.<\/p>\n<p>When dealing with webhooks, accepting or sending form data, or simply issuing standard HTTP requests, you can find yourself puzzled about what <em>exactly<\/em> was in the payload. What were the HTTP headers? What exactly happened to your multipart uploads?<\/p>\n<p>Luckily there&#8217;s a nifty tool called <a href=\"https:\/\/hookbin.com\" rel=\"noopener\">Hookbin<\/a> (disclaimer: I created it) that greatly reduces the pain of debugging HTTP requests. Let&#8217;s take a quick look at the tool and what we can achieve with it.<\/p>\n<figure id='post-237453' class='align-none media-237453'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/01\/hookbin-01.png' alt='' data-recalc-dims=\"1\" \/><\/figure>\n<h3>What is Hookbin?<\/h3>\n<p>Hookbin is a free service which allows you to intercept, parse, and debug HTTP requests of any kind. By offering a volatile unique URL (called an &#8220;Endpoint&#8221;), it enables you to issue requests against that endpoint and check what exactly has been transmitted. The are numerous possible use cases. To name a few:<\/p>\n<ul>\n<li>Debugging webhooks from external providers, for example payment systems like Stripe or Recurly before going to production<\/li>\n<li>Debugging forms in your applications to help set up controllers properly<\/li>\n<li>Parsing multipart requests (file uploads)<\/li>\n<\/ul>\n<h3>How To Use Hookbin<\/h3>\n<p>The first thing you will see when landing on the <a href=\"https:\/\/hookbin.com\" rel=\"noopener\">Hookbin<\/a> home page is a large button which reads &#8220;Create New Endpoint&#8221;. Right below, there&#8217;s an option called &#8220;Make it Private&#8221; to create an Endpoint whose results will only be visible in the browser with which you created it (read below on private Endpoints). For now let&#8217;s create a standard Endpoint. Click the button and your browser will navigate to your unique Endpoint&#8217;s result list.<\/p>\n<figure id='post-237454' class='align-none media-237454'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/01\/hookbin-02.png' alt='' data-recalc-dims=\"1\" \/><\/figure>\n<p>At the top of a page you&#8217;ll see the actual Endpoint URL which you can use within your applications, for example <code>https:\/\/hookb.in\/voOD1NJ8<\/code>. Note that the domain name for Endpoints is different &mdash; <em>hookb.in<\/em> instead of hookbin.com. Hookbin.com is where you view your requests, while hookb.in is used only for Endpoints.<\/p>\n<p>Hookbin keeps each unique Endpoint alive for 7 days from when it&#8217;s been created, and allows you to store up to 100 requests per Endpoint. Once an Endpoint hits that limit, the oldest results will be removed to free up space for new ones.<\/p>\n<p>Once we&#8217;ve acquired our unique Endpoint URL we can start playing with it. At the bottom of the page you&#8217;ll find several examples of <code>POST<\/code> requests with a JSON payload against that Endpoint in various programming languages. <\/p>\n<p>Let&#8217;s start with something super simple: <code>GET<\/code> requests. Copy your unique Endpoint URL and navigate to it in a new browser tab. Upon a successful request Hookbin will always return <code>200 OK<\/code> status code with a JSON <code>{\"success\": true}<\/code><\/p>\n<p>Cool. Now close the tab and go back to Hookbin.com, where you can view your results (refresh the page).<\/p>\n<figure id='post-237455' class='align-none media-237455'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/01\/hookbin-03.png' alt='' data-recalc-dims=\"1\" \/><\/figure>\n<p>You&#8217;ll see the results of that HTTP GET request stored. Let&#8217;s see what&#8217;s in the request. Every result is broken down into the following easily collapsible sections:<\/p>\n<ul>\n<li>HTTP Headers (Request and Response)<\/li>\n<li>Query String<\/li>\n<li>Body<\/li>\n<li>File Uploads<\/li>\n<li>Cookies<\/li>\n<\/ul>\n<h3>HTTP Headers<\/h3>\n<p>The first section gives you the HTTP headers transmitted in the request. What&#8217;s unique about Hookbin is that it gives you both the request <em>and<\/em> the response headers. It is also important to note that Hookbin filters out any headers which might have been added by proxy servers between the origin of a request and the Hookbin servers. That means you will only actually see the headers you have explicitly set in the request, and those transmitted back with a response. No more noise or unknown headers you have not explicitly set.<\/p>\n<h3>Query String<\/h3>\n<p>It is very common to transmit data as a part of a URL. All query strings appended to the Endpoint URL will be presented here as key-value pairs. To check how it looks simply append a query string to your unique Endpoint URL, for example <code>?name=john<\/code>, open that URL in another tab and go back to Hookbin.com.<\/p>\n<figure id='post-237456' class='align-none media-237456'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/01\/hookbin-04.png' alt='' data-recalc-dims=\"1\" \/><\/figure>\n<h4>Body<\/h4>\n<p>This section gives you the <code>POST<\/code> body of a request, beautifully highlighted. It is now 2016 and most services out there send their data in JSON format. Let&#8217;s now issue such a request with cURL and see how it looks:<\/p>\n<pre rel=\"Terminal\"><code class=\"language-javascript\">curl -X POST -H \"Content-Type: application\/json\" -d '{\"name\": \"John\", \"age\": 32, \"buddies\": [\"Paul\", \"Bob\", \"Adam\"]}' https:\/\/hookb.in\/voOD1NJ8<\/code><\/pre>\n<figure id='post-237457' class='align-none media-237457'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/01\/hookbin-05.png' alt='' data-recalc-dims=\"1\" \/><\/figure>\n<p>Hookbin is request-type-agnostic, meaning it will parse and store all kinds of requests: JSON, XML, YAML, multipart or URL-Encoded.<\/p>\n<h3>File Uploads<\/h3>\n<p>Who doesn&#8217;t send files over HTTP nowadays? Let&#8217;s now find out how to intercept mutlipart requests (file uploads) with Hookbin. Assuming you have <code>image.jpg<\/code> in your current working directory you can upload a file with cURL like so:<\/p>\n<pre rel=\"Terminal\"><code class=\"language-javascript\">curl -X POST --form upload=@image.jpg https:\/\/hookb.in\/voOD1NJ8<\/code><\/pre>\n<figure id='post-237458' class='align-none media-237458'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/01\/hookbin-06.png' alt='' data-recalc-dims=\"1\" \/><\/figure>\n<p>Hookbin stores all uploads in ephemeral AWS S3 buckets with TTL (Time To Live, or expiration time) set to 7 days from the moment the file has been uploaded. After that time they are automatically and irreversibly deleted. If you don&#8217;t feel like waiting a full 7-day cycle, you may delete individual files on demand with a single click.<\/p>\n<p>Please note that Hookbin will parse and save HTTP requests up to 1MB in size &mdash; both body and headers. If you send a request that is larger than 1MB, Hookbin will respond with <code>413 Request Entity Too Large<\/code> and reject it.<\/p>\n<h3>Cookies<\/h3>\n<p>Any HTTP cookies transmitted within the request will be presented here as key-value pairs. Want to try it out? Here&#8217;s a cURL one-liner:<\/p>\n<pre rel=\"Terminal\"><code class=\"language-javascript\">curl -X GET --cookie \"motto=never_gonna_give_you_up\" https:\/\/hookb.in\/voOD1NJ8<\/code><\/pre>\n<figure id='post-237459' class='align-none media-237459'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/01\/hookbin-07.png' alt='' data-recalc-dims=\"1\" \/><\/figure>\n<h3>Private Endpoints<\/h3>\n<p>Remember that checkbox on Hookbin&#8217;s homepage when creating a new Endpoint? When checked the Endpoint you create will become &#8220;Private&#8221; meaning it will only be viewable in the browser you&#8217;ve used to create such endpoint. No one else will have access to stored results.<\/p>\n<h3>Adding Notes<\/h3>\n<p>What good are stored HTTP requests if we can&#8217;t add quick notes to each one of them to keep track of changes in our applications? Hookbin allows you to do this. In the top-right corner of each request you will find a button called &#8220;Add Note&#8221;. That allows you to store up to 1,000 characters of text. You can delete and edit your notes.<\/p>\n<figure id='post-237460' class='align-none media-237460'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/01\/hookbin-08.png' alt='' data-recalc-dims=\"1\" \/><\/figure>\n<h3>Deleting Results<\/h3>\n<p>If you don&#8217;t need all stored results you can remove individual ones with the red button labeled &#8220;Delete Result&#8221; at the top-right corner of each result.<\/p>\n<h3>Hidden Features<\/h3>\n<ul>\n<li>Hookbin offers a wide-open CORS implementation so you can test HTTP requests from within your JS applications<\/li>\n<li>Hookbin supports method overriding<\/li>\n<li>Security connections only &mdash; Hookbin offers only SSL-secured Endpoints and scores A+ grade on SSL Labs test<\/li>\n<li>Hookbin runs in a Highly Available setup<\/li>\n<\/ul>\n<h3>Technology<\/h3>\n<p>Hookbin is a pair of Node applications. The &#8220;Interceptor&#8221; behind hookb.in and the Web interface available at hookbin.com. In front of the Node applications there are Nginx servers running, which are used for SSL termination and preliminary validation of requests which are then reverse-proxied to the Node backends. The Web interface app has been written with Angular and all the assets are delivered by a CDN.<\/p>\n<h3>Why did we build Hookbin?<\/h3>\n<p>Here at <a href=\"https:\/\/kraken.io\" rel=\"noopener\">Kraken.io<\/a> we deal with Webhooks every day, delivering hundreds of thousands (sometimes millions) of them around the world to notify applications of completed image resizing and optimization processing. We first developed the service in-house for our own purposes. Once we realised the product was polished and platform-agnostic we decided to spread the love, making it publicly available. We hope you will find it useful!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The following is a guest post by Przemek Matylla, who created a tool I suspect will be mighty useful for some of you out there. There is a lot of mystery out there in webdev. What value is this variable at this moment in execution? Why is this property being overridden? What&#8217;s causing this scrollbar? [&hellip;]<\/p>\n","protected":false},"author":248340,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[568,569],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/237451"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/248340"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=237451"}],"version-history":[{"count":11,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/237451\/revisions"}],"predecessor-version":[{"id":278576,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/237451\/revisions\/278576"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=237451"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=237451"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=237451"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}