如何绕过CSP（内容安全策略）使用puppeteer的API page.addScriptTag？

Question

场景：

我使用puppeteer在无头模式下启动了Chrome，并且使用跨域JavaScript文件调用page.addScriptTag。现在，如果开放网站有CSS设置并限制只有相同的原始javascript标签，我怎么能绕过这个使用puppeteer API？

Answer 1

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

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

以下是最初来自github问题跟踪器的片段。

将“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)