前言

最近在排查Safari在隱私模式下頁(yè)面參數(shù)丟失的問題，如果通過Safari直接打開B頁(yè)面，此時(shí)在B頁(yè)面可以正常獲取到頁(yè)面鏈接上的參數(shù)，但是如果Safari先打開A頁(yè)面，然后通過A頁(yè)面再跳轉(zhuǎn)到B頁(yè)面（A、B頁(yè)面部署在不同域名下），此時(shí)的B頁(yè)面通過JS就獲取不到鏈接上的參數(shù)了??，這樣就會(huì)導(dǎo)致一些依賴頁(yè)面參數(shù)的功能出現(xiàn)異常！

問題演示

B頁(yè)面鏈接格式如下：xx.qq.com?au=xx...

通過一下代碼獲取頁(yè)面鏈接及頁(yè)面參數(shù)：

console.log('link', window.location.href);
console.log('query', window.location.search);

如果是隱私模式下單獨(dú)打開B頁(yè)面

圖片

此時(shí)可以看到是能夠正常獲取到頁(yè)面完整鏈接（包括參數(shù)）的。符合預(yù)期

但是如果先打開A頁(yè)面，再?gòu)腁頁(yè)面跳到B頁(yè)面（A、B域名不同），我們?cè)賮?lái)看看結(jié)果：

圖片

從上圖可以看到，此時(shí)location.search就已經(jīng)獲取不到了，location.href拿到的值也不再包括location.search了。

那么Safari在隱私模式下的這種做法是為了做什么呢？

Safari隱私瀏覽

通過查詢資料后得知，在 Safari 17 中，隱私瀏覽功能更加私密，并新增了防御措施，以抵御一些最先進(jìn)的追蹤技術(shù)。技術(shù)改進(jìn)包括：

• 鏈接跟蹤保護(hù)
• 阻止已知跟蹤器的網(wǎng)絡(luò)負(fù)載，包括 CNAME 隱藏的已知跟蹤器
• 高級(jí)指紋保護(hù)
• 具有網(wǎng)站或歷史記錄訪問權(quán)限的擴(kuò)展程序默認(rèn)處于關(guān)閉狀態(tài)

鏈接跟蹤保護(hù)

Safari 的“隱私瀏覽”功能在用戶瀏覽不同網(wǎng)站時(shí)，針對(duì)目標(biāo) URL 中的跟蹤信息實(shí)施了兩項(xiàng)新的保護(hù)措施。具體涵蓋的 URL 部分包括查詢參數(shù)和 URL 片段。這些保護(hù)措施旨在使目標(biāo)網(wǎng)站上運(yùn)行的第三方腳本更難以通過讀取 URL 來(lái)關(guān)聯(lián)跨網(wǎng)站的用戶活動(dòng)。

在文檔上有這樣一段話：

圖片

翻譯過來(lái)就是：在跨站導(dǎo)航后的目標(biāo)網(wǎng)站上，所有嘗試讀取完整 URL或參數(shù) 的第三方腳本（例如使用 location.search、location.href 或 document.URL）都將獲得一個(gè)不含查詢參數(shù)或片段的 URL 版本。

也就是說Safari隱私模式下鏈接參數(shù)丟失必須滿足以下兩種情況：

• 頁(yè)面發(fā)生了跨域名跳轉(zhuǎn)
• 獲取鏈接或參數(shù)在第三方腳本中執(zhí)行（其實(shí)就是JS與html模版不在同一個(gè)域名下）

解決方案

同域跳轉(zhuǎn)

既然不同發(fā)生跨域跳轉(zhuǎn)，那么同域名跳轉(zhuǎn)是不是就能正常獲取頁(yè)面鏈接參數(shù)了

圖片

同域部署

如果第一種方案滿足不了業(yè)務(wù)場(chǎng)景，那么可以嘗試將html模版文件與JS文件用相同域名部署，也能規(guī)避Safari隱私模式的限制

內(nèi)聯(lián)腳本

如果你的業(yè)務(wù)既要跨域跳轉(zhuǎn)又不想改部署方案，那么內(nèi)聯(lián)腳本這種方案比較適合你，我們可以在html模版文件內(nèi)插入一段JS腳本去獲取頁(yè)面鏈接及參數(shù)，這樣的話這段JS就不屬于第三方腳本了。

比如：

<!-- index.html -->
<script>
  window.selfLink = window.location.href;
    window.selfSearch = window.location.search;
</script>

然后再使用的地方直接讀取window上的selfLink、selfSearch

console.log('link', window.location.href);
console.log('query', window.location.search);
console.log('--selfLink--', window.selfLink);
console.log('--selfSearch--', window.selfSearch);

圖片

可以看到通過讀取內(nèi)聯(lián)腳本掛在window上的selfLink、selfSearch可以正常獲取，而直接讀取window.location.href會(huì)丟失search參數(shù)。