Local development blocked by captcha

razzius commented 1 year ago

We are happy to answer your questions about the code or discuss technical ideas.

Please complete the following checklist (by adding [x]):

[x] I have searched open and closed issues for duplicates
[X] This isn't a feature request
[x] This is not a report about my app not working as expected

When I try to run the app locally, I get stopped by a captcha which doesn't work because I'm on localhost:

Changing the localhost domain to something like localproton using /etc/hosts gives a different error, "unsupported browser":

Am I missing a step to run ProtonMail locally? This also relates to https://github.com/ProtonMail/WebClients/issues/284

andreymrt commented 1 year ago

I have a pull request that I'm trying to update to latest master branch and I am no longer able to test locally to confirm the change hasn't broken anything.

I'm being stopped by the same localhost detected. Please use a valid host error

For the hCaptcha, their documentation recommends adding an entry to the hosts file as @razzius has done. However that leads to unsupported browser?? both with latest Chrome and latest Firefox.

Tracing the unsupported error, it looks like this behavior was introduced by @mmso in https://github.com/ProtonMail/WebClients/commit/f4edf36f1898a44a657544f1b15841da32b78daa

Trying to bypass the the unsupported check via:

const isUnsupported = () => {
    return false;
}

sends me to a compatibility check, which also has me scratching my head

Looking at the compatibility check, code changes there seem to be old, so back to that patch from @mmso.

What's strange is that I'm running the official https://mail.proton.me 5.0.18.6 in the same web browser without any issues

further strangeness is that the official version is 5.0.18.6 and I can't find that tag in github as of today, so I have no idea if this bug continues in the actual master branch

xet7 commented 1 year ago

I was able to login to ProtonMail locally today, source code built from latest commit of this repo today, using these instructions: https://github.com/wekan/wekan/wiki/ProtonMail

I think this issue can be closed.

ZeroTricks commented 1 year ago

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. I run this in a docker container 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 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

EDIT: You don't need to do these steps anymore, just add 127.0.0.1, yourdomain or both to DOH_DOMAINS in /packages/shared/lib/constants.ts

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, like this
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.

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

xet7 commented 1 year ago

@ZeroTricks

Thanks! Finnish translations have not yet appeared to other official apps than calendar app, so your way helps with trying to check translations.

ZeroTricks commented 1 year ago

So, there is actually a way to get the captcha to work properly. It seems the normal api (api.proton.me) also provides the captcha functionality present on the relative apis (mail-api.proton.me etc), the former being already conveniently proxied through the webpack dev server and accessible via /api.

Revert any changes in url.ts, and just add 127.0.0.1, yourdomain or both to DOH_DOMAINS in /packages/shared/lib/constants.ts

The captcha should now just show in the iframe :ok_hand:

xet7 commented 1 year ago

@ZeroTricks

Can you add commit for that to your fork? I did not yet get it about what kind of change that would be.

ZeroTricks commented 1 year ago

@ZeroTricks

Can you add commit for that to your fork? I did not yet get it about what kind of change that would be.

Sure, this is the variable you need to change: export const DOH_DOMAINS = ['.compute.amazonaws.com', '127.0.0.1'];

https://github.com/ZeroTricks/Proton-WebClients/blob/f10ed012034904765354759ce60773170b3afffd/packages/shared/lib/constants.ts#L956

jonhermansen commented 9 months ago

I left a comment on the most recent related issue, on my end I am able to login and test locally, without any local modifications: https://github.com/ProtonMail/WebClients/issues/343#issuecomment-1751959397

ProtonMail / WebClients