如何使用 puppeteer 的 API page.addScriptTag 绕过 CSP(Content-Security-Policy)？答案

【问题标题】：How to bypass CSP(Content-Security-Policy) using puppeteer's API page.addScriptTag?如何使用 puppeteer 的 API page.addScriptTag 绕过 CSP(Content-Security-Policy)？
【发布时间】：2017-10-19 15:51:05
【问题描述】：

场景：

我在无头模式下使用 puppeteer 启动的 chrome，并使用跨域 javascript 文件调用 page.addScriptTag。现在，如果打开站点设置了 csp 并且仅限制相同来源的 javascript 标签，我如何使用 puppeteer API 绕过它？

【问题讨论】：

标签： google-chrome headless puppeteer

【解决方案1】：

用途：

await page.setBypassCSP(true)

Documentation

【讨论】：

【解决方案2】：

这是我的第一个 stackoverflow 贡献，请怜悯我。我发现这项工作可以让您通过 CSP，Here。

基本思想是你拦截页面请求并使用像 node-fetch 这样的库来发出请求并在将 CSP 标头传递回 chrome 时禁用它。

这是最初来自 github 问题跟踪器的 sn-p。

将“example.com”替换为需要禁用 CSP 的网站。

const fetch = require('node-fetch')

const requestInterceptor = async (request) => {
  try {
    const url = request.url()
    const requestHeaders = request.headers()
    const acceptHeader = requestHeaders.accept || ''
    if (url.includes("example.com") && (acceptHeader.includes('text/html'))) {
      const cookiesList = await page.cookies(url)
      const cookies = cookiesList.map(cookie => `${cookie.name}=${cookie.value}`).join('; ')
      delete requestHeaders['x-devtools-emulate-network-conditions-client-id']
      if (requestHeaders.Cookie) {
        requestHeaders.cookie = requestHeaders.Cookie
        delete requestHeaders.Cookie
      }
      const theseHeaders = Object.assign({'cookie': cookies}, requestHeaders, {'accept-language': 'en-US,en'})

      const init = {
        body: request.postData(),
        headers: theseHeaders,
        method: request.method(),
        follow: 20,
      }
      const result = await fetch(
        url,
        init,
      )
      const resultHeaders = {}
      result.headers.forEach((value, name) => {
        if (name.toLowerCase() !== 'content-security-policy') {
          resultHeaders[name] = value
        } else {
          console.log('CSP', `omitting CSP`, {originalCSP: value})
        }
      })
      const buffer = await result.buffer()
      await request.respond({
        body: buffer,
        resultHeaders,
        status: result.status,
      })
    } else {
      request.continue();
    }
  } catch (e) {
    console.log("Error while disabling CSP", e);
    request.abort();
  }
}

await page.setRequestInterception(true)
page.on('request', requestInterceptor)

【讨论】：