CODEWITHSUNDEEP
javascriptajaxgoogle-chromegoogle-chrome-extensionhttp2
fstr
fstr

Reputation: 940

Detect if URL supports HTTP2 using AJAX request in Chrome Extension?

I want the user to be able to enter their website URL into an input box that is part of a Chrome Extension and the Chrome extension will use an AJAX request or something similar to detect and tell the user if the server behind the URL supports sending responses via HTTP2. Is this possible?

Maybe the WebRequest has a way of picking up this information? Or the new Fetch API? Could your request tell the server somehow that only HTTP2 replies are understood? I can't see an obvious way.

I know you can use window.chrome.loadTimes().connectionInfo to get the protocol of the current page but this requires loading the whole page which I don't want to do.

Example URLS:

Delivered over HTTP2: https://cdn.sstatic.net/

Delivered over HTTP 1.1: https://stackoverflow.com/

Upvotes: 16

Views: 2736

Answers (2)

Rob W
Rob W

Reputation: 349182

HTTP/2 responses require a "status" response header - https://http2.github.io/http2-spec/#HttpResponse, so to check whether the response is using HTTP/2, you can use the chrome.webRequest.onHeadersReceived event with "responseHeaders" in extraInfoSpec. For example, with your test cases:

chrome.webRequest.onHeadersReceived.addListener(function(details) {
    var isHttp2 = details.responseHeaders.some(function(header) {
        return header.name === 'status';
    });
    console.log('Request to ' + details.url + ', http2 = ' + isHttp2);
}, {
    urls: ['https://cdn.sstatic.net/*', 'http://stackoverflow.com/*'],
    types: ['xmlhttprequest']
}, ['responseHeaders']);

// Tests:
fetch('http://stackoverflow.com');
fetch('https://cdn.sstatic.net');

Upvotes: 1

nardeas
nardeas

Reputation: 634

EDIT: Apparently you can do this with the iframe and webRequest trick! I found a reference gist (but I haven't tested it myself though):

https://gist.github.com/dergachev/e216b25d9a144914eae2

OLD ANSWER

You probably won't able able to do this without an external API. Here's why

1) Using ajax only requires that the server of the url to be tested sends CORS headers back to the user, otherwise the browser will not accept it.

2) You could create an iframe on the fly and use chrome.loadTimes().connectionInfo in the iframe contentWindow but if the server sends X-Frame-Options: Deny header the browser won't let you load the url in the iframe either.

3) Stripping the X-frame headers via webRequest API as mentioned here

Getting around X-Frame-Options DENY in a Chrome extension?

will likely not work, afaik Chrome extension are not allowed to modify the response body.

Possible solutions

1) The problems above could be solved using a simple proxy that adds the appropriate headers. Here's a reference on how to do it using Nginx

http://balaji-damodaran.com/programming/2015/07/30/nginx-headers.html

2) Just create a custom API that does the request for you server-side and parses the result to check for http2 support. If your extension gets popular it would still be fairly easy to scale it up e.g via caching and horizontal scaling.

Hope this helps!

Upvotes: 0

Related Questions