Levantamos nuestra instancia de Webogram con un proxy a través de nginx

¡Hola, Habr!

Recientemente me encontré en una situación en la que tenía que trabajar dentro de una red corporativa con acceso limitado a internet y, como pueden adivinar por el título, Telegram estaba bloqueado. Estoy seguro de que esta situación es familiar para muchos.

Puedo prescindir de los mensajeros, pero necesitaba Telegram para trabajar. Instalar el cliente en la máquina de trabajo no era posible, y tampoco podía usar mi laptop personal. Otra solución que se me ocurrió fue utilizar su versión web oficial, pero como pueden adivinar, tampoco estaba disponible. De inmediato descarto la opción de buscar un espejo no oficial (espero que por razones bastante obvias).

Afortunadamente, Webogram es un proyecto de código abierto, cuyo código fuente está disponible en github su autor (¡Muchas gracias por ello!)
La instalación y el inicio no presentan ninguna dificultad, sin embargo, en condiciones de explotación dentro de una red con acceso bloqueado a los servidores de Telegram, es más probable que enfrentes decepción que éxito, ya que la versión web envía solicitudes a los servidores de Telegram desde la máquina del usuario.

Afortunadamente, esto es bastante fácil de solucionar (aunque no muy obvio). Quiero advertir que no soy el autor de esta solución. Logré encontrarla en un hilo, donde se discutía un problema similar al mío. La solución propuesta por el usuario de github tecknojock, me fue de gran ayuda, sin embargo, estoy seguro de que también puede ayudar a alguien más, así que decidí escribir este tutorial.

A continuación, encontrarán un paso a paso para configurar su propio espejo de Webogram y configurar el proxy de sus solicitudes a los servidores de Telegram usando nginx.

Como ejemplo, elegí una instalación recién realizada y actualizada de Ubuntu Server 18.04.3.

Atención: Este tutorial no incluirá instrucciones para configurar un dominio en nginx. Esto debe hacerse de forma independiente. El tutorial asume que ya tienen un dominio configurado con ssl y que el servidor donde se planea la configuración tiene acceso a los servidores de Telegram (de cualquier forma que prefieran)

Supongamos que la IP de este servidor es 10.23.0.3, y el nombre de dominio mywebogram.localhost

Partiendo de estas condiciones, proporcionaré ejemplos de configuraciones. No olviden cambiar los valores por los suyos.

Así que comencemos:

Para iniciar Webogram, necesitamos nodejs. Por defecto, si lo instalamos desde los repositorios de Ubuntu, obtendremos nodejs versión 8.x. Necesitamos la 12.x:

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

Elegimos la ubicación donde se basará nuestro Webogram.

Como ejemplo, lo colocaremos en la raíz del directorio personal. Para ello, clonaremos el repositorio oficial en nuestro servidor:

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

El siguiente paso es instalar todas las dependencias necesarias para ejecutar la aplicación:

cd webogram && npm install

Intentemos realizar una ejecución de prueba. Ejecute el comando:

npm start

Después de esto, intentamos abrir en el navegador

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

Si hasta este momento ha hecho todo correctamente, se le abrirá la página de inicio de sesión de Webogram.

Ahora necesitamos configurar la ejecución de la aplicación como un servicio. Para ello, creamos un archivo

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

lo abrimos en cualquier editor y le damos el siguiente formato (escriba su ruta a WorkDirectory)

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

Después de eso, ejecutamos los siguientes comandos:

Aplicamos los cambios

sudo systemctl daemon-reload

Activamos el inicio automático:

sudo systemctl enable webogram.service

Iniciamos el servicio:

sudo systemctl start webogram.service

Después de las acciones realizadas, Webogram seguirá estando disponible en el puerto 8000.

Dado que configuraremos el acceso a nuestro Webogram a través de nginx, cerraremos el puerto 8000 para solicitudes externas.

Utilizaremos la utilidad udf (o cualquier otro método que le resulte cómodo):

sudo ufw deny 8000

En caso de que decida utilizar udf, pero esté desactivado en el servidor, agregamos más reglas (para que no se rompa todo) y activamos udf:

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

A continuación, procedemos a modificar la configuración de nginx.

Como advertí anteriormente, se supone que su servidor ya tiene un dominio configurado con ssl. Solo quiero llamar su atención sobre el hecho de que será necesario agregar el archivo de configuración del dominio para un correcto funcionamiento:

servidor {
...
  ubicación ^~ /pluto/apiw1/ {
    proxy_pass https://pluto.web.telegram.org/apiw1/;
  }
  ubicación ^~ /venus/apiw1/ {
    proxy_pass https://venus.web.telegram.org/apiw1/;
  }
  ubicación ^~ /aurora/apiw1/ {
    proxy_pass https://aurora.web.telegram.org/apiw1/;
  }
  ubicación ^~ /vesta/apiw1/ {
    proxy_pass https://vesta.web.telegram.org/apiw1/;
  }
  ubicación ^~ /flora/apiw1/ {
    proxy_pass https://flora.web.telegram.org/apiw1/;
  }
  ubicación ^~ /pluto-1/apiw1/ {
    proxy_pass https://pluto-1.web.telegram.org/apiw1/;
  }
  ubicación ^~ /venus-1/apiw1/ {
    proxy_pass https://venus-1.web.telegram.org/apiw1/;
  }
  ubicación ^~ /aurora-1/apiw1/ {
    proxy_pass https://aurora-1.web.telegram.org/apiw1/;
  }
  ubicación ^~ /vesta-1/apiw1/ {
    proxy_pass https://vesta-1.web.telegram.org/apiw1/;
  }
  ubicación ^~ /flora-1/apiw1/ {
    proxy_pass https://flora-1.web.telegram.org/apiw1/;
  }
  ubicación ^~ /DC1/ {
    proxy_pass http://149.154.175.10:80/;
  }
  ubicación ^~ /DC2/ {
    proxy_pass http://149.154.167.40:80/;
  }
  ubicación ^~ /DC3/ {
    proxy_pass http://149.154.175.117:80/;
  }
  ubicación ^~ /DC4/ {
    proxy_pass http://149.154.175.50:80/;
  }
  ubicación ^~ /DC5/ {
    proxy_pass http://149.154.167.51:80/;
  }
  ubicación ^~ /DC6/ {
    proxy_pass http://149.154.175.100:80/;
  }
  ubicación ^~ /DC7/ {
    proxy_pass http://149.154.167.91:80/;
  }
  ubicación ^~ /DC8/ {
    proxy_pass http://149.154.171.5:80/;
  }
 ubicación / {
    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;
  }
}

Lo que añadimos en la configuración de nginx:

• Modificamos la ubicación raíz, que proxied las solicitudes al puerto 8000, por el cual responde Webogram.
• La ubicación raíz la protegemos con una autenticación básica. Este es un paso simbólico para proteger nuestra aplicación de miradas indiscretas y bots. (También evita problemas con bloqueos)
• Un montón de ubicaciones con proxy_path a los servidores de Telegram — son nuestros endpoints, a través de los cuales vamos a proxear nuestras solicitudes.

También, crearemos un archivo /etc/nginx/passwd.htpasswd;, para que nginx tenga con qué comparar las contraseñas de los usuarios.

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

Reiniciamos nginx:

sudo systemctl restart nginx

Ahora, Webogram estará disponible solo en la dirección mywebogram.localhost/app/index.html después de que se introduzcan el nombre de usuario y la contraseña que definiste al crear el comando htpasswd.

Solo queda un poco: hagamos unos pequeños cambios en el propio proyecto.

Abre en el editor el archivo ~/webogram/app/js/lib/mtproto.js

Y ajusta su inicio al siguiente formato:

/*!
 * 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
      }
...
 

Después de esto, es necesario actualizar la página de la aplicación en el navegador.

Abre la consola del navegador y comprueba las solicitudes de red de la aplicación. Si todo funciona y las solicitudes XHR están llegando a tu servidor, significa que todo se ha hecho correctamente y Webogram ahora está siendo proxied a través de nginx.

Espero que este tutorial sea útil para alguien más además de mí.

Muchas gracias a todos los que han llegado hasta aquí.

Si alguien tiene dificultades o he cometido alguna inexactitud, con gusto responderé y trataré de ayudarles en los comentarios o por mensaje privado.

Fuente: habr.com