Web server as a Byte-for-Byte proxy for TLS

Consider a web server (HTTP) that fetches some data from somewhere and displays it as convenient HTML to its users.

Also consider that the fetching process involves confidential data like usernames/passwords of its users. One example is our HTTP server contacting SMTP servers of popular email services such as gmail, yahoo, etc.

It would be smart to use TLS, as we don't want confidential data being exposed to men-in-the-middle.

So, the current model is:

[end user] <-TLS-> [our HTTP server] <-TLS-> [other SMTP server]

The problem here is that our HTTP server has cleartext access to the confidential data from its end users.

What would be really nice is for the end user's browser to initiate a connection to the other SMTP server directly.

The two problems are:

1. the browser only understands HTTP at the networking level
2. XMLHttpRequest normally does not allow cross-domain requests

One idea that I came up with is for the end user's browser to act like it's going to create a TLS connection to the other SMTP server, but instead of inttiating a connection to the other SMTP server, to simply send Byte-for-Byte all the data that it would send to our HTTP server instead (perhaps through WebSockets), and the HTTP server will just "proxy" the TLS encrypted data to and from the other SMTP server.

I already would know what to do on the server side, but I want to know the best practice for implementing this on the client side.

Also, does this not seem like it would be a relatively popular feature in the realm of security? The example I gave was for SMTP but it equally applies for any other protocol that can use TLS. I feel like there would be standard JavaScript methods or such.