{"id":6719,"date":"2020-06-24T20:36:49","date_gmt":"2020-06-24T20:36:49","guid":{"rendered":"https:\/\/cheesecakelabs.com\/blog\/?p=6719\/"},"modified":"2022-07-01T17:09:06","modified_gmt":"2022-07-01T17:09:06","slug":"mobile-api-test-web-proxy","status":"publish","type":"post","link":"https:\/\/cheesecakelabs.com\/blog\/mobile-api-test-web-proxy\/","title":{"rendered":"Mobile API test with web proxy"},"content":{"rendered":"

As a Q.A. analyst, I have learned that the integration between the backend API and the frontend can be difficult to test and somewhat overlooked since unit tests and end-to-end tests are more common. With this approach you’ll have not only a broader understanding of the solution compared to unit tests, but also an increase in test speed and stability.<\/span><\/p>\n

<\/p>\n

In one of my tests I couldn\u2019t understand why the app was returning a different result for my search, considering I was also using Postman to directly send a GET to the same endpoint. Then I remembered, once I used a web proxy program to bypass an online game by blocking an URL. <\/span><\/p>\n

So I installed the web proxy and discovered that the request was pointing to a URL in another environment with the same data structure, but with different results.<\/span><\/p>\n

Since I used a web proxy to forward all traffic from my mobile app to my computer, I could easily see all the requests the app was making.<\/span><\/p>\n

How does this improve my integration testing?<\/span><\/p>\n

If I had used a web proxy earlier, I would’ve seen on the fly why the result was wrong and who I could show it to in order to fix that bug. <\/span><\/p>\n

In this article I\u2019ll show you how to forward all your device traffic using proxying and SSL using Charles Webproxy. Note that you can also use Fiddler or another web proxy program with the same logic.<\/span><\/p>\n

First things first<\/b><\/h2>\n

Before you start, let\u2019s first setup your proxy from your mobile device to Charles Webproxy and see how the program works.<\/span><\/p>\n

The first step is to know what\u2019s your IP address. So, open your terminal and type ipconfig (windows) or ifconfig (mac) and type down your IP address.<\/span><\/p>\n

\"\"<\/p>\n

Now, go to your device and open the WIFI settings and change the proxy setting from automatic to manual and put your IP address on Hostname (Android) and\/or Server (iOS) and port 8888 (you can change the port on Charles settings). Like this:<\/span><\/p>\n

\"\"<\/p>\n

\"\"<\/p>\n

Once you do that, open Charles and you\u2019ll see a warning asking you access to Charles. Click on Allow.<\/span><\/p>\n

\"\"<\/p>\n

Charles will now forward all traffic that your device is doing on the Structure tab on the left panel.<\/p>\n

\"\"<\/p>\n

The Overview and Contents tabs are the most important ones. After selecting an endpoint, you\u2019ll be able to see all statuses about that connection on the Overview tab on the right panel. Keep an eye on Status and Response code values, those two are very valuable when testing an endpoint. On the Contents tab, you can see the request (top) and response (bottom) of the connection. <\/span><\/p>\n

\"\"<\/p>\n

\u201c<\/span>But wait, there\u2019s something wrong, I can\u2019t see the server response, it\u2019s all scrambled up!<\/span><\/i>\u201d. That\u2019s because you are trying to see an encrypted request, so we need to enable an SSL Proxy.<\/span><\/p>\n

Using SSL Proxying to see encrypted requests<\/b><\/h2>\n

Let\u2019s start with the definition. According to the RFC 6101, “<\/span>the primary goal of the SSL protocol is to provide privacy and reliability between two communicating applications<\/span><\/i>“. (IETF, Internet Engineering Task Force. 2011). SSL guarantees that a connection is private and the data transmitted is encrypted.<\/span><\/p>\n

How do you know a web server is encrypted? The quick answer is if you look at your browser address bar and it says HTTPS, then it\u2019s an encrypted connection. So we need to install an authorized certificate to see all that traffic content.<\/span><\/p>\n

\"\"<\/p>\n

On Windows, <\/span><\/p>\n

    \n
  1. Open Charles;<\/span><\/li>\n
  2. Go to the Help menu;<\/span><\/li>\n
  3. Select SSL Proxying;<\/span><\/li>\n
  4. Install Charles Root Certificate”;<\/span><\/li>\n
  5. Click the “Install Certificate” button to launch and complete the import wizard.<\/span><\/li>\n<\/ol>\n

    \"\"<\/p>\n

    On Mac, <\/span><\/p>\n

      \n
    1. Open Charles;<\/span><\/li>\n
    2. Go to the Help menu;<\/span><\/li>\n
    3. Select SSL Proxying;<\/span><\/li>\n
    4. Install Charles Root Certificate”;<\/span><\/li>\n
    5. Keychain Access will open; <\/span><\/li>\n
    6. Find the “Charles Proxy…” entry, and double-click to get info on it; <\/span><\/li>\n
    7. Expand the “Trust” section, and beside “When using this certificate” change it from “Use System Defaults” to “Always Trust”; <\/span><\/li>\n
    8. Then close the certificate info window, and you will be prompted for your Administrator password to update the system trust settings.<\/span><\/li>\n<\/ol>\n

      Now you also need to install the certificate on your device. To do so, open the Charles Authorized certification page <\/span>https:\/\/chls.pro\/ssl<\/span><\/a> on your mobile browser and it will prompt to install the certification.<\/span><\/p>\n

      On iOS 10.3 or later, <\/span><\/p>\n

        \n
      1. Open the Settings app;<\/span><\/li>\n
      2. Navigate to General;<\/span><\/li>\n
      3. About;<\/span><\/li>\n
      4. Certificate Trust Settings;<\/span><\/li>\n
      5. Find the Charles Proxy certificate, and switch it on to enable full trust for it.<\/span><\/li>\n<\/ol>\n

        On Android 6 or earlier versions, just click and install the certification with the link above provided on your mobile browser. On Android 7 or later you\u2019ll need to add a Network Security Configuration File to your app, enabling it to trust user installed CA certificates.<\/span><\/p>\n

        Add a file <\/span>res\/xml\/network_security_config.xml<\/span><\/i> to your app:<\/span><\/p>\n

        <network-security-config> <\/span>\n  <debug-overrides> <\/span>\n    <trust-anchors> <\/span>\n      <!-- Trust user added CAs while debuggable only --><\/span>\n      <certificates src=\"user\" \/> <\/span>\n    <\/trust-anchors> <\/span>\n  <\/debug-overrides> <\/span>\n<\/network-security-config><\/span><\/pre>\n
        Then add a reference to this file in your app’s manifest, as below:<\/p>\n
        <?xml version=\"1.0\" encoding=\"utf-8\"?><\/span>\n<manifest ... ><\/span>\n    <application android:networkSecurityConfig=\"@xml\/network_security_config\" ... ><\/span>\n        ...<\/span>\n    <\/application><\/span>\n<\/manifest><\/span><\/pre>\n
        Remember: if you want to forward the traffic from one of your desktop browsers, you need to install the certifications for those browsers.<\/p>\n
        Once installed, you should be able to access SSL web sites.<\/span><\/p>\n
        SSL Proxy settings<\/b><\/h2>\n
        But to access and see the contents of those sites, we need to add them to Charles SSL list. So go to \u201cProxy > Proxy settings > Enable SSL proxying\u201d. Click on \u201cAdd\u201d and fill the Host with the URL you want to decrypt. If you want to decrypt an entire location, add * wildcard.<\/span><\/p>\n
        \"\"<\/p>\n
        Access one of the websites that you included and check the request on the Structure tab.<\/span><\/p>\n
        \"\"<\/p>\n
        See how the included HTTPS location is decrypted and the above one is marked as unknown? <\/span><\/p>\n
        Now you can see all your request\/response content.<\/span><\/p>\n
        \"\"<\/p>\n
        Last but not least<\/b><\/h2>\n
        With all this set, you\u2019ll get more evidence about why something is not working on your app and  who you should talk to when you find a bug. This will allow you to know why the response of your API is showing five items and the app is showing four or if it\u2019s a backend or frontend problem. Web proxy can help you a lot to investigate a bug. In Web and Internet development you are unable to see what is being sent and received between your app or browser and the server. Without this visibility it is difficult and time-consuming to determine exactly where the issue is. This will make your debugging quick, reliable and advanced, saving you time and frustration.<\/span><\/p>\n
        References<\/h2>\n
        https:\/\/www.charlesproxy.com<\/span><\/a>
        \n        https:\/\/tools.ietf.org\/html\/rfc6101<\/span><\/a> (IETF, Internet Engineering Task Force. 2011)<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"
        As a Q.A. analyst, I have learned that the integration between the backend API and the frontend can be difficult to test and somewhat overlooked since unit tests and end-to-end tests are more common. With this approach you’ll have not only a broader understanding of the solution compared to unit tests, but also an increase […]<\/p>\n","protected":false},"author":65,"featured_media":6720,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[432],"tags":[15],"class_list":["post-6719","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-engineering","tag-tag-mobile"],"yoast_head":"\nMobile API test with web proxy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cheesecakelabs.com\/blog\/mobile-api-test-web-proxy\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mobile API test with web proxy\" \/>\n<meta property=\"og:description\" content=\"As a Q.A. analyst, I have learned that the integration between the backend API and the frontend can be difficult to test and somewhat overlooked since unit tests and end-to-end tests are more common. With this approach you’ll have not only a broader understanding of the solution compared to unit tests, but also an increase […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cheesecakelabs.com\/blog\/mobile-api-test-web-proxy\/\" \/>\n<meta property=\"og:site_name\" content=\"Cheesecake Labs\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/cheesecakelabs\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-24T20:36:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-01T17:09:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2020\/06\/Blogpost_Jevaux.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1800\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Cheesecake Labs\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@cheesecakelabs\" \/>\n<meta name=\"twitter:site\" content=\"@cheesecakelabs\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/mobile-api-test-web-proxy\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/mobile-api-test-web-proxy\/\"},\"author\":{\"name\":\"Diego Jevaux\"},\"headline\":\"Mobile API test with web proxy\",\"datePublished\":\"2020-06-24T20:36:49+00:00\",\"dateModified\":\"2022-07-01T17:09:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/mobile-api-test-web-proxy\/\"},\"wordCount\":1115,\"image\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/mobile-api-test-web-proxy\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2020\/06\/Blogpost_Jevaux.png\",\"keywords\":[\"Mobile\"],\"articleSection\":[\"Engineering\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/mobile-api-test-web-proxy\/\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/mobile-api-test-web-proxy\/\",\"name\":\"Mobile API test with web proxy\",\"isPartOf\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/mobile-api-test-web-proxy\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/mobile-api-test-web-proxy\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2020\/06\/Blogpost_Jevaux.png\",\"datePublished\":\"2020-06-24T20:36:49+00:00\",\"dateModified\":\"2022-07-01T17:09:06+00:00\",\"author\":{\"@type\":\"person\",\"name\":\"Diego Jevaux\"},\"breadcrumb\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/mobile-api-test-web-proxy\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cheesecakelabs.com\/blog\/mobile-api-test-web-proxy\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/mobile-api-test-web-proxy\/#primaryimage\",\"url\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2020\/06\/Blogpost_Jevaux.png\",\"contentUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2020\/06\/Blogpost_Jevaux.png\",\"width\":1800,\"height\":720,\"caption\":\"white cloud in a purple background connected to pieces of code\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/mobile-api-test-web-proxy\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cheesecakelabs.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mobile API test with web proxy\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#website\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/\",\"name\":\"Cheesecake Labs\",\"description\":\"Nearshore outsourcing company for Web and Mobile design and engineering services, and staff augmentation for startups and enterprises..\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cheesecakelabs.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"name\":\"Diego Jevaux\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#\/schema\/person\/image\/\",\"url\":false,\"contentUrl\":false,\"caption\":\"Diego Jevaux\"},\"description\":\"10 years of experience in Marketing and Sales in the Technology sector. My main purpose is help, support and structure efficient operations and also develop independent and multidisciplinary teams.\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/autor\/diegojevaux\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mobile API test with web proxy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cheesecakelabs.com\/blog\/mobile-api-test-web-proxy\/","og_locale":"en_US","og_type":"article","og_title":"Mobile API test with web proxy","og_description":"As a Q.A. analyst, I have learned that the integration between the backend API and the frontend can be difficult to test and somewhat overlooked since unit tests and end-to-end tests are more common. With this approach you’ll have not only a broader understanding of the solution compared to unit tests, but also an increase […]","og_url":"https:\/\/cheesecakelabs.com\/blog\/mobile-api-test-web-proxy\/","og_site_name":"Cheesecake Labs","article_publisher":"https:\/\/www.facebook.com\/cheesecakelabs","article_published_time":"2020-06-24T20:36:49+00:00","article_modified_time":"2022-07-01T17:09:06+00:00","og_image":[{"width":1800,"height":720,"url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2020\/06\/Blogpost_Jevaux.png","type":"image\/png"}],"author":"Cheesecake Labs","twitter_card":"summary_large_image","twitter_creator":"@cheesecakelabs","twitter_site":"@cheesecakelabs","twitter_misc":{"Written by":null,"Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/cheesecakelabs.com\/blog\/mobile-api-test-web-proxy\/#article","isPartOf":{"@id":"https:\/\/cheesecakelabs.com\/blog\/mobile-api-test-web-proxy\/"},"author":{"name":"Diego Jevaux"},"headline":"Mobile API test with web proxy","datePublished":"2020-06-24T20:36:49+00:00","dateModified":"2022-07-01T17:09:06+00:00","mainEntityOfPage":{"@id":"https:\/\/cheesecakelabs.com\/blog\/mobile-api-test-web-proxy\/"},"wordCount":1115,"image":{"@id":"https:\/\/cheesecakelabs.com\/blog\/mobile-api-test-web-proxy\/#primaryimage"},"thumbnailUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2020\/06\/Blogpost_Jevaux.png","keywords":["Mobile"],"articleSection":["Engineering"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/cheesecakelabs.com\/blog\/mobile-api-test-web-proxy\/","url":"https:\/\/cheesecakelabs.com\/blog\/mobile-api-test-web-proxy\/","name":"Mobile API test with web proxy","isPartOf":{"@id":"https:\/\/cheesecakelabs.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cheesecakelabs.com\/blog\/mobile-api-test-web-proxy\/#primaryimage"},"image":{"@id":"https:\/\/cheesecakelabs.com\/blog\/mobile-api-test-web-proxy\/#primaryimage"},"thumbnailUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2020\/06\/Blogpost_Jevaux.png","datePublished":"2020-06-24T20:36:49+00:00","dateModified":"2022-07-01T17:09:06+00:00","author":{"@type":"person","name":"Diego Jevaux"},"breadcrumb":{"@id":"https:\/\/cheesecakelabs.com\/blog\/mobile-api-test-web-proxy\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cheesecakelabs.com\/blog\/mobile-api-test-web-proxy\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cheesecakelabs.com\/blog\/mobile-api-test-web-proxy\/#primaryimage","url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2020\/06\/Blogpost_Jevaux.png","contentUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2020\/06\/Blogpost_Jevaux.png","width":1800,"height":720,"caption":"white cloud in a purple background connected to pieces of code"},{"@type":"BreadcrumbList","@id":"https:\/\/cheesecakelabs.com\/blog\/mobile-api-test-web-proxy\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cheesecakelabs.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Mobile API test with web proxy"}]},{"@type":"WebSite","@id":"https:\/\/cheesecakelabs.com\/blog\/#website","url":"https:\/\/cheesecakelabs.com\/blog\/","name":"Cheesecake Labs","description":"Nearshore outsourcing company for Web and Mobile design and engineering services, and staff augmentation for startups and enterprises..","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cheesecakelabs.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","name":"Diego Jevaux","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cheesecakelabs.com\/blog\/#\/schema\/person\/image\/","url":false,"contentUrl":false,"caption":"Diego Jevaux"},"description":"10 years of experience in Marketing and Sales in the Technology sector. My main purpose is help, support and structure efficient operations and also develop independent and multidisciplinary teams.","url":"https:\/\/cheesecakelabs.com\/blog\/autor\/diegojevaux\/"}]}},"_links":{"self":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/6719","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/comments?post=6719"}],"version-history":[{"count":1,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/6719\/revisions"}],"predecessor-version":[{"id":10172,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/6719\/revisions\/10172"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/media\/6720"}],"wp:attachment":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/media?parent=6719"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/categories?post=6719"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/tags?post=6719"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}