The only future of web applications is with SSL and TLS however this is a nightmare for me and many other web application developers. When we moved all our applications to use secure communications always it became difficult to debug the web application and web api. Luckily Wireshark helps us solve this problem. Currently any secure traffic captured by Wireshark looks like this.

 

a picture showing normal packet capture using WireShark

Normal SSL Traffic Capture

 

The previous versions allowed to decrypt the secure traffic that used RSA only if the private key could be provided to Wireshark but it is no longer possible to decrypt traffic with just the private keys. This is where Session Key Logging comes into the picture. The browsers that we care about (Chrome and Firefox) support logging symmetric session key which is then used by Wireshark to decrypt the secure traffic.

 

Enable Session Key Logging

  • This could be done by simply by adding an environment variable. To add an environmental variable in Windows go to Computer Properties. One way to reach there is by Right-Clicking the My PC and select Properties.

 

a picture showing how to open computer properties

My PC Properties

 

  • Then Select Advanced System Setting

 

a picture showing where to click to open Advanced System Settings

Advanced System Settings

 

 

  • Followed by selecting Environment Variables
a picture showing where to click to open Environment variable sin Windows

Environment Variables

 

  • Now add a new User Environment Variable.

 

a picture showing way to add new user environment variable SSLKEYLOGFILE

SSLKEYLOGFILE User Variable

 

    Note – Restart your browser so that the log file is created.

  • Now that we have our environment variable setup. Let go to Wireshark and configure it read these keys to decrypt traffic. To do that go to Edit –> Preferences

 

a showing where to open wireshark preferences from menu

Wireshark preferences menu

 

  • Navigate to Protocols –> SSL. Browse to the path where you specified the log file to be created and select the file.
a picture showing where to specify the session keys log file in wireshark

wireshark ssl keys

 

  • Now we are all set to decrypt the secure traffic in wireshark. Start capturing traffic with Wireshark and select any TLS or SSL packet to decrypt.

 

a picture showing normal ssl packet details captured by wireshark

Normal SSL Traffic Capture

 

  • But when you move to the Decrypted SSL you would be able to see the decrypted traffic.

 

a picture showing decrypted packet in wireshark

Decrypted Packet

 

Hope this helps you with your work with secure web packets.

 

Any questions, comments and feedback is always welcome.

 

All of us need to capture the screenshot of the browser one time or another and I have used many third party freemium extensions over time but nothing could be as good as something built in to the browser itself.

Chrome now includes a way to capture the screen shot through Dev Tools. To Open Dev Tools Press F12 or  Ctrl + Shift + I or from the hamburger menu in Chrome select More Tools –> Developer Tools

a picture showing how to open Developer Tools in Chrome form hambuger menu

Developer Tools

 

Click on device toggle to select device mode

 

a picture should where to toggle device mode in Chrome

Device Toggle

 

Select the Device to capture the screenshot

a picture showing where to select device in chrome device mode window

Device Select

 

Go to 3 dots menu on the right and select Capture Screenshot.

 

a picture showing where to find the Capture Screenshot option

Capture Screenshot

 

And volla. there you have your screenshot.

 

a picture of the screenshot capture in chrome with device selected as iPhone

Sreenshot iPhone

 

Note – If you not want the device border then you could disable it from the 3 dots menu in the right

 

a picture showing where to hide the device frame in chrome

Hide Device Frame

 

I know what you are thinking. What if I want the screenshot in a desktop / laptop browser size and not a device. There is a simple way to do that. In the Device selection menu select Responsive

 

a picture showing where to select Device as Responsive in Chrome device menu in dev tools

Responsive Device

 

Now drag to resize the area of the responsive device and then click on capture screenshot.

 

a picture showing the points to grab to resize responsive area in chrome device

Resize Device

 

Ans here is your screenshot.

 

a screenshot capture using chrome

Screnshot Responsive

 

Hope this helps you. Any feedback, questions and comments are welcome.