Skip to content

Instantly share code, notes, and snippets.

@jsoverson
Created February 19, 2019 21:28
Show Gist options
  • Save jsoverson/638b63542863596c562ccefc3ae52d8f to your computer and use it in GitHub Desktop.
Save jsoverson/638b63542863596c562ccefc3ae52d8f to your computer and use it in GitHub Desktop.
Intercept responses with chrome and puppeteer
const puppeteer = require('puppeteer');
const prettier = require('prettier');
const atob = require('atob');
const btoa = require('btoa');
const scriptUrlPatterns = [
'*'
]
const requestCache = new Map();
async function interceptRequestsForPage(page) {
const client = await page.target().createCDPSession();
await client.send('Network.enable');
await client.send('Network.setRequestInterception', {
patterns: scriptUrlPatterns.map(pattern => ({
urlPattern: pattern, resourceType: 'Script', interceptionStage: 'HeadersReceived'
}))
});
client.on('Network.requestIntercepted', async ({ interceptionId, request, responseHeaders, resourceType }) => {
console.log(`Intercepted ${request.url} {interception id: ${interceptionId}}`);
const response = await client.send('Network.getResponseBodyForInterception',{ interceptionId });
const contentTypeHeader = Object.keys(responseHeaders).find(k => k.toLowerCase() === 'content-type');
let newBody, contentType = responseHeaders[contentTypeHeader];
if (requestCache.has(response.body)) {
newBody = requestCache.get(response.body);
} else {
const bodyData = response.base64Encoded ? atob(response.body) : response.body;
try {
if (resourceType === 'Script') newBody = prettier.format(bodyData, { parser: 'babel' })
else newBody === bodyData
} catch(e) {
console.log(`Failed to process ${request.url} {interception id: ${interceptionId}}: ${e}`);
newBody = bodyData
}
requestCache.set(response.body, newBody);
}
const newHeaders = [
'Date: ' + (new Date()).toUTCString(),
'Connection: closed',
'Content-Length: ' + newBody.length,
'Content-Type: ' + contentType
];
console.log(`Continuing interception ${interceptionId}`)
client.send('Network.continueInterceptedRequest', {
interceptionId,
rawResponse: btoa('HTTP/1.1 200 OK' + '\r\n' + newHeaders.join('\r\n') + '\r\n\r\n' + newBody)
});
});
}
(async function main(){
const browser = await puppeteer.launch({
headless:false,
defaultViewport:null,
devtools: true,
args: ['--window-size=1920,1170','--window-position=0,0']
});
const page = (await browser.pages())[0];
await interceptRequestsForPage(page);
browser.on('targetcreated', async (target) => {
const page = await target.page();
await interceptRequestsForPage(page);
})
})()
@bmihm
Copy link

bmihm commented May 19, 2020

Hi.
can I extract json from a interceptation?

@Arrow66
Copy link

Arrow66 commented May 21, 2020

Hi.
can I extract json from a interceptation?

i was asking for the exact same thing

@rusintez
Copy link

@mpolutta
Copy link

I was hoping to use this in a walled off environment (Gov). I believe it uses NodeJs. I can create the environment on a dev machine where I have full control, so that I can use NPM to download Puppeteer and any other dependencies, but guessing that I will still need NodeJs to run the app. Let me know if you see any way around this. No NodeJs on the gov dev box. No Fiddler (for AutoResponder). I just need a less painful way to debug JavaScript without re-uploading to the server.

@Zcamm7417
Copy link

TypeError: Cannot read properties of null (reading 'target')
I keep having this error why??!

@JenieX
Copy link

JenieX commented Jan 20, 2023

TypeError: Cannot read properties of null (reading 'target') I keep having this error why??!

  browser.on('targetcreated', async function (target) {
    const page = await target.page();
    if (page) {
      await interceptRequestsForPage(page);
    }
  });

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment