Upload file doesn't work because website's CSP declines data urls

[VikramTiwari]

Steps to reproduce

Tell us about your environment:

• Puppeteer version: 2.1.1
• Platform / OS version: macOS
• URLs (if applicable): hire.lever.co/candidates (not public)
• Node.js version: 12.16.1

What steps will reproduce the problem?

Please include code that reproduces the issue.

1. Try to upload a file using elementHandle.uploadFile
2. It loads the file internally as a data URL before uploading the file
3. Look at the website's console log where we see the CSP error

What is the expected result?
File gets uploaded properly and is not blocked by CSP

I think this might be outside the scope of puppeteer team but I was wondering if there are ways to get around this. Thanks!

[VikramTiwari]

For folks coming to this, you can use DOM.setFileInputFiles as a possible strategy. Though I would like to see puppeteer support that through it's methods rather than converting the file to data URL.

[mathiasbynens]

We could essentially revert 6091a34 and continue to use DOM.setFileInputFiles like before. The other CDP changes w.r.t. file uploads did not need the changes in 6091a34 after all.

[VikramTiwari]

I think that would be a good idea. A lot of issues have happened since that I think can be attributed to this change.

Also, I understand the commit message but I am unable to understand where is that case applicable. Was this causing issues when doing i18n input fields or something similar?

[VikramTiwari]

I am also very curious to understand why page.setBypassCSP didn't work for this.

[VikramTiwari]

Hey @sivasait-opex Here's a sample for using CDP for animations. https://github.com/puppeteer/puppeteer/blob/v2.1.1/docs/api.md#class-cdpsession

[VikramTiwari]

Sorry, the error is pretty self explanatory. You should be able to figure out more from the error message.

[mathiasbynens]

#5654

[paullewis]

This should be fixed as of 532ae57 since we use DOM.setFileInputFiles internally again.