How to fetch() with ssl client authentication?

Question

• Background: I am building a chrome extension that sends a simple http request and should be able to work with ssl client authentication.
• Goal: Send a fetch request to a site with ssl client authentication without user having to open the site first.
• What happens so far:
  • The request is only successful after i open the site manually.
  • Attempted using credentials: 'include' as suggested here - didn't solve the issue.
  • Im getting TypeError: failed to fetch
• Fetch API docs @ Mozilla don't seem to mention this (here and here)

fetch is sent as follows:

    fetch(url)
        .then(response => {
            if(!response.ok){
                throw Error("Http request failed");
            }else{
                return response
            }
        })
        .then(response => response.text())
        .then(validate => validate.replace(/\D/g,''))
        .then(count => {
            chrome.action.setBadgeText({text: count});
            if(callback){
                callback();
            }
        })
        .catch(error => {
            console.log(error)
            if(callback){
                callback();
            }
        });

I would be very grateful if you could guide me on what might be the issue.

As this is was not resolve for a couple of years or so, i opened a bug at the chromium bug tracker

Lowis

in the spec it says: "If the HTTP request results in a TLS client certificate dialog, then: If request’s window is an environment settings object, make the dialog available in request’s window. Otherwise, return a network error." – Tedesco

So I'd speculate that as you're not running in a regular JS environment, window is unavailable (is it?) and thus it can't open the "client certificate dialog". That's pure speculation though – Tedesco

@JonasWilms This appears to be the case. Im using a service worker which has a different global scope as mentioned here and here – Lowis

I assume that i might need to create a window as suggested here – Lowis

Realized this will open a new window/tab and is not a good solution for my usage. – Lowis

I also had same issue, mutual TLS fetch worked with only TLS 1.2 on my ChromeBook. I'm not sure what is exactly wrong, but When server support TLS1.2 and TLS1.3, Chrome extension shows error "TypeError: failed to fetch" same as you – Arabia

Opening a new tab worked for me: chrome.tabs.create({ url: 'https://YourUnsecureAPIServer' }). After this my fetch call worked inside my Chrome Extensions' background script. Chrome will probably prompt you about visiting an insecure website, if you haven't manually approved it previously. There may be a more elegant way but this works for my private context (the extension is internal use only). – Chanty

Spoke too soon: It seems that I have to switch back or create a new tab with every fetch event called from my content-script. – Chanty