Fix Firefox silently deleted tunnels

Debugging notes:

* The act of refreshing a page can delete tunnels created by other UI
  sessions, I think because it has local CSS checkbox state.
  * Happens on firefox desktop and mobile. Here's how to reproduce:
    1. Load the UI in Chrome and FF.
    2. Delete the last tunnel from FF.
    3. Add it back in Chrome.
    4. Refresh FF. The tunnel will be silently deleted.
  * I'm pretty sure this is bugged behavior in FF, because the checkboxes have
    completely unique ids, but it's treating them like the same checkbox.
  * Setting autocomplete='off' on the input elements seems to fix the problem.
    Not sure if it will work correctly in all browsers.
This commit is contained in:
Anders Pitman 2020-10-17 09:48:29 -06:00
parent ca89553354
commit 2d7f985311
2 changed files with 2 additions and 4 deletions

View File

@ -14,5 +14,3 @@
is wrong when domain stuff breaks. is wrong when domain stuff breaks.
* Responses to unauthorized requests are leaking information about the current * Responses to unauthorized requests are leaking information about the current
tunnels through the genereated CSS. tunnels through the genereated CSS.
* The act of refreshing a page can delete tunnels created by other UI
sessions, I think because it has local CSS checkbox state.

View File

@ -21,7 +21,7 @@
<div class='content'> <div class='content'>
<div class='list'> <div class='list'>
{{range $domain, $tunnel:= .Tunnels}} {{range $domain, $tunnel:= .Tunnels}}
<input type='checkbox' class='toggle' id='toggle-tunnel-hide-deleted-{{$tunnel.CssId}}'> <input autocomplete='off' type='checkbox' class='toggle' id='toggle-tunnel-hide-deleted-{{$tunnel.CssId}}'>
<div class='list-item'> <div class='list-item'>
<div> <div>
<a href="https://{{$domain}}">{{$domain}}</a>:{{$tunnel.TunnelPort}} -> {{$tunnel.ClientName}}:{{$tunnel.ClientPort}} <a href="https://{{$domain}}">{{$domain}}</a>:{{$tunnel.TunnelPort}} -> {{$tunnel.ClientName}}:{{$tunnel.ClientPort}}
@ -32,7 +32,7 @@
</label> </label>
</div> </div>
<input type='checkbox' id='toggle-tunnel-delete-dialog-{{$tunnel.CssId}}'> <input autocomplete='off' type='checkbox' id='toggle-tunnel-delete-dialog-{{$tunnel.CssId}}'>
<div class='confirm-dialog'> <div class='confirm-dialog'>
<label for='toggle-tunnel-delete-dialog-{{$tunnel.CssId}}' class='confirm-dialog__overlay'></label> <label for='toggle-tunnel-delete-dialog-{{$tunnel.CssId}}' class='confirm-dialog__overlay'></label>