👩🏾‍🔬 🧑🏿 👋🏻 Raise your Webogram instance with proxying via nginx 👂🏾 🤨 👨🏿‍⚖️

Hello, Habr!

I recently got into a situation in which it was necessary to work inside a corporate network with incomplete access to the Internet and, as you can guess from the headline, Telegram was blocked in it. I am sure that this situation is familiar to many.

I can do without messengers, however, it was Telegram that I needed for work. It was not possible to install the client on a working machine, nor to use a personal laptop. Another solution seems to be to use its official web version , but as you can guess, it was also unavailable. I immediately delete the option with the search for an unofficial mirror (I hope for obvious reasons).

Fortunately, Webogram is an open source project, the source code of which is available on githubits author (For which
many thanks to him!) The installation and launch itself is not a big deal, however, under operating conditions inside the network with blocked access to Telegram servers, you will more likely be disappointed than successful, since the web version sends requests for Telegram servers from the user's machine.

Fortunately, this is quite simple (but not very obvious) to fix. I want to warn you that I am not the author of this solution. I managed to find it in a thread that discussed a problem similar to mine. The solution suggested by the user github tecknojock helped me a lot, however, I’m sure that it can help someone else, so I decided to write this tutorial.

Under the cat you will find a step-by-step configuration of your Webogram mirror and proxy settings of its requests to Telegram servers using nginx.

As an example, I selected the just installed and updated Ubuntu Server 18.04.3.

Note: Within this tutorial there will be no instructions for setting up a domain in nginx. This must be done independently. The tutorial assumes that you have already configured a domain with ssl, as well as the server on which you plan to configure, has access to Telegram servers (in any way you like)

Assume that the ip of this server is 10.23.0.3, and the domain name is mywebogram. localhost

Based on these conventions, I will give examples of configurations. Do not forget to change the values to your own.

So

here we go : To run Webogram, we need nodejs. By default, if you install it from the Ubuntu repositories, we get nodejs version 8.x. We need 12.x:

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

We choose the place where our Webogram will be based.

For an example - we will place it in a root of a home directory. To do this, we clone the official repository to our server:

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

The next step is to install all the dependencies necessary to run the application:

cd webogram && npm install

Let's try to run a test run. Run the command:

npm start

After which, we try to open in the browser

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

If up to this point you did everything correctly, your Webogram authorization page will open.

Now we need to configure the launch of the application as a service. To do this, create a file

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

open it in any editor and give the following look (enter your path to 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

Then we execute the following commands:

Apply the changes

sudo systemctl daemon-reload

Turn on autostart:

sudo systemctl enable webogram.service

We start the service:

sudo systemctl start webogram.service

After the steps are completed, the Webogram will continue to be available on port 8000.

Since we will configure access to our Webogram via nginx, close port 8000 for requests from outside.

We use the udf utility (or any method convenient for you) for this:

sudo ufw deny 8000

In case you still decide to use udf, but it is turned off on the server - add more rules (so that everything does not fall apart) and turn on udf:

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

Next, let's change the nginx configuration.

As I warned above - it is assumed that a domain with ssl is already configured on your server. I will draw your attention only to the fact that it will be necessary to add to the configuration file of the domain for correct operation:


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;
  }
}

What we add to the nginx config:

We change the root location, which will proxy requests to port 8000, which Webogram responds to
Close the root location with basic-auth. This is a purely symbolic step to close our application from prying eyes and bots. ~~(And also that there were no problems with locks)~~
The location heap with proxy_path on the Telegram server is just our endpoints through which we will proxy our requests

Also, create a file /etc/nginx/passwd.htpasswd;so that nginx has something to compare user passwords with.

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

Restart nginx:

sudo systemctl restart nginx

Now Webogram will be available only at mywebogram.localhost / app / index.html after the login and password that you defined when creating the htpasswd command are entered.

There is little left: make small changes to the project itself.

Open the file in the editor ~/webogram/app/js/lib/mtproto.js

and bring its beginning to the following form:

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

After that, you need to refresh the page with the application in the browser.

Open the browser console and see the network requests of the application. If everything works, and XHR requests go to your server, then everything is done correctly, and Webogram is now proxied through nginx.

I hope that this tutorial will be useful to someone else besides me.

Many thanks to everyone who read to the end.

If someone has any difficulties or I made some inaccuracies, I will be happy to answer and try to help you in the comments or PM.

Raise your Webogram instance with proxying via nginx

More articles: