Use readFileSync() instead of addScriptTag() to load bundle.js on pages with CSP

[fabernovel-fnguyen]

When using GreenIT-Analysis-cli, I encountered errors when analysing some webpages due to Content Security Policy (CSP), including the following:

• https://github.com/
• https://heart.fabernovel.com/

On other pages I am able to launch analyses without any issue and generate a results.xlsx file.

Here is an example of such error:

 Analysing                [========================                ] 60%     Remaining: 2.8s     Time: 4.1s
Error while analyzing URL https://github.com/ :  Error: Evaluation failed: ReferenceError: launchAnalyse is not defined
    at __puppeteer_evaluation_script__:1:7
    at ExecutionContext._evaluateInternal (/Users/floriannguyen/Work/GreenIT-Analysis-cli/node_modules/puppeteer/lib/cjs/puppeteer/common/ExecutionContext.js:217:19)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async ExecutionContext.evaluate (/Users/floriannguyen/Work/GreenIT-Analysis-cli/node_modules/puppeteer/lib/cjs/puppeteer/common/ExecutionContext.js:106:16)
    at async analyseURL (/Users/floriannguyen/Work/GreenIT-Analysis-cli/cli-core/analysis.js:92:18)
Error while analyzing URL https://github.com/ :  Error: Evaluation failed: ReferenceError: launchAnalyse is not defined
    at __puppeteer_evaluation_script__:1:7
    at ExecutionContext._evaluateInternal (/Users/floriannguyen/Work/GreenIT-Analysis-cli/node_modules/puppeteer/lib/cjs/puppeteer/common/ExecutionContext.js:217:19)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async ExecutionContext.evaluate (/Users/floriannguyen/Work/GreenIT-Analysis-cli/node_modules/puppeteer/lib/cjs/puppeteer/common/ExecutionContext.js:106:16)
    at async analyseURL (/Users/floriannguyen/Work/GreenIT-Analysis-cli/cli-core/analysis.js:92:18)
    at async createJsonReports (/Users/floriannguyen/Work/GreenIT-Analysis-cli/cli-core/analysis.js:280:19)
    at async analyse_core (/Users/floriannguyen/Work/GreenIT-Analysis-cli/commands/analyse.js:70:19)
Error while analyzing URL https://github.com/ :  Error: Evaluation failed: ReferenceError: launchAnalyse is not defined
    at __puppeteer_evaluation_script__:1:7
    at ExecutionContext._evaluateInternal (/Users/floriannguyen/Work/GreenIT-Analysis-cli/node_modules/puppeteer/lib/cjs/puppeteer/common/ExecutionContext.js:217:19)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async ExecutionContext.evaluate (/Users/floriannguyen/Work/GreenIT-Analysis-cli/node_modules/puppeteer/lib/cjs/puppeteer/common/ExecutionContext.js:106:16)
    at async analyseURL (/Users/floriannguyen/Work/GreenIT-Analysis-cli/cli-core/analysis.js:92:18)
    at async createJsonReports (/Users/floriannguyen/Work/GreenIT-Analysis-cli/cli-core/analysis.js:280:19)
    at async analyse_core (/Users/floriannguyen/Work/GreenIT-Analysis-cli/commands/analyse.js:70:19)

These errors led me to some investigation. I believe that the addScriptTag() function of puppeteer can be troublesome on webpages with CSP (see Puppeteer's issue 1229 and issue 1219), and therefore the use of this function in analysis.js causes the bundle.js script to fail loading, which is why launchAnalyse() is found to be not defined (see error above).

As per the issues I mentioned above, I believe the following code would constitute a good workaround, as I was able to run successful analyses for all the pages I tested using it:

// current code
let script = await page.addScriptTag({ path: path.join(__dirname,'../dist/bundle.js')});
await script.evaluate(x=>(x.remove()));

// working alternative
await page.evaluate(fs.readFileSync(path.join(__dirname,'../dist/bundle.js'), 'utf8'))

Would it be possible to review and change this portion of code to allow GreenIT to be used on pages with CSP as well?

Thank you

[jpreisner]

Interesting, thanks @fabernovel-fnguyen. I will test your solution.