Tor Project | WebTunnel Bridge

<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" > <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="Defend yourself against tracking and surveillance. Circumvent censorship. | WebTunnel Bridge"> <link rel="stylesheet" href="../../../static/css/bootstrap.css?h=1bb2c397"> <link rel="stylesheet" href="../../../static/fonts/fontawesome/css/all.min.css?h=9d272f6a" >  <link rel="icon" type="image/x-icon" href="../../../static/images/favicon.ico?h=4e4ad2ce">  <link rel="icon" type="image/png" href="../../../static/images/favicon.png?h=7aa0e2a3"> <title>Tor Project | WebTunnel Bridge</title>  <script> var baseElement = document.createElement('base'); baseElement.href = location.href; document.head.appendChild(baseElement); </script> <body class="no-gutters"> <header> <div class="container-fluid bg-primary"> <nav class="navbar no-background navbar-expand-lg navbar-dark bg-primary p-4"> <a class="navbar-brand" href="https://torproject.org/en/"> <img alt="The Tor Project" src="../../../static/images/tor-logo@2x.png?h=16ad42bc" > <span class="sr-only">Tor Logo</span> </a> <a href="https://donate.torproject.org" title="Donate" class="px-2 h4"><span class="badge badge-warning p-2">Donate Now</span></a> <label for="nav-toggle"> <a class="btn btn-lg btn-primary navbar-toggler text-white p-3" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> Menu <span class="navbar-toggler-icon ml-1"></span> </a> </label> <input type="checkbox" id="nav-toggle"/> <div class="collapse navbar-collapse hamburger-menu" id="navbarSupportedContent"> <div class="mx-auto"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="https://www.torproject.org/about/history/"> About </a> </li> <li class="nav-item"> <a class="nav-link" href="https://support.torproject.org/"> Support </a> </li> <li class="nav-item"> <a class="nav-link" href="https://community.torproject.org/"> Community </a> </li> <li class="nav-item"> <a class="nav-link" href="https://blog.torproject.org"> Blog </a> </li> <li class="nav-item"> <a class="nav-link" href="https://donate.torproject.org"> Donate </a> </li>  </ul> </div> <div class="btn-group dropdown pull-right"> <button type="button" class="btn btn-primary bg-primary dropdown-toggle btn-block" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> English (en) </button> <div class="dropdown-menu"> <a class="dropdown-item" href="../../../de/relay/setup/webtunnel/">Deutsch (de)</a> <a class="dropdown-item" href="../../../es/relay/setup/webtunnel/">Español (es)</a> <a class="dropdown-item" href="../../../fa/relay/setup/webtunnel/">ﻑﺍﺮﺴﯾ (fa)</a> <a class="dropdown-item" href="../../../fr/relay/setup/webtunnel/">Français (fr)</a> <a class="dropdown-item" href="../../../ro/relay/setup/webtunnel/">Română (ro)</a> <a class="dropdown-item" href="../../../ru/relay/setup/webtunnel/">Русский (ru)</a> <a class="dropdown-item" href="../../../sw/relay/setup/webtunnel/">Kiswahili (sw)</a> <a class="dropdown-item" href="../../../tr/relay/setup/webtunnel/">Türkçe (tr)</a> </div> </div> <div class="pull-right"> <a class="btn btn-outline-light pull-right" href="https://www.torproject.org/download/"> Download Tor Browser<i class="ml-2 pt-1 fas fa-arrow-down-png"></i> </a> </div> </nav> </div> </header> <div class="banner"> <input id="trigger" type="checkbox" title="Close banner" /> <label for="trigger" class="banner-close text-white"> <div class="d-flex h-100"> <img src="../../../static/images/yec/x-dark.png?h=353e04cc" class="m-auto h-100 w-100 p-1 img-svg"> </div> </label> <span class="eoy-sr-only text-black">Close banner</span> <div id="banner-header"> <div class="banner-content"> <div class="banner-content-spacer pt-5 h-100"> <div class="banner-content-container d-flex px-3"> <div id="banner-text-container" class="d-flex flex-column text-left"> <div id="banner-text"> <h1 class="yec-variant-browse">You have a right to BROWSE without being watched.</h1> <h1 class="yec-variant-search">You have a right to SEARCH without being followed.</h1> <h1 class="yec-variant-speak">You have a right to SPEAK without uninvited listeners.</h1> <p>Join the thousands of Tor supporters building an internet powered by privacy. Make a donation today.</p> <p><strong>Through December 31, your gift will be matched 1:1, up to $300,000!</strong></p> </div> <div id="yec-donate-button-container"> <a class="btn" id="yec-donate-button" href="https://donate.torproject.org/"> <span>Donate now</span> <img src="../../../static/images/yec/heart.png?h=ad369acb" class="donate-heart img-svg"> </a> </div> </div> <div class="banner-main-graphics h-100"> <img class="yec-illo yec-variant-browse img-svg" src="../../../static/images/yec/illo-yec-browse.png?h=86d8fd2b"> <img class="yec-illo yec-variant-search img-svg" src="../../../static/images/yec/illo-yec-search.png?h=347ed4b2"> <img class="yec-illo yec-variant-speak img-svg" src="../../../static/images/yec/illo-yec-speak.png?h=abdc7268"> </div> </div> </div> </div> </div> </div> <script type="text/javascript"> /* persist banner close across pages in the same session/tab */ let trigger = document.querySelector(".banner #trigger"); trigger.addEventListener("change", () => { sessionStorage.setItem("bannerClosed", trigger.checked); }); if (sessionStorage.getItem("bannerClosed")) { trigger.checked = sessionStorage.getItem("bannerClosed"); } /* display a random variant of the banner */ /* not using jQuery because it's loaded later, and this is just faster */ const variants = ['browse', 'search', 'speak']; const default_variant = 'browse'; const variant = variants[Math.floor(Math.random() * variants.length)] const variant_elements = document.querySelectorAll('h1.yec-variant-' + default_variant + ', img.yec-variant-' + default_variant); if (variant == default_variant) { variant_elements.forEach((i) => { i.style.visibility = 'visible'; }); } else { variant_elements.forEach((i) => { i.style.display = 'none'; }); document.querySelector('h1.yec-variant-' + variant).style.display = 'inline'; document.querySelector('img.yec-variant-' + variant).style.display = 'block'; } document.getElementById('yec-donate-button').classList.add('yec-variant-' + variant); </script> <noscript>  <style> #banner-header .banner-content h1.yec-variant-browse, #banner-header .banner-content img.yec-variant-browse { visibility: visible; } #yec-donate-button { background-color: var(--abouttor-yec-button-bg-color-browse); visibility: visible; } </style> </noscript> <div class="page"> <div class="container-fluid bg-primary"> <div class="row flex-xl-nowrap order-last"> <div class="container bg-primary pt-1 pt-sm-0"> <div class="row"> <div class="col-12 content-center pt-5"> <div class="row"> <h6 class="mx-auto text-white">WebTunnel Bridge</h6> </div> <div class="row pb-5"> <h2 class="mx-auto display-3 text-white">WebTunnel Bridge</h2> </div> <div class="row header-description"> </div> </div> </div> </div> </div> </div> <div class="container-fluid border-bottom border-light bg-white sticky-top"> <div class="row justify-content-center"> <div class="dropdown show"> <a class="btn btn-outline-primary dropdown-toggle nav_dropdown" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Relay Operations </a> <div class="dropdown-menu" aria-labelledby="dropdownMenuLink"> <a class="dropdown-item" href="../../../training/">Training </a> <a class="dropdown-item" href="../../../localization/">Localization </a> <a class="dropdown-item" href="../../../outreach/">Outreach </a> <a class="dropdown-item" href="../../../user-research/">User Research </a> <a class="dropdown-item active" href="../../">Relay Operations </a> <a class="dropdown-item" href="../../../onion-services/">Onion Services </a> </div> </div> </div> </div> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <main role="main" class="mx-auto col-12 text-left"> <nav aria-label="breadcrumb"> <ol class="breadcrumb bg-light m-0 small"> <li class="breadcrumb-item" aria-current="page"><a href="../../../">Join the Tor Community</a></li> <li class="breadcrumb-item" aria-current="page"><a href="../../">Relay Operations</a></li> <li class="breadcrumb-item" aria-current="page"><a href="../">Technical Setup</a></li> <li class="breadcrumb-item active">WebTunnel Bridge</li> </ol> </nav> <div class="row"> <div class="container-fluid sidebar col-xs-12 col-sm-12 col-md-3 col-lg-3"> <nav class="smalltopics no-background navbar navbar-expand-lg navbar-light bg-white p-0 fixed"> <label class="side-toggler" for="menu-toggle"> <a class="btn btn-lg outline-primary text-primary navbar-toggler collapsed" data-toggle="collapse" data-target="#navbarSupportedTopicsContent" aria-controls="navbarSupportedTopicsContent" aria-expanded="false" aria-label="Toggle navigation"> <i class="fas"></i> </a> </label> <input type="checkbox" id="menu-toggle"/> <div class="collapse navbar-collapse burger-menu" id="navbarSupportedTopicsContent"> <ul class="nav nav-pills flex-column"> <li class="toc-entry toc-h2 nav-item" > <a role="button" class="nav-link" href="../guard/">Middle/Guard relay</a> </li> <li class="toc-entry toc-h2 nav-item" > <a role="button" class="nav-link" href="../snowflake/">Snowflake</a> </li> <li class="toc-entry toc-h2 active nav-item" > <a role="button" class="nav-link active" href="./">WebTunnel Bridge</a> </li> <li class="toc-entry toc-h2 nav-item" > <a role="button" class="nav-link" href="../bridge/">Bridge</a> </li> <li class="toc-entry toc-h2 nav-item" > <a role="button" class="nav-link" href="../post-install/">Relay Post-install and good practices</a> </li> <li class="toc-entry toc-h2 nav-item" > <a role="button" class="nav-link" href="../exit/">Exit Relay</a> </li> </ul> </div> <hr class="mb-0" /> </nav> <nav class="d-none d-sm-block bg-white border-right sidetopics" id="sidenav-topics" style="top:172px;"> <ul class="nav nav-pills flex-column"> <li class="toc-entry toc-h2 nav-item" > <a role="button" class="nav-link" href="../guard/">Middle/Guard relay</a> </li> <li class="toc-entry toc-h2 nav-item" > <a role="button" class="nav-link" href="../bridge/">Bridge</a> </li> <li class="toc-entry toc-h2 nav-item" > <a role="button" class="nav-link" href="../exit/">Exit Relay</a> </li> <li class="toc-entry toc-h2 nav-item" > <a role="button" class="nav-link" href="../post-install/">Relay Post-install and good practices</a> </li> <li class="toc-entry toc-h2 nav-item" > <a role="button" class="nav-link" href="../snowflake/">Snowflake</a> </li> <li class="toc-entry toc-h2 active nav-item" > <a role="button" class="nav-link active" href="./">WebTunnel Bridge</a> </li> </ul> </nav> </div> <div class="col-sm-12 col-xs-12 col-md-8 col-lg-8 pt-3 mt-5 mr-auto text-left"> <div class="col-10"> <p>This guide will help you set up a WebTunnel bridge to help censored users connect to the Tor network. <a href="https://gitlab.torproject.org/tpo/anti-censorship/pluggable-transports/webtunnel">WebTunnel</a> is a pluggable transport that attempts to imitate web browsing activities based on <a href="https://censorbib.nymity.ch/#Frolov2020b">HTTPT</a>.</p> <p>The requirements for deploying a WebTunnel bridge are:</p> <ol> <li>A static IPv4 (preferably);</li> <li>The ability to expose TCP ports to the Internet (make sure that NAT doesn't get in the way);</li> <li>A self-hosted website, including a configurable web server (such as NGINX or Apache) and a domain under your control;</li> <li>A valid TLS certificate.</li> </ol> <p>Deploying a WebTunnel bridge involves configuring both a web server and a Tor bridge with this pluggable transport. The first part of this guide provides detailed instructions for configuring your web server to support WebTunnel. The second part, you will choose between two methods for running the WebTunnel bridge: either using Docker or by compiling from the source code.</p> <p>Please note that if you don't meet the requirements to run a WebTunnel or obfs4 bridge, running a <a href="../snowflake">Snowflake proxy</a> is a great way to donate your bandwidth to help users circumvent censorship.</p> <h3>Web server configuration</h3> <h4>Step 1. Configure your domain</h4> <p>If you already have a website domain, you can either use the main domain or create a subdomain. In this guide, the WebTunnel bridge is hosted on the same server as your website, but it's possible to host it in a different server.</p> <h4>Step 2. Obtain a valid certificate</h4> <p>If your website doesn't have a TLS certificate, you can obtain one by using <a href="https://github.com/acmesh-official/acme.sh">acme.sh</a>, which is an ACME protocol client written in Shell language.</p> <p><strong>2.1. Install ACME</strong></p> <p>Replace <code>my@example.com</code> with your email address:</p> <p><code>$ curl https://get.acme.sh | sh -s email=my@example.com</code></p> <p>Or</p> <p><code>$ wget -O - https://get.acme.sh | sh -s email=my@example.com</code></p> <p><strong>2.2. Issue a certificate</strong></p> <p>Replace <code>example.com</code> with your website domain.</p> <pre><code>$ ~/.acme.sh/acme.sh --issue --standalone --domain example.com </code></pre> <h4>Step 3. Install NGINX</h4> <p>To coexist with other content on a single port, you should install a reverse proxy, such as NGINX. Install NGINX:</p> <pre><code>$ sudo apt install nginx </code></pre> <h4>Step 4. Configure NGINX</h4> <p>4.1. Generate a random string</p> <p>When clients connect to your web server, they will be redirected to your WebTunnel proxy when they use a secret path. You can generate a random string by running this command:</p> <pre><code>$ echo $(cat /dev/urandom | tr -cd "qwertyuiopasdfghjklzxcvbnmMNBVCXZLKJHGFDSAQWERTUIOP0987654321"|head -c 24) </code></pre> <p>4.2. Create or edit an NGINX vhost</p> <p>Create a new vhost file such as <code>/etc/nginx/sites-available/webtunnel-vhost</code> that forwards traffic to the WebTunnel bridge. Here is a full <a href="https://gitlab.torproject.org/-/snippets/190">NGINX vhost with WebTunnel example</a>.</p> <script src="https://gitlab.torproject.org/-/snippets/190.js"></script><p>Or if you want to use an existing vhost, you can just edit and add the <code>location {}</code> block to it. Replace <code>$PATH</code> with the random string.</p> <pre><code># NGINX vhost block example location = /$PATH { proxy_pass http://127.0.0.1:15000; proxy_http_version 1.1; ### Set WebSocket headers ### proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; ### Set Proxy headers ### proxy_set_header Accept-Encoding ""; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; add_header Front-End-Https on; proxy_redirect off; access_log off; error_log off; } </code></pre> <p>4.3. Test the vhost configuration and reload NGINX</p> <pre><code>sudo ln -s /etc/nginx/sites-available/webtunnel-vhost /etc/nginx/sites-enabled/ sudo nginx -t sudo systemctl reload nginx </code></pre> <h4>Step 5. Configure your Tor WebTunnel bridge</h4> <p>Congratulations! You've successfully configured your web server to proxy requests to your Tor bridge. Now, you must install and configure your bridge to receive these requests from the web server. Please follow the second part of this guide. You have two options available: either compile a Go binary from the <a href="source">source</a> or use <a href="docker">Docker</a>.</p> </div> <div class="row"> <div class="col-sm-6 col-md-6 col-sm-12 col-xl-6 py-3"> <div class="card h-100"> <div class="card-body"> <h4 class="card-title text-primary"><a href="docker/">WebTunnel Docker setup</a></h4> <p class="card-text">How to run a WebTunnel bridge on Docker</p> </div> </div> </div> <div class="col-sm-6 col-md-6 col-sm-12 col-xl-6 py-3"> <div class="card h-100"> <div class="card-body"> <h4 class="card-title text-primary"><a href="source/">Compile and run WebTunnel from the source</a></h4> <p class="card-text">How to run a WebTunnel bridge from the source</p> </div> </div> </div> </div> <div class="card mt-5"> <ul class="list-group list-group-flush">  <li class="list-group-item"> <a href="../">Back to previous page: Technical Setup</a> - <a href="https://gitlab.torproject.org/tpo/web/community/-/edit/main/content/relay/setup/webtunnel-bridge/contents.lr">Edit this page</a> </li> </ul> </div> </div> </div> </main> </div> </div> </div> <footer> <div class="container-fluid bg-dark footer order-last text-left"> <div class="row"> <div class="col-4 d-flex onion-pattern"> <img src="../../../static/images/circle-pattern.png?h=9a4040e4" class="img-svg"> </div> <div class="col-sm-8 d-flex download-section mt-auto"> <div class="container pb-2 justify-content-right"> <h2 class="text-white text-bold">Download Tor Browser</h2> <p class="text-white">Download Tor Browser to experience real private browsing without tracking, surveillance, or censorship.</p><a class="btn text-primary bg-white btn-light pull-right mt-2" href="https://www.torproject.org/download/"> Download Tor Browser<i class="ml-2 pt-1 fas fa-arrow-down-png-purple"></i> </a> </div> </div> </div> <div class="row"> <div class="col-12 d-flex justify-content-center"> <div class="col-sm-6 offset-lx-1 offset-sm-0 mt-5"> <h5 class="font-weight-bold mt-5 text-white">Our mission:</h5> <p class="text-white mb-5" >To advance human rights and freedoms by creating and deploying free and open source anonymity and privacy technologies, supporting their unrestricted availability and use, and furthering their scientific and popular understanding.</p> </div> <div class="col-sm-2 mt-5 d-none d-sm-block"> <ul class="nav flex-column mt-sm-5"> <li class="nav-item"> <a class="nav-link text-light" href="https://www.torproject.org/about/jobs/"> Jobs </a> </li> <li class="nav-item"> <a class="nav-link text-light" href="https://blog.torproject.org"> Blog </a> </li> <li class="nav-item"> <a class="nav-link text-light" href="https://www.torproject.org/contact/"> Contact </a> </li> <li class="nav-item"> <a class="nav-link text-light" href="https://www.torproject.org/press/"> Press </a> </li> <li class="nav-item"> <a class="nav-link text-light" href="https://www.torproject.org/privchat"> PrivChat </a> </li> </ul> <a href="https://donate.torproject.org" title="Donate" class="h5"><span class="badge badge-warning p-2 mt-2">Donate Now</span></a> </div> </div> </div> <div class="row"> <div class="col-12 d-flex justify-content-center"> <div class="col-sm-6 offset-lx-1 offset-sm-0 mt-5"> <p class="text-primary-light">SUBSCRIBE TO OUR NEWSLETTER</p> <p class="text-light">Get monthly updates and opportunities from the Tor Project:</p> <p class="w"><a class="btn btn-small btn-dark mt-2 text-white active" role="button" aria-pressed="true" href="https://donate.torproject.org/subscribe/">SIGN UP</a></p> </div> <div class="col-sm-2 mt-5 d-none d-sm-block"> <div class="row"> <h4><a class="text-white px-3" target="_blank" href="https://forum.torproject.org"><i class="fab fa-discourse"></i></a></h4> <h4><a class="text-white px-3" target="_blank" href="https://www.facebook.com/TorProject/"><i class="fab fa-facebook-png"></i></a></h4> <h4><a class="mastodon text-white px-3" target="_blank" href="https://mastodon.social/@torproject" rel="me"><i class="fab fa-mastodon-png"></i></a></h4> </div> <div class="row"> <h4><a class="instagram text-white px-3" target="_blank" href="https://www.instagram.com/torproject"><i class="fab fa-instagram-png"></i></a></h4> <h4><a class="twitter text-white px-3" target="_blank" href="https://twitter.com/torproject"><i class="fab fa-twitter-png"></i></a></h4> <h4><a class="linkedin text-white px-3" target="_blank" href="https://www.linkedin.com/company/tor-project"><i class="fab fa-linkedin-png"></i></a></h4> </div> <div class="row"> <h4><a class="github text-white px-3" target="_blank" href="https://github.com/torproject"><i class="fab fa-github-png"></i></a></h4> <h4><a class="telegram text-white px-3" target="_blank" href="https://t.me/torproject"><i class="fab fa-telegram-png"></i></a></h4> <h4><a class="gitlab text-white px-3" target="_blank" href="https://gitlab.torproject.org/"><i class="fab fa-gitlab-png"></i></a></h4> </div> </div> </div> </div> <div class="row"> <div class="col-12 d-flex justify-content-center"> <div class="col-8 mt-5 trademark-policy"> <p>Trademark, copyright notices, and rules for use by third parties can be found in our <a href="https://www.torproject.org/about/trademark">Trademark and Brand policy</a>.</p> </div> <div class="col-sm-2 mt-5 d-none d-sm-block"> <div class="btn-group dropup float-right"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> English (en) </button> <div class="dropdown-menu"> <a class="dropdown-item" href="../../../de/relay/setup/webtunnel/">Deutsch (de)</a> <a class="dropdown-item" href="../../../es/relay/setup/webtunnel/">Español (es)</a> <a class="dropdown-item" href="../../../fa/relay/setup/webtunnel/">ﻑﺍﺮﺴﯾ (fa)</a> <a class="dropdown-item" href="../../../fr/relay/setup/webtunnel/">Français (fr)</a> <a class="dropdown-item" href="../../../ro/relay/setup/webtunnel/">Română (ro)</a> <a class="dropdown-item" href="../../../ru/relay/setup/webtunnel/">Русский (ru)</a> <a class="dropdown-item" href="../../../sw/relay/setup/webtunnel/">Kiswahili (sw)</a> <a class="dropdown-item" href="../../../tr/relay/setup/webtunnel/">Türkçe (tr)</a> </div> </div> </div> </div> </div> <script src="../../../static/js/jquery-3.2.1.min.js?h=1055018c" ></script> <script src="../../../static/js/popper.min.js?h=a4336719" ></script> <script src="../../../static/js/bootstrap.bundle.min.js?h=46d1f82f" ></script> <script src="../../../static/js/scrollspy.min.js?h=02674132" ></script> <script src="../../../static/js/modernizr.js?h=9a7f0609" ></script> <script src="../../../static/js/download.js?h=caaadf8f" ></script> <script src="../../../static/js/fallback.js?h=8a716acd" ></script> </div> </div> </footer> </body>

CINXE.COM

Tor Project | WebTunnel Bridge