Safari 隱私模式下，URL 參數(shù)為何神秘消失？
前言
最近在排查Safari在隱私模式下頁面參數(shù)丟失的問題，如果通過Safari直接打開B頁面，此時(shí)在B頁面可以正常獲取到頁面鏈接上的參數(shù)，但是如果Safari先打開A頁面，然后通過A頁面再跳轉(zhuǎn)到B頁面（A、B頁面部署在不同域名下），此時(shí)的B頁面通過JS就獲取不到鏈接上的參數(shù)了??，這樣就會(huì)導(dǎo)致一些依賴頁面參數(shù)的功能出現(xiàn)異常！
問題演示
B頁面鏈接格式如下：xx.qq.com?au=xx...
通過一下代碼獲取頁面鏈接及頁面參數(shù)：
console.log('link', window.location.href);
console.log('query', window.location.search);如果是隱私模式下單獨(dú)打開B頁面
圖片
此時(shí)可以看到是能夠正常獲取到頁面完整鏈接（包括參數(shù)）的。符合預(yù)期
但是如果先打開A頁面，再從A頁面跳到B頁面（A、B域名不同），我們再來看看結(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 隱藏的已知跟蹤器
- 高級指紋保護(hù)
- 具有網(wǎng)站或歷史記錄訪問權(quán)限的擴(kuò)展程序默認(rèn)處于關(guān)閉狀態(tài)
鏈接跟蹤保護(hù)
Safari 的“隱私瀏覽”功能在用戶瀏覽不同網(wǎng)站時(shí)，針對目標(biāo) URL 中的跟蹤信息實(shí)施了兩項(xiàng)新的保護(hù)措施。具體涵蓋的 URL 部分包括查詢參數(shù)和 URL 片段。這些保護(hù)措施旨在使目標(biāo)網(wǎng)站上運(yùn)行的第三方腳本更難以通過讀取 URL 來關(guān)聯(lián)跨網(wǎng)站的用戶活動(dòng)。
在文檔上有這樣一段話：
圖片
翻譯過來就是：在跨站導(dǎo)航后的目標(biāo)網(wǎng)站上，所有嘗試讀取完整 URL或參數(shù) 的第三方腳本（例如使用 location.search、location.href 或 document.URL）都將獲得一個(gè)不含查詢參數(shù)或片段的 URL 版本。
也就是說Safari隱私模式下鏈接參數(shù)丟失必須滿足以下兩種情況：
- 頁面發(fā)生了跨域名跳轉(zhuǎn)
- 獲取鏈接或參數(shù)在第三方腳本中執(zhí)行（其實(shí)就是JS與html模版不在同一個(gè)域名下）
解決方案
同域跳轉(zhuǎn)
既然不同發(fā)生跨域跳轉(zhuǎn)，那么同域名跳轉(zhuǎn)是不是就能正常獲取頁面鏈接參數(shù)了
圖片
同域部署
如果第一種方案滿足不了業(yè)務(wù)場景，那么可以嘗試將html模版文件與JS文件用相同域名部署，也能規(guī)避Safari隱私模式的限制
內(nèi)聯(lián)腳本
如果你的業(yè)務(wù)既要跨域跳轉(zhuǎn)又不想改部署方案，那么內(nèi)聯(lián)腳本這種方案比較適合你，我們可以在html模版文件內(nèi)插入一段JS腳本去獲取頁面鏈接及參數(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ù)。
