diff --git a/ProtonMail.md b/ProtonMail.md index 6edb3b4..ac53f93 100644 --- a/ProtonMail.md +++ b/ProtonMail.md @@ -107,82 +107,83 @@ From ZeroTricks from - https://github.com/ProtonMail/WebClients/issues/304#issuecomment-1613650919 - https://github.com/ProtonMail/WebClients/issues/322#issuecomment-1613666913 -> So, I have been playing around to see which configurations currently work and which don't, regarding captcha, 'unsupported browser' and CORS errors. Follow steps below to successfully login: -> ### Development environment -> -> Make sure that you have a development environment set up as described [here](https://github.com/ProtonMail/WebClients). I run this in a [docker container](https://github.com/ZeroTricks/Proton-WebClients/blob/main/docker-compose.yml) with: -> -> ``` -> docker compose run proton-dev yarn install #initial run -> docker compose up proton-drive-dev -> ``` -> -> ### Access -> -> **Webaccess only works via `http://127.0.0.1` or `https://somedomainyouown`** . You can put an nginx proxy or something similar in front of the app that deals with certificates and the such. -> #### Urls that don't work: -> -> * IPs other than 127.0.0.1, ie `http://172.17.0.1` → unsupported browser -> Circumvent this by tunneling to 127.0.0.1:80 with socat, ssh tunnel, docker port,... so you can access 127.0.0.1 in browser -> -> * `http://somehost` → unsupported browser -> -> * `http://localhost` → Captcha shows with warning about localhost, spins forever -> -> -> As seen in screenshots in above. -> -> The `unsupported browser` errors might have to do with the client packages for cryptography and storage not being available on http. You may try your luck with [adding fallback packages](https://webpack.js.org/configuration/resolve/#resolvefallback) to /packages/pack/webpack.config.js (or to the specific app's webpack.config.js). (I was sure at one point i needed this for 127.0.0.1 too but now i run it without any changes. Most fallback packages should be available as yarn installed them earlier). -> ### Captcha -> -> A wrong api url and cross-domain blocking policies will prevent loading the captcha iframe. You can circumvent this by solving the captcha in a separate tab and manually passing the security token. Try something like this: -> -> * Hardcode the api url by returning `mail-api.proton.me` in [/packages/shared/lib/helpers/url.ts](https://github.com/ProtonMail/WebClients/blob/main/packages/shared/lib/helpers/url.ts#L187), like [this](https://github.com/ZeroTricks/Proton-WebClients/blob/811669b44954d9873808fb1f4ccf30975dbeffd2/packages/shared/lib/helpers/url.ts#L190) -> -> * Open `http://127.0.0.1` or `https://thedomainyouown` in your browser -> -> * Log in -> -> * The human verification popup is show, with an empty iframe -> -> * Click 'Open site in new window' or find the iframe source in your devtools (it looks like this: `https://mail-api.proton.me/core/v4/captcha?Token=...`) and open it in a new tab. -> -> * If you run your app on a non-default port (80, 443) and it was added to this link, remove it -> -> * BEFORE solving the captcha, run the following code in the devtools of the captcha's page. (If you don't know what it does, don't do it.) -> -> -> ``` -> window.addEventListener('message', ({data: {token}}) => { -> if(!token) -> return; -> const code = `//Run in main tab devtools: -> \nwindow.dispatchEvent(new MessageEvent("message", { -> origin: '${window.origin}'.replace(/^https?:/, location.protocol), -> source: $('iframe').contentWindow , -> data: { -> type: 'pm_captcha', -> token: "${token}" -> } -> }))`; -> console.log(code); -> alert(code); -> }, -> false); -> ``` -> -> * Solve the captcha and copy the generated code from alert or devtools -> -> * Run the generated code in the main tab -> -> * Enter 2FA if it is enabled -> -> * You're logged in! -> -> -> It's a cumbersome process, maybe someone knows an easier way around this. Opening the captcha page in a popup and listening for the token is afaik not possible due to the same-origin policy again. At least if you stay logged in you won't have to enter the captcha every time. -> -> Tested with proton-mail and proton-drive. All my changes were done [in this fork](https://github.com/ProtonMail/WebClients/compare/main...ZeroTricks:Proton-WebClients:main). -> -> Extra note: CORS errors will prevent proton-drive over https to do any file operations (up/download, preview....). Not sure if this is a bug or not. Up/downloads work as intended on `http://127.0.0.1` +So, I have been playing around to see which configurations currently work and which don't, regarding captcha, 'unsupported browser' and CORS errors. Follow steps below to successfully login: +### Development environment + +Make sure that you have a development environment set up as described [here](https://github.com/ProtonMail/WebClients). I run this in a [docker container](https://github.com/ZeroTricks/Proton-WebClients/blob/main/docker-compose.yml) with: + +``` +docker compose run proton-dev yarn install #initial run +docker compose up proton-drive-dev +``` + +### Access + +**Webaccess only works via `http://127.0.0.1` or `https://somedomainyouown`** . You can put an nginx proxy or something similar in front of the app that deals with certificates and the such. + +#### Urls that don't work: + +* IPs other than 127.0.0.1, ie `http://172.17.0.1` → unsupported browser + Circumvent this by tunneling to 127.0.0.1:80 with socat, ssh tunnel, docker port,... so you can access 127.0.0.1 in browser + +* `http://somehost` → unsupported browser + +* `http://localhost` → Captcha shows with warning about localhost, spins forever + +As seen in screenshots in above. + +The `unsupported browser` errors might have to do with the client packages for cryptography and storage not being available on http. You may try your luck with [adding fallback packages](https://webpack.js.org/configuration/resolve/#resolvefallback) to /packages/pack/webpack.config.js (or to the specific app's webpack.config.js). (I was sure at one point i needed this for 127.0.0.1 too but now i run it without any changes. Most fallback packages should be available as yarn installed them earlier). + +### Captcha + +A wrong api url and cross-domain blocking policies will prevent loading the captcha iframe. You can circumvent this by solving the captcha in a separate tab and manually passing the security token. Try something like this: + +* Hardcode the api url by returning `mail-api.proton.me` in [/packages/shared/lib/helpers/url.ts](https://github.com/ProtonMail/WebClients/blob/main/packages/shared/lib/helpers/url.ts#L187), like [this](https://github.com/ZeroTricks/Proton-WebClients/blob/811669b44954d9873808fb1f4ccf30975dbeffd2/packages/shared/lib/helpers/url.ts#L190) + +* Open `http://127.0.0.1` or `https://thedomainyouown` in your browser + +* Log in + +* The human verification popup is show, with an empty iframe + +* Click 'Open site in new window' or find the iframe source in your devtools (it looks like this: `https://mail-api.proton.me/core/v4/captcha?Token=...`) and open it in a new tab. + +* If you run your app on a non-default port (80, 443) and it was added to this link, remove it + +* BEFORE solving the captcha, run the following code in the devtools of the captcha's page. (If you don't know what it does, don't do it.) + + +``` +window.addEventListener('message', ({data: {token}}) => { + if(!token) + return; + const code = `//Run in main tab devtools: + \nwindow.dispatchEvent(new MessageEvent("message", { + origin: '${window.origin}'.replace(/^https?:/, location.protocol), + source: $('iframe').contentWindow , + data: { + type: 'pm_captcha', + token: "${token}" + } + }))`; + console.log(code); + alert(code); + }, + false); +``` + +* Solve the captcha and copy the generated code from alert or devtools + +* Run the generated code in the main tab + +* Enter 2FA if it is enabled + +* You're logged in! + + +It's a cumbersome process, maybe someone knows an easier way around this. Opening the captcha page in a popup and listening for the token is afaik not possible due to the same-origin policy again. At least if you stay logged in you won't have to enter the captcha every time. + +Tested with proton-mail and proton-drive. All my changes were done [in this fork](https://github.com/ProtonMail/WebClients/compare/main...ZeroTricks:Proton-WebClients:main). + +Extra note: CORS errors will prevent proton-drive over https to do any file operations (up/download, preview....). Not sure if this is a bug or not. Up/downloads work as intended on `http://127.0.0.1` \ No newline at end of file