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' 
}

Or morph to function based:

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

Or specific to js

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

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

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

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

First run

It will prompt you to create demo routes

>>> mitm-play -s

Create ~/user-route (Y/n)? y [Enter]

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

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

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' }

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

route = { tags: ['no-ads'],...

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
}