DEV Community

Widi Harsojo
Widi Harsojo

Posted on

Man in the middle using Playwright

#javascript #playwright #mitm #devtools

Prologue

As a Front End developer, I was wondering: if there is a MITM tool targeted to WEB Developer for easily intercept request and manipulate (mock, cache, logs, modify by content-type) the request / response, having capability of HOT RELOADING rule(s) with additional functionality live in Devtools to edit/enhance/toggle the rule(s).

These have been my Front End Developer needs:

It's a rule based routing and scripted with JavaScript Object Literal.

Intercept Live JS / CSS and substitute with local development code contains an inline-source-map

Manipulate headers either request or response, ie: changing Content Security Policy (CSP) rule

Helper to add Javascript code into the HTML response easily ie: add to the header or at the end of body

Define a tag to some rules and during runtime it can be toggle to enable/disable rule

A flexible rule should start with simple then extend as needed:

Start with simple URL matching and response with an empty string:

response: { { 'GET:doubleclick.net': '' } // GET url contains 'doubleclick.net' { 'doubleclick.net': '' } // match url contains 'doubleclick.net'  }
Enter fullscreen mode Exit fullscreen mode

Or morph to function based:

response: { 'doubleclick.net': { response(resp) { const body = ''; return { body }; } } }
Enter fullscreen mode Exit fullscreen mode

Or specific to js

js: { 'doubleclick.net': { response(resp) { const body = ''; return { body }; } } }
Enter fullscreen mode Exit fullscreen mode

Not replacing, just need to inject at the end of response payload with special syntax =>

const jscode = 'alert(0)'; ... js: { 'doubleclick.net': `=>${jscode}` }
Enter fullscreen mode Exit fullscreen mode

Introducing Mitm-Play

TLDR; the term "Man in the Middle" can be check to MITM related articles published by: cyris, Kyle Parisi, Kevin Cui.

Mitm-Play is a MITM leaning toward my need as FE Developer during Development or debugging PROD, detail documentation can be found on github, utilize Playwright route('**', EventHandler) + Chrome Plugins

Installation

Mitm-Play is a CLI App, the installation should be on global scope

npm i -g mitm-play
Enter fullscreen mode Exit fullscreen mode

First run

It will prompt you to create demo routes

>>> mitm-play -s Create ~/user-route (Y/n)? y [Enter]
Enter fullscreen mode Exit fullscreen mode

Next, chromium will be launch and auto navigate to https://keybr.com. Open Chrome Devtools to access Mitm-Play plugin.

Alt Text

At first launch no rules getting applied, as we can see on the image above in Devtool section: mitm-play/Tags, there are no tags getting checked

Alt Text

Some keys having :no-ads and it is a tags attached to mock & css rules, and the tags will be available as a checkbox option to enable/disable rule(s). The state is determined by tags key in which having an empty array, so no rule getting applied.

route = { tags: [], 'mock:no-ads', 'css:no-ads' }
Enter fullscreen mode Exit fullscreen mode

To enable at first, either delete the tags key, or add corresponding tags: ['no-ads']

route = { tags: ['no-ads'],...
Enter fullscreen mode Exit fullscreen mode

Epilogue

This introduction may be too simple interception use case, but I think it serve at least minimum demo that can be showcase immediately after installation, later time can be expand to different scenario with different rules.

To get the idea, I end this post with the skeleton of route :

route = { url: '', urls: {}, title: '', jsLib: [], workspace: '', screenshot: {}, //user interaction rules & observe DOM-Element skip: [], //start routing rules proxy: [], //request with proxy noproxy: [], nosocket:[], request: {}, mock: {}, cache: {}, log: {}, html: {}, json: {}, css: {}, js: {}, response:{}, //end routing rules }
Enter fullscreen mode Exit fullscreen mode

Top comments (0)