1. 程式人生 > >HTTPS頁面使用CNZZ統計程式碼,Chrome顯示警告怎麼辦?

HTTPS頁面使用CNZZ統計程式碼,Chrome顯示警告怎麼辦?

很多站長會遇到一個問題,網站加入CNZZ的JS統計程式碼後,Chrome瀏覽器出現警告:阻止跨站解析器阻斷指令碼通過document.write呼叫(A parser-blocking, cross site script,XXXX.js is invoked via document.write.)。該警告有時候可能會使HTTPS頁面出現不安全因素,甚至讓使用EV SSL證書的網站出現不顯示綠色位址列等問題。本文將帶您找出錯誤原因,解決Chrome對CNZZ統計程式碼報錯的問題。

 

該警告的具體內容

通過Chrome開發者工具檢視器中(按F12檢視console),可以查出網站是否存在這類警告(warnings)。在網路正常的情況下,這類報錯不會影響HTTPS頁面的展示,但是在網路連線較差等情況下,資源載入可能會被阻止,從而可能導致HTTPS頁面出現不安全因素提示。

 

該警告的具體內容:

A parser-blocking, cross site (i.e. different eTLD+1) script, https://s22.cnzz.com/z_stat.php?id=XXXX.js, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity.

翻譯過來就是:

一個跨站解析器阻斷指令碼XXXX.js通過document.write呼叫,如果裝置的網路連線較差,該指令碼的網路請求可能會被瀏覽器在此頁面或未來頁面載入中被阻止。

 

為什麼會出現警告?

谷歌從Chrome 55版本開始干預“通過document.write插入的跨站解析器阻斷指令碼”的載入,提升頁面載入速度。

根據Chromestatus的表述,對於諸如2G之類的連線速度較慢的使用者來說,通過document.write載入的第三方指令碼,效能損失通常非常嚴重,以至於主頁內容的顯示會延遲數十秒。

在瀏覽器呈現頁面之前,必須通過解析HTML標記來構建DOM樹。無論何時解析器遇到指令碼,它都必須停止並執行指令碼,才能繼續解析HTML。如果指令碼動態插入另一個指令碼,解析器將被迫等待更長時間才能下載資源,這可能會導致一次或多次網路往返並延遲首次呈現頁面的時間。

Chrome從第55版開始代表所有使用者進行干預,具體來說,當滿足以下所有條件時,Chrome將不執行通過document.write()插入的<script>元素:

  •  使用者處於慢速連線,特別是使用者使用2G網路(未來這種干預可能延伸到其他使用慢速連線的使用者,如慢速3G或WiFi)。
  •  Document.write()在Top層文件中。
  •  Document.write()中的指令碼是解析器阻斷指令碼。但具有“非同步”或“延遲”屬性的指令碼仍將正常執行。
  •  該指令碼不是託管在同一站點上。換句話說,Chrome瀏覽器不會針對匹配 eTLD+1的指令碼進行干預(例如,託管在js.example.org上指令碼插入到www.example.org上)。
  •  該指令碼尚未在瀏覽器HTTP快取中。快取中的指令碼不會導致網路延遲,所以仍會執行。
  •  該頁面的請求不是重新載入。如果使用者觸發了重新載入Chrome不會干預,會像平常一樣執行頁面。
  •  第三方片段有時使用Document.write()載入指令碼。第三方通過提供非同步載入替代方案,可以允許第三方指令碼載入而不會阻止頁面剩餘內容的顯示。

 

 

解決方法

為了完整顯示網站綠色位址列,只能放棄CNZZ統計功能了嗎?當然不是。

解決辦法就是將網站的CNZZ普通JS程式碼更改為非同步統計程式碼。示例如下: 

原統計程式碼:

<script src="https://s22.cnzz.com/z_stat.php?id=XXXXXXX&web_id=XXXXXX" language="JavaScript"></script>

改寫為非同步統計程式碼:

<script>

var cnzz_s_tag = document.createElement('script');

cnzz_s_tag.type = 'text/javascript';

cnzz_s_tag.async = true;

cnzz_s_tag.charset = 'utf-8';

cnzz_s_tag.src = 'https://w.cnzz.com/c.php?id=XXXXXXXX&async=1';

var root_s = document.getElementsByTagName('script')[0];

root_s.parentNode.insertBefore(cnzz_s_tag, root_s);

</script>

 

請複製以上程式碼,改寫統計id後放置到需要統計的網站頁面中,需要注意:新增好非同步統計程式碼後,一定要刪除原來的統計程式碼,否則統計資料會重複計算。

經過站點實測,更新非同步統計程式碼後,Chrome對CNZZ統計程式碼的warnings已經消失,網站頁面和統計功能都正常。剩下的一個warning是Chrome對百度商橋的SSL證書即將在賽門鐵克證書制裁策略中失效的警告,不屬於本文討論範圍。

  

至此,Chrome對使用CNZZ統計程式碼的HTTPS頁面報錯的問題,就徹底解決了。

&n