puppeteer去掉同源策略及請求攔截

junior發表於2020-08-19

puppeteer是一個基於cdp協議的功能強大的工具，在自動化測試和爬蟲方面應用廣泛，這裡談一下如何在puppeteer中關掉同源策略和進行請求攔截。

同源策略

同源策略為web 安全提供了有力的保障，但是有時候我們需要在localhost的情況下訪問伺服器的api，這時就需要去掉同源策略的限制，讓http暢通無阻。

chrome的啟動是支援很多引數的，其中一個就是來禁用同源策略的。當我們在chrome啟動時加入--disable-web-security這個引數時，chrome的同源策略就會被關閉。對於關閉puppetter的同源策略就更簡單了，只要在launch方法中加入這個引數就可以了：

  const browser = await puppeteer.launch({
    headless: false,
    devtools: true,
    defaultViewport: {
      width: 1280,
      height: 720,
    },
    args: [
      '--disable-web-security'
    ],
  });

更多有用的引數可以參考這裡.

然後接下來談談攔截請求

page.setRequestInterception

可以攔截請求的就是這個方法了。我們來看官方給出的一段程式碼：

const puppeteer = require('puppeteer');

puppeteer.launch().then(async browser => {
  const page = await browser.newPage();
  await page.setRequestInterception(true);
  
  page.on('request', interceptedRequest => {
    if (interceptedRequest.url().endsWith('.png') || interceptedRequest.url().endsWith('.jpg'))
      interceptedRequest.abort();
    else
      interceptedRequest.continue();
  });
  await page.goto('https://example.com');
  await browser.close();
});

這裡，我們首先開啟了攔截請求，然後對url以jpg或者png結尾的，呼叫abort(),使這個請求失敗，其他的則繼續發到伺服器。當然，如果只是這麼簡單的話，是說明不了這個方法的強大之處的，因為我們還可以直接返回一個響應。舉個例子：

await page.setRequestInterception(true);
page.on('request', request => {
  request.respond({
    status: 404,
    contentType: 'text/plain',
    body: 'Not Found!'
  });
});

對方不想說話，並丟過來一個404。當然，除了404，其他的200，301，500也都是可以的。

還可以在請求過程中''添油加醋''：

  request.url() // 讀取url
  request.headers() // 讀取headers
  request.postData() // 讀取postData
  request.method() // 讀取postData
 request.continue({
    url: '',
    method: '',
    postData: {},
    headers: {}
 })

你可以在請求過程中替換一些請求的引數，比如把url中的baidu替換成google，改掉postData或者headers裡的一些資訊，emmm，我忽然有了一個大膽的想法（完）。

參考：
https://pptr.dev/#?product=Puppeteer&version=v5.2.1&show=api-pageevaluatehandlepagefunction-args
https://zhaoqize.github.io/puppeteer-api-zh_CN/#?product=Puppeteer&version=v5.2.1&show=api-requestcontinueoverrides

相關文章