Intercept responses with chrome and puppeteer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
}) | |
})() |
Hi.
can I extract json from a interceptation?
i was asking for the exact same thing
https://gist.github.com/jsoverson/638b63542863596c562ccefc3ae52d8f#file-intercept-js-L19
set resourceType toXHR
to intercept api requests
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.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi.
can I extract json from a interceptation?