使用Chrome擴展程序中的AJAX請求檢測URL是否支持HTTP2？

Question

我希望用戶能夠將其網站網址輸入到Chrome擴展程序中的輸入框中，Chrome擴展程序將使用AJAX請求或其他類似內容來檢測並告知用戶URL后面的服務器是否支持發送響應通過HTTP2。 這可能嗎？

也許WebRequest有辦法獲取這些信息？ 還是新的Fetch API？ 你的請求能否以某種方式告訴服務器只能理解HTTP2回復？ 我看不出明顯的方式。

我知道你可以使用window.chrome.loadTimes().connectionInfo來獲取當前頁面的協議，但這需要加載我不想做的整個頁面。

示例URLS：

通過HTTP2發送： https ：//cdn.sstatic.net/

通過HTTP 1.1提供： https ： //stackoverflow.com/

Answer 1

HTTP / 2響應需要一個“狀態”響應頭 - https://http2.github.io/http2-spec/#HttpResponse ，因此要檢查響應是否使用HTTP / 2，您可以使用chrome.webRequest.onHeadersReceived extraInfoSpec中帶有"responseHeaders"的事件。 例如，對於您的測試用例：

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');

Answer 2

編輯：顯然你可以用iframe和webRequest技巧做到這一點！ 我發現了一個參考要點（但我自己沒有測試過）：

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

老答復

如果沒有外部API，您可能無法做到這一點。 這就是原因

1）使用ajax只要求要測試的url的服務器將CORS頭發送回用戶，否則瀏覽器將不接受它。

2）您可以動態創建iframe並在iframe contentWindow使用chrome.loadTimes().connectionInfo ，但如果服務器發送X-Frame-Options: Deny標題，瀏覽器將不允許您在iframe中加載網址。

3）通過webRequest API剝離X-frame ，如此處所述

在Chrome擴展程序中解決X-Frame-Options DENY問題？

可能無法正常工作，afaik Chrome擴展程序不允許修改響應正文。

可能的解決方案

1）使用添加適當頭的簡單代理可以解決上述問題。 以下是使用Nginx進行操作的參考資料

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

2）只需創建一個自定義API，為服務器端執行請求，並解析結果以檢查http2支持。 如果您的擴展程序受歡迎，那么擴展它仍然相當容易，例如通過緩存和水平擴展。

希望這可以幫助！