Add tls example

[seanwatters]

I see that this isn't currently building but would love to know if there are any already known blockers to using TLS with tonic-web-wasm-client.

Awesome crate btw 👍🏻

[devashishdxt]

I see that this isn't currently building but would love to know if there are any already known blockers to using TLS with tonic-web-wasm-client.

Awesome crate btw 👍🏻

This example doesn't build because it uses self signed TLS certificate and I don't know how to configure browser on GitHub actions to accept that certificate.

I'm not aware of any blockers for using TLS with this crate but feel free to open an issue if you encounter one.

[seanwatters]

I see that this isn't currently building but would love to know if there are any already known blockers to using TLS with tonic-web-wasm-client. Awesome crate btw 👍🏻

This example doesn't build because it uses self signed TLS certificate and I don't know how to configure browser on GitHub actions to accept that certificate.

I'm not aware of any blockers for using TLS with this crate but feel free to open an issue if you encounter one.

Interesting. I keep getting a Sock2 related error any time I try to use the TLS feature within my WASM module. I need to build with the TLS feature enabled again to grab the error message, but if that sounds familiar to you at all or you have a fix off the top of your head lmk!

[seanwatters]

@devashishdxt, so this is my client code, and my server code. I'm currently getting CORS errors (which I know sometimes means that there's actually some other underlying error) can you maybe help me see what i'm missing?

I'm worried that maybe my keys were generated incorrectly?

openssl req -x509 -newkey rsa:2048 -nodes -keyout server.key -out server.crt -subj "/CN=localhost"

EDIT: I have also tried now with the cert/key pair that you have in your PR and still no luck on CORS stuff.

// client
use once_cell::sync::OnceCell;
use parking_lot::Mutex;
use std::sync::Arc;

use tonic_web_wasm_client::Client;

static APP_CLIENT: OnceCell<Arc<Mutex<ApplicationClient<Client>>>> = OnceCell::new();

pub(crate) fn get_app_client() -> ApplicationClient<Client> {
    let client = APP_CLIENT.get_or_init(|| {
        let base_url = "https://localhost:50052".to_string();

        let client = ApplicationClient::new(Client::new(base_url));

        Arc::new(Mutex::new(client))
    });

    let lock = client.lock();
    let client = lock.clone();

    drop(lock);

    client
}

// server

use std::sync::Arc;
use tokio::sync::Mutex;

use tonic::transport::{Identity, ServerTlsConfig};
use tonic::{transport::Server, Request, Response, Status};

#[tokio::main]
async fn main() -> Result<(), Box<dyn std::error::Error>> {
    let cert = tokio::fs::read("server.crt").await?;
    let key = tokio::fs::read("server.key").await?;
    let identity = Identity::from_pem(cert, key);

    let application_service = ApplicationService {
        db_client: Arc::new(Mutex::new(get_db_client().await)),
    };

    let addr = "[::1]:50052".parse().unwrap();
    println!("Server running at: {}", addr);

    Server::builder()
        .tls_config(ServerTlsConfig::new().identity(identity))?
        .accept_http1(true)
        .add_service(tonic_web::enable(ApplicationServer::new(
            application_service,
        )))
        .serve(addr)
        .await?;

    Ok(())
}

## Cargo.toml

[package]
name = "server"
version = "0.1.0"
edition = "2021"

[dependencies]
tokio = { version = "1.29.1", features = ["full"] }
tokio-stream = "0.1.14"

tonic = { version = "0.9.2", features = ["tls", "transport", "codegen"] }
tonic-web = "0.9.2"
tower-http = { version = "0.4.3", features = ["cors"] }

prost = "0.11.9"
prost-types = "0.11.9"

parking_lot = "0.12.1"
jemallocator = "0.5.0"
base64 = "0.21.2"
serde = { version = "1.0", features = ["derive"] }
serde_json = "1.0"
chrono = "0.4.26"
bcrypt = "0.15.0"
jsonwebtoken = "8.3.0"
http = "0.2.9"

[dependencies.uuid]
version = "1.4.1"
features = ["v4", "fast-rng", "macro-diagnostics"]

[build-dependencies]
tonic-build = "0.9.2"

EDIT:

I have verified that in addition to the pre-flight CORS error on OPTIONS I am actually getting back an NS_ERROR_DOM_BAD_URI. I'm adding a screenshot of the network tab in FF.

EDIT:

Even with this custom CORS configuration I'm still getting the same errors:

#[tokio::main]
async fn main() -> Result<(), Box<dyn std::error::Error>> {
    let cert = tokio::fs::read("server.crt").await?;
    let key = tokio::fs::read("server.key").await?;
    let identity = Identity::from_pem(cert, key);

    let cors = CorsLayer::new()
        .expose_headers(Any)
        .allow_methods(Any)
        .allow_origin(Any)
        .allow_headers(Any);

    let application_service = ApplicationService {
        db_client: Arc::new(Mutex::new(get_db_client().await)),
    };

    let addr = "[::1]:50052".parse().unwrap();
    println!("Server running at: {}", addr);

    Server::builder()
        .tls_config(ServerTlsConfig::new().identity(identity))?
        .layer(GrpcWebLayer::new())
        .layer(cors)
        .add_service(ApplicationServer::new(application_service))
        .serve(addr)
        .await?;

    Ok(())
}

[seanwatters]

i believe i may have found the issue. call has SameOrigin hard coded: https://github.com/devashishdxt/tonic-web-wasm-client/blob/c554356f2d0cc38372750560910abde902c0c35f/src/call.rs#L75

so it's not being overridden by even the FetchOptions i added it looks like.

let options = FetchOptions {
    credentials: Some(Credentials::Include),
    mode: Some(Mode::Cors),
    referrer_policy: Some(ReferrerPolicy::None),
    ..Default::default()
};

i stepped through the WASM bindgen code with the debugger and found that these two were incompatible:

EDIT:

turns out that you cant set Credentials::Include with Allow-Access set to Any. HTTP doesn't let you combine wildcards and creds.

this was not the cause of the issue. but just a thing i found.

[seanwatters]

here's a quick PR to address the hard-coded SameOrigin issue: https://github.com/devashishdxt/tonic-web-wasm-client/pull/43

[seanwatters]

okay, sorry for blowing this PR up so much with comments. I figured out that my issue was just that I had never configured TLS certs before for localhost and just needed to add all the stuff to keychains on MacOS so that the browser didn't get sad.