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, we see the error "Failed to execute 'sendBeacon' on 'Navigator': sendBeacon() with a Blob whose type is not CORS-safelists MIME-type is disallowed experimentally. See http://crbug.com/490015 中的安全问题了解详情。"

是否有任何解决方法可以通过使用相同的 sendBeacon API 修改请求 headers 来发送 JSON 数据，直到问题得到解决？依赖此 API 的站点在修复完成之前继续使用它会很有用。关于使用 XHR 处理 post 数据的建议没有用。

Answer 1

sendBeacon 中 Content-Type header 的唯一允许值现在是：

application/x-www-form-urlencoded
multipart/form-data
text/plain

我在我们的项目中遇到了类似的问题，我最终将数据作为 '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

请注意，该方法似乎在大多数浏览器上都无法使用。这是关于该主题的 large data study。

Answer 3

简答：该问题已于 2021 年解决.

长答案（背景）：我在 timeonsite JS 开发时打开了这个问题。它曾经在 Chrome、Firefox 和许多其他浏览器中运行良好。但是，几个月后，我突然遇到 CORS 安全列表错误 并且无法实时保存站点数据。它迫使我们回退到 Localstorage，这将导致 (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() 代码块，并且依赖于 XMLHTTPRequest 和 async=false 到 post 数据是一种阻塞方法，在许多浏览器上尤其是在移动设备上不太可靠。

最近，该问题似乎已被浏览器供应商解决，并且 sendBeacon() API 已恢复使用.我在许多浏览器上进行了测试，它似乎工作正常。因此，自 2021 年起，此问题被标记为“已解决”。我希望您添加与version/year 因 beforeunload/unload[=45= 受到好评] window 个事件。

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

sendBeacon API not working temporarily due to security issue, any workaround?

webkit

google-chrome

web-analytics

sendbeacon