由于安全问题,sendBeacon API暂时无法正常工作,有什么解决方法吗？

Question

我有以下代码使用sendBeacon方法发送异步HTTP请求,

var data = {
 name: 'test',
 uniqueId: Math.random()
};
var blob = new Blob([JSON.stringify(data)], {type : 'application/json'});
navigator.sendBeacon('http://example.in/data/post', blob);

这段代码已经很好地工作了很长时间.目前,由于Chrome https://bugs.chromium.org/p/chromium/issues/detail?id=490015中的安全问题,我们在"导航器"上看到错误" 无法执行'sendBeacon':sendBeacon()类型不是CORS安全的MIME类型的Blob不允许通过实验.有关详细信息,请参阅http://crbug.com/490015. "

是否有任何解决方法通过使用相同的sendBeacon API修改请求标头来发送JSON数据,直到问题得到解决？对于依赖此API的站点,在修复之前继续使用它将非常有用.关于使用XHR发布数据的建议没有用.

Answer 1

现在,sendBeacon中Content-Type标头唯一允许的值是:

• 应用程序/ x-WWW窗体-urlencoded
• 多部分/格式数据
• 纯文本/

我在项目中遇到了类似的问题,最后我将数据发送为'text/plain; charset = UTF-8'并在服务器端读取流以获取json内容.

客户:

const blob = new Blob([JSON.stringify(myData)], { type: 'text/plain; charset=UTF-8' });
navigator.sendBeacon(appData.ReleaseSessionUrl, blob);

服务器:

using (var reader = new StreamReader(this.Request.InputStream))
{
   var jsonData = reader.ReadToEnd();
   var sessionData = JsonConvert.DeserializeObject<MyDataType>(jsonData);
}

不确定这是否对您有所帮助.

https://github.com/GoogleCloudPlatform/stackdriver-errors-js/issues/10

Answer 2

简短回答：该问题已于2021 年解决。

长答案（背景） ：我在timeonsite JS开发工作前不久就打开了这个问题。它曾经在 Chrome、Firefox 和许多其他浏览器中运行良好。但是，几个月后，我突然遇到了上述CORS 安全列表错误，并且无法实时节省站点数据时间。它迫使我们回退到本地存储，这将导致在每个用户会话期间产生(N-1)次页面浏览量和随后丢失的现场时间数据，这是一个关键的网络分析指标。我们一直热切地等待浏览器供应商解决这个问题。这是我们用于捕获实时的配置，它直接依赖于sendBeacon() API

<script type="text/javascript">
    var Tos;
    (function(d, s, id, file) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s);
        js.id = id;
        js.onload = function() {
            // save with XMLHttpRequest (sync=true is blocking approach) or sendBeacon(preferred approach)
            var config = {
                trackBy: 'seconds',
                callback: function(data) {
                    console.log(data);

                    // give your endpoint URL/ server-side URL that is going to handle your TOS data which is of POST method. Eg. PHP, nodejs or python URL which saves this data to your DB
                    var endPointUrl = 'http://localhost:4500/tos'; // replace with your endpoint URL

                    if (data && data.trackingType) {
                        if (data.trackingType == 'tos') {
                            if (Tos.verifyData(data) != 'valid') {
                                console.log('Data abolished!');
                                return; 
                            }
                        }
                        
                        // make use of sendBeacon if this API is supported by your browser.
                        if (navigator && typeof navigator.sendBeacon === 'function') {
                            data.trasferredWith = 'sendBeacon';
                            var blob = new Blob([JSON.stringify(data)], {type : 'application/json'});
                            navigator.sendBeacon(endPointUrl, blob);
                        }

                        /*else {

                            // XMLHttpRequest begins..
                            // XMLHttpRequest with sync=true (blocking approach)
                            // XMLHttpRequest code block here to post your data
                        }*/
                    }
                }
            };

            if (TimeOnSiteTracker) {
                Tos = new TimeOnSiteTracker(config);
            }
        };
        js.src = file;fjs.parentNode.insertBefore(js, fjs);
    } (document, 'script', 'TimeOnSiteTracker', 'https://cdnjs.cloudflare.com/ajax/libs/timeonsite/1.1.0/timeonsitetracker.min.js'));
</script> 

正如您在上面看到的，由于 CORS 安全列表问题，我们在过去几年中一直在注释掉 sendBeacon() 代码块，并且依赖于async =false 的XMLHTTPRequest来发布数据，这是阻塞方法，并且在许多浏览器上不太可靠，尤其是在移动设备上设备。

最近，浏览器供应商似乎已经解决了该问题，并且sendBeacon() API又重新可供使用。我在多种浏览器上进行了测试，看起来工作正常。因此，自 2021 年起，此问题已标记为“已解决”。我希望您添加与beforeunload / unload窗口事件中提到的版本/年份配合良好的设备/浏览器。