DEV Community

Widi Harsojo
Widi Harsojo

Posted on

2 1

Man in the middle using Playwright

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

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)