Avviamo la nostra istanza di Webogram con il proxy tramite nginx

Ciao, Habr!

Recentemente mi sono trovato in una situazione in cui era necessario lavorare all'interno di una rete aziendale con accesso limitato a Internet e come puoi intuire dal titolo, Telegram era bloccato. Sono sicuro che questa situazione sia familiare a molti.

Posso tranquillamente fare a meno dei messenger, tuttavia Telegram mi serviva per lavoro. Non era possibile installare il client sulla macchina di lavoro, né usare il laptop personale. Un'altra soluzione sarebbe stata utilizzare la sua versione web ufficiale, ma come puoi immaginare, non era accessibile. Escludo subito l'opzione di cercare uno specchio non ufficiale (sperando per ragioni abbastanza ovvie).

Per fortuna, Webogram è un progetto open source il cui codice sorgente è disponibile su github il suo autore (a cui vanno enormi ringraziamenti!)
L'installazione e l'avvio non sono complessi, tuttavia, in una rete con accesso bloccato ai server di Telegram, la tua esperienza sarà probabilmente deludente piuttosto che positiva, poiché la versione web invia richieste ai server di Telegram dalla macchina dell'utente.

Fortunatamente, è abbastanza semplice (ma non molto ovvio) risolvere questo problema. Vorrei avvisarti che non sono l'autore di questa soluzione. Sono riuscito a trovarla in una discussione, nella quale era stato trattato un problema simile al mio. La soluzione proposta dall'utente github tecknojock, mi ha aiutato molto, e sono sicuro che possa essere utile anche ad altri, quindi ho deciso di scrivere questo tutorial.

Di seguito troverai una guida passo passo per configurare il tuo specchio Webogram e impostare il proxy delle sue richieste verso i server di Telegram utilizzando nginx.

Come esempio, ho scelto un'installazione e un aggiornamento recenti di Ubuntu Server 18.04.3.

Attenzione: Questo tutorial non include istruzioni per la configurazione del dominio in nginx. Dovrai farlo autonomamente. Si presume che tu abbia già configurato un dominio con SSL, e che il server su cui stai per eseguire la configurazione abbia accesso ai server di Telegram (in qualsiasi modo tu preferisca)

Supponiamo che l'IP di questo server sia 10.23.0.3 e il nome di dominio sia mywebogram.localhost

Partendo da queste condizioni, fornirò esempi di configurazione. Ricorda di sostituire i valori con i tuoi.

Quindi, iniziamo:

Per avviare Webogram, abbiamo bisogno di nodejs. Per impostazione predefinita, se lo installiamo dai repository di Ubuntu, otterremo la versione 8.x di nodejs. Abbiamo bisogno della 12.x:

curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash - 
sudo apt update && sudo apt -y install nodejs

Scegliamo un luogo in cui basare il nostro Webogram.

Per esempio, lo posizioniamo nella radice della directory home. Per fare ciò, cloniamo il repository ufficiale sul nostro server:

cd ~ && git clone https://github.com/zhukov/webogram.git

Il passo successivo è installare tutte le dipendenze necessarie per avviare l'applicazione:

cd webogram && npm install

Proviamo a eseguire un avvio di prova. Esegui il comando:

npm start

Dopo di che, proviamo ad aprirlo nel browser

 http://10.23.0.3:8000/app/index.html

Se fino a questo punto hai fatto tutto correttamente, si aprirà la pagina di login di Webogram.

Ora dobbiamo configurare l'avvio dell'applicazione come servizio. Per fare ciò, creiamo un file

sudo touch /lib/systemd/system/webogram.service

apriamolo in un qualsiasi editor e diamo il seguente aspetto (inseriamo il nostro percorso fino a WorkDirectory)

[Unit]
Description=Webogram mirror
[Service]
WorkingDirectory=/home/tg/webogram
ExecStart=/usr/bin/npm start
SuccessExitStatus=143
TimeoutStopSec=10
Restart=on-failure
RestartSec=5
[Install]
WantedBy=multi-user.target

Dopo di che eseguiamo i seguenti comandi:

Applichiamo le modifiche

sudo systemctl daemon-reload

Attiviamo l'avvio automatico:

sudo systemctl enable webogram.service

Avviamo il servizio:

sudo systemctl start webogram.service

Dopo aver eseguito queste azioni, Webogram sarà disponibile sulla porta 8000.

Poiché configureremo l'accesso al nostro Webogram tramite nginx, chiuderemo la porta 8000 per le richieste esterne.

Utilizziamo l'utility udf (o qualsiasi altro metodo che ti è comodo):

sudo ufw deny 8000

Nel caso in cui tu decida di utilizzare udf, ma sia spento sul server, aggiungiamo altre regole (per evitare problemi) e attiviamo udf:

sudo ufw allow ssh
sudo ufw allow 80
sudo ufw allow 443
sudo ufw enable

Ora procediamo a modificare la configurazione di nginx.

Come ho già avvisato in precedenza, si presume che sul tuo server sia già configurato un dominio con ssl. Ti ricordo solo che dovrai aggiungere al file di configurazione del dominio per il corretto funzionamento:

server {
...
  location ^~ /pluto/apiw1/ {
    proxy_pass https://pluto.web.telegram.org/apiw1/;
  }
  location ^~ /venus/apiw1/ {
    proxy_pass https://venus.web.telegram.org/apiw1/;
  }
  location ^~ /aurora/apiw1/ {
    proxy_pass https://aurora.web.telegram.org/apiw1/;
  }
  location ^~ /vesta/apiw1/ {
    proxy_pass https://vesta.web.telegram.org/apiw1/;
  }
  location ^~ /flora/apiw1/ {
    proxy_pass https://flora.web.telegram.org/apiw1/;
  }
  location ^~ /pluto-1/apiw1/ {
    proxy_pass https://pluto-1.web.telegram.org/apiw1/;
  }
  location ^~ /venus-1/apiw1/ {
    proxy_pass https://venus-1.web.telegram.org/apiw1/;
  }
  location ^~ /aurora-1/apiw1/ {
    proxy_pass https://aurora-1.web.telegram.org/apiw1/;
  }
  location ^~ /vesta-1/apiw1/ {
    proxy_pass https://vesta-1.web.telegram.org/apiw1/;
  }
  location ^~ /flora-1/apiw1/ {
    proxy_pass https://flora-1.web.telegram.org/apiw1/;
  }
  location ^~ /DC1/ {
    proxy_pass http://149.154.175.10:80/;
  }
  location ^~ /DC2/ {
    proxy_pass http://149.154.167.40:80/;
  }
  location ^~ /DC3/ {
    proxy_pass http://149.154.175.117:80/;
  }
  location ^~ /DC4/ {
    proxy_pass http://149.154.175.50:80/;
  }
  location ^~ /DC5/ {
    proxy_pass http://149.154.167.51:80/;
  }
  location ^~ /DC6/ {
    proxy_pass http://149.154.175.100:80/;
  }
  location ^~ /DC7/ {
    proxy_pass http://149.154.167.91:80/;
  }
  location ^~ /DC8/ {
    proxy_pass http://149.154.171.5:80/;
  }
 location / {
    auth_basic "tg";
    auth_basic_user_file /etc/nginx/passwd.htpasswd;
    proxy_pass http://localhost:8000/;
    proxy_read_timeout 90s;
    proxy_connect_timeout 90s;
    proxy_send_timeout 90s;
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $remote_addr;
  }
}

Cosa aggiungiamo alla configurazione di nginx:

• Modifichiamo la posizione principale, che gestirà le richieste sulla porta 8000, a cui risponde Webogram
• Chiudiamo la posizione principale con autenticazione di base. È un passo puramente simbolico per proteggere la nostra applicazione da occhi indiscreti e bot. (E anche per evitare problemi di blocco)
• Una serie di location con proxy_path verso i server Telegram rappresentano i nostri endpoint, attraverso i quali inoltreremo le nostre richieste

Inoltre, creeremo un file /etc/nginx/passwd.htpasswd;, in modo che nginx abbia qualcosa con cui confrontare le password degli utenti.

sudo apt install apache2-utils
sudo htpasswd -c /etc/nginx/passwd.htpasswd tg

Riavviamo nginx:

sudo systemctl restart nginx

Ora Webogram sarà accessibile solo all'indirizzo mywebogram.localhost/app/index.html dopo aver inserito il nome utente e la password che hai definito durante la creazione del comando htpasswd.

Ci rimane poco: apportiamo alcune piccole modifiche al progetto stesso.

Apri il file ~/webogram/app/js/lib/mtproto.js

E modifica l'inizio nella seguente forma:

/*!
 * Webogram v0.7.0 - messaging web application for MTProto
 * https://github.com/zhukov/webogram
 * Copyright (C) 2014 Igor Zhukov <igor.beatle@gmail.com>
 * https://github.com/zhukov/webogram/blob/master/LICENSE
 */

angular.module('izhukov.mtproto', ['izhukov.utils'])

  .factory('MtpDcConfigurator', function () {
    var sslSubdomains = ['pluto', 'venus', 'aurora', 'vesta', 'flora']

    var dcOptions = Config.Modes.test
      ? [
        {id: 1, host: 'mywebogram.localhost/DC1',  port: 80},
        {id: 2, host: 'mywebogram.localhost/DC2',  port: 80},
        {id: 3, host: 'mywebogram.localhost/DC3', port: 80}
      ]
      : [
        {id: 1, host: 'mywebogram.localhost/DC4',  port: 80},
        {id: 2, host: 'mywebogram.localhost/DC5',  port: 80},
        {id: 3, host: 'mywebogram.localhost/DC6', port: 80},
        {id: 4, host: 'mywebogram.localhost/DC7',  port: 80},
        {id: 5, host: 'mywebogram.localhost/DC8',   port: 80}
      ]

    var chosenServers = {}

    function chooseServer (dcID, upload) {
      if (chosenServers[dcID] === undefined) {
        var chosenServer = false,
          i, dcOption

        if (Config.Modes.ssl || !Config.Modes.http) {
          var subdomain = sslSubdomains[dcID - 1] + (upload ? '-1' : '')
          var path = Config.Modes.test ? 'apiw_test1' : '/apiw1/'
          chosenServer = 'https://mywebogram.localhost/' + subdomain + path
          return chosenServer
        }
       for (i = 0; i < dcOptions.length; i++) {
          dcOption = dcOptions[i]
          if (dcOption.id == dcID) {
            chosenServer = 'http://' + dcOption.host + '/apiw1'
            break
          }
        }
        chosenServers[dcID] = chosenServer
      }
...
 

Dopo di che, è necessario aggiornare la pagina con l'app nel browser.

Apri la console del browser e controlla le richieste di rete dell'app. Se tutto funziona e le richieste XHR vengono inviate al tuo server, significa che hai fatto tutto correttamente e che Webogram ora viene inoltrato tramite nginx.

Spero che questo tutorial possa essere utile anche ad altri oltre che a me.

Un grande grazie a tutti coloro che hanno letto fino in fondo.

Se qualcuno ha avuto difficoltà o ho commesso qualche imprecisione, risponderò volentieri e cercherò di aiutarvi nei commenti o in privato.

Fonte: habr.com