javascript - Chrome 74 打破了 Chrome 扩展的工作

Question

我有一个 Chrome 扩展程序，可以将 Facebook 消息下载到计算机上。在 Chrome (v.74) 的最新更新后，它停止工作。

我创建了一个测试扩展，可以帮助您了解发生了什么。 所以你可以从这里下载它:test extension或者使用我在下面提供的代码从头开始创建它。

list .json

{"name": "TEST",
"description": "TEST CHROME 74 BROKEN RESPONSE HEADERS",
"version": "1.0",
"manifest_version": 2,    
"permissions": [        
    "https://*.facebook.com/",
    "activeTab",
    "cookies",
    "contextMenus",
    "tabs",
    "webRequest",
    "webRequestBlocking",
    "storage",  
    "https://connect.facebook.net/en_US/all.js" 
],

"web_accessible_resources": [       

],
"background": {
    "scripts": [ "background.js" ]
},
"browser_action": {
    "default_popup": "popup.html"
}}

background.js

chrome.webRequest.onBeforeRequest.addListener(
function(details)
{
    if ((details.url.indexOf('https://www.facebook.com/api/graphql/') !== -1 ||
         details.url.indexOf('https://www.messenger.com/api/graphql/') !== -1 ||
    details.url.indexOf('https://www.facebook.com/api/graphqlbatch/') !== -1 ||
         details.url.indexOf('https://www.messenger.com/api/graphqlbatch/') !== -1)            
        && (details.requestBody.raw || details.requestBody.formData)) {

    var match;

    if (details.requestBody.raw) {
        var decoded = decodeURIComponent(new TextDecoder('utf-8').decode(details.requestBody.raw[0].bytes));
        match = decoded.match(/"(threadFBID|messageThreadID)":"(\d+?)"/);        
    }

    if (details.requestBody.formData) {
        match = details.requestBody.formData.variables[0].match(/"(threadFBID|messageThreadID)":"(\d+?)"/);
    }


    if (match) {
        chrome.storage.local.set({ 'chatID': match[2] }, function(){                               
            chrome.tabs.query({active: true}, function(tabs) {
               chrome.tabs.executeScript(tabs[0].id, {file: "js/jquery-3.1.1.min.js"}, function(){                        
                    chrome.tabs.executeScript(tabs[0].id, { file: "js/dateOptions.js" }, function() {                   
                    }); 

                });    
            });
        });
    }
}

},
{urls: ["https://www.facebook.com/*", "https://www.messenger.com/*"]},
['requestBody']);

dateOptions.js

var load_data = function(token, id) {  

   var url = 'https://www.facebook.com/api/graphqlbatch/';    
   var docId =  '1699057486820841';         
   var dataString = '__user=' + id + '&__a=1&fb_dtsg=' + token;


   dataString +=
   '&queries=%7B%22'
   + 'o0' + '%22%3A%7B%22'  
   + 'doc_id' + '%22%3A%22' + docId + '%22%2C%22'
   + 'query_params' + '%22%3A%7B%22' 
   + 'limit' + '%22%3A' + 50 + '%2C%22' 
   + 'before%22%3A' + null + '%2C%22'
   + 'tags%22%3A%5B%22' + 'INBOX' + '%22%5D%7D%7D%7D';


   $.ajax({                    
       type: 'POST',
       url: url,
       data: dataString,
       dataType: "json",   

       success: function(data){

       },
       error: function(XMLHttpRequest, textStatus, errorThrown) { 

           chrome.storage.local.set({
               'data': XMLHttpRequest.responseText
           });
       }                   
   });   };



var set_id_and_token = function(cb) {
   var scr = document.querySelectorAll("script");
   var myIdSet = false, tokenSet = false;
   // set FB token and owner's id
   for (var i = 0; i < scr.length; i++) {    

       var token = scr[i].textContent.match(/\"token\"\:\"(.*?)\"/);
       if (token) {  
           token = token[1];
           tokenSet = true;
       }

       var id = scr[i].textContent.match(/\"USER_ID\"\:\"(.*?)\"/);
       if (id) {
           id = id[1];
           myIdSet = true;
       }

       if (myIdSet && tokenSet) break;
   }

   cb(token, id);                                                                           
}



chrome.storage.local.get(null, function(items) { 

   set_id_and_token(function(token, id){
       load_data(token, id);
   });    });

您还需要一个 jquery-3.1.1.min.js 文件来运行 AJAX 请求。

重现问题的步骤:

1.将测试扩展程序添加到您的 Chrome 浏览器。

2.转到https://www.facebook.com/messages/t/ (当然你必须登录)

3.选择收件箱中的任何聊天。

4.打开扩展程序的弹出窗口。

现在，根据 Chrome 的版本，您将获得两个输出之一。

如果您使用的是 74 及更高版本:

如果你有 74 之前的版本:

也就是说，在最新更新之前，扩展程序可以从 Facebook 服务器获取必要的信息。

到目前为止我发现了什么。

我调查了扩展程序在这两个不同版本的 Chrome 上发送的请求，发现了以下差异。

在请求 header 中 - 来源不同

版本 74+:

74 以下的版本:

在响应 header 中 - 访问控制 header 和 CSP 的区别

版本 74+:

74 以下的版本:

如果有人可以就如何解决这个问题分享他们的想法，我将不胜感激。

Answer 1

因此，在 Chrome 修复错误的同时，我提出了以下覆盖 'origin' 请求 header 的解决方案。

下面的代码应该放在background.js中:

chrome.webRequest.onBeforeSendHeaders.addListener(
function(details) {
    //details holds all request information. 
    for (var i = 0; i < details.requestHeaders.length; ++i) {
        //Find and change the particular header.
        if (details.requestHeaders[i].name === 'Origin') {

            details.requestHeaders[i].value ="https://www.facebook.com";
            break;
        }
    }
    return { requestHeaders: details.requestHeaders };
},
{urls: ['<all_urls>']},
['blocking', 'requestHeaders']);