search

ProtonMail / WebClients

Monorepo hosting the proton web clients
GNU General Public License v3.0
4.44k stars 561 forks source link

Today tried, Local development blocked by captcha #322

Closed xet7 closed 1 year ago

xet7 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]):

Hi,

1. Versions I am using

I'm using:

2. Testing translations did work 2 weeks ago, but not anymore

It did work 2 weeks ago https://github.com/ProtonMail/WebClients/issues/320#issuecomment-1525618550 , but not anymore.

3. I added newest Finnish translations

4. These both commands work the same way:

NODE_ENV=development yarn workspace proton-mail start

yarn workspace proton-mail start

5. When I start it, there is login screen.

6. After username and password, there is this captcha at localhost like issue #304

localhost

7. Captcha does not show anything, it keeps spinning, it does not work

HumanVerification

8. If I try local computer IP address URL, it says unsupported browser

[webpack-dev-server] On Your Network (IPv4): http://192.168.0.20:8080/

unsupported-browser

9. How to test newest translations?

xet7 commented 1 year ago

This is not solved yet.

Instead, Proton has started to add some of current translatations directly to apps and webpages, so by looking at those, it is possible to improve translations by looking at current translation. This started from Proton Calendar’s Android app, where Finnish translations appeared. This way, I do not need to compile from source, I can see directly what is where, and then improve translations. This is very helpful and welcome, making translating much easier ! Thanks a lot !

ZeroTricks commented 1 year ago

I wrote some comments on how to solve the captcha in https://github.com/ProtonMail/WebClients/issues/304#issuecomment-1613650919 before i realized that issue was closed. Can you try and see if it works?

xet7 commented 1 year ago

@ZeroTricks

Yes I will try. Thanks a lot !

xet7 commented 1 year ago

@ZeroTricks

Yes this works, I was able to login to Finnish translated ProtonMail, using Firefox at http://127.0.0.1 .

I was able to login only, because I am a Javascript developer. But these kind of steps are way too complex for those translators that are not developers.

Thanks a lot !

dimitri-bourreau commented 1 year ago

Hi @xet7 and @ZeroTricks , can you confirm following @ZeroTricks comment still works today?

Thanks!

With latest commit on main being 380e5f0a I fail to log in locally directly or via Docker: both don't show the captcha. 🫣

Concerning the captcha, I used both the new and old @ZeroTricks tips. With Firefox and Chromium on MacOS. ✌️

xet7 commented 1 year ago

@dimitri-bourreau

Thanks! I will try it.

xet7 commented 1 year ago

@dimitri-bourreau

I can not get it to work.

ProtonMail etc is a lot of code, and they add additional security measures very often. This local development has stopped working at least 2 times, because of all the code changes.

Now that Finnish translations have been released to Proton WebClients, I do not see a need for me to spend more time figuring out all these code changes.

If I would make my own email service, I would use minimal HTML4/CSS, and not this much frontend code. But I'm already busy coding other FOSS.

ZeroTricks commented 1 year ago

I think it might be related to Proton switching from hCaptcha to their own captcha (the puzzle). The new one is served through Proton's api, which redirects you to a login page when accessed from your local environment. So, after logging in, a new login form is shown within the capcha iframe:

captcha

Notice the page source: there's an iframe for the login page within the captcha iframe:

captcha-source

Manually solving the captcha in a new page and passing back the token still seems to work, however:

The best I can come up with is this:

  1. Add the following code to /packages/components/containers/api/humanVerification/Captcha.tsx at line 54: 
    
    const workingSrc = src.replace(/^https?:\/\/.*?(?=\/)/, 'https://mail-api.proton.me');
    const popup = window.open(workingSrc);
    (window as any).submitCaptcha = (token:string) => {
        popup?.close();
        onSubmit(token);
    };
    alert(`Execute in captcha devtools before solving captcha:
        \nwindow.addEventListener('message', ({data: {token}}) => token && token.length > 64 && alert(\`Run in login tab:\\n\\nsubmitCaptcha("\${token}")\` ), false);`
    );


As seen in https://github.com/ProtonMail/WebClients/commit/b8b030f55a766bba9ccb3612da6523d39e61b8df . (You can ignore the other comments on login strategies in that commit)

2. Go to http://127.0.0.1, login
3. Copy js code that comes up in alert
4. Capcha page opens (allow possibly blocked popups)
5. Open devtools for captcha page, paste js code
6. solve captcha
7. copy js code from captcha alert
8. open devtools on login page, paste js code
9. code should be valid, you're logged in
dimitri-bourreau commented 1 year ago

@ZeroTricks Thanks for your help, but the puzzle is not displayed so I can't get any token.

It's alright, I won't fight it.

It's sad for an open source project to be so hard to use locally, but I've seen way worst!