前言

最近在排查Safari在隱私模式下頁面參數丟失的問題，如果通過Safari直接打開B頁面，此時在B頁面可以正常獲取到頁面鏈接上的參數，但是如果Safari先打開A頁面，然後通過A頁面再跳轉到B頁面（A、B頁面部署在不同域名下），此時的B頁面通過JS就獲取不到鏈接上的參數了🤔，這樣就會導致一些依賴頁面參數的功能出現異常！

問題演示

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

通過一下代碼獲取頁面鏈接及頁面參數：

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

如果是隱私模式下單獨打開B頁面

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

但是如果先打開A頁面，再從A頁面跳到B頁面（A、B域名不同），我們再來看看結果：

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

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

Safari隱私瀏覽

通過查詢資料後得知，在 Safari 17 中，隱私瀏覽功能更加私密，並新增了防禦措施，以抵禦一些最先進的追蹤技術。技術改進包括：

• 鏈接跟蹤保護
• 阻止已知跟蹤器的網絡負載，包括 CNAME 隱藏的已知跟蹤器
• 高級指紋保護
• 具有網站或歷史記錄訪問權限的擴展程序默認處於關閉狀態

鏈接跟蹤保護

Safari 的“隱私瀏覽”功能在用户瀏覽不同網站時，針對目標 URL 中的跟蹤信息實施了兩項新的保護措施。具體涵蓋的 URL 部分包括查詢參數和 URL 片段。這些保護措施旨在使目標網站上運行的第三方腳本更難以通過讀取 URL 來關聯跨網站的用户活動。

在文檔上有這樣一段話：

翻譯過來就是：在跨站導航後的目標網站上，所有嘗試讀取完整 URL或參數 的第三方腳本（例如使用 location.search、location.href 或 document.URL）都將獲得一個不含查詢參數或片段的 URL 版本。

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

• 頁面發生了跨域名跳轉
• 獲取鏈接或參數在第三方腳本中執行（其實就是JS與html模版不在同一個域名下）

解決方案

同域跳轉

既然不同發生跨域跳轉，那麼同域名跳轉是不是就能正常獲取頁面鏈接參數了

同域部署

如果第一種方案滿足不了業務場景，那麼可以嘗試將html模版文件與JS文件用相同域名部署，也能規避Safari隱私模式的限制

內聯腳本

如果你的業務既要跨域跳轉又不想改部署方案，那麼內聯腳本這種方案比較適合你，我們可以在html模版文件內插入一段JS腳本去獲取頁面鏈接及參數，這樣的話這段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);

可以看到通過讀取內聯腳本掛在window上的selfLink、selfSearch可以正常獲取，而直接讀取window.location.href會丟失search參數。