從html5的新特性定位安全問題

時間 2021-01-19

標籤 javascript html java python web 瀏覽器安全 cookie session dom 欄目 HTML5 简体版

原文原文鏈接

公司這邊的在線客服系統遇到了點安全問題，分析了開發的方案：javascript

由於是web的聊天系統，聊天記錄通常會存在html的dom裏，存在客戶端，每次打開還能看到聊天的歷史記錄，之前騰訊的web qq就是這麼實現的，可是問題是這樣以來，dom會被撐的很大，加載起來就會變慢，必定量甚至會形成瀏覽器崩潰，同時也想過用cookie存，可是畢竟cookie這東西太大了就不太好了。因而採用了另外一種辦法是採用h5提供的客戶端存儲數據的一種新方法（web storage）html

localStorage - 沒有時間限制的數據存儲java

還有一種是python

sessionStorage - 針對一個 session 的數據存儲web

localStorage的效果就是你關閉瀏覽器後，再次打開計數器依然不變，由於是記錄在本地的瀏覽器

<!DOCTYPE HTML>
<html>
<title>localstorage</title>
<body>

<script type="text/javascript">

if (localStorage.pagecount)
	{
	localStorage.pagecount=Number(localStorage.pagecount) +1;
	}
else
	{
	localStorage.pagecount=1;
	}
document.write("Visits: " + localStorage.pagecount + " time(s).");

</script>

<p>刷新頁面會看到計數器在增加。</p>

<p>請關閉瀏覽器窗口，而後再試一次，計數器會繼續計數。</p>

</body>
</html>

若是使用sessionStorage就不同了。由於是基於會話記錄的，關閉了，計數器就沒了。。。換成聊天的話，你的聊天記錄也就沒了。。。因此不太適合咱們的須要。。。安全

<!DOCTYPE HTML>
<html>
<title>sessionstorage</title>
<body>

<script type="text/javascript">

if (sessionStorage.pagecount)
	{
	sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
	}
else
	{
	sessionStorage.pagecount=1;
	}
document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");

</script>

<p>刷新頁面會看到計數器在增加。</p>

<p>請關閉瀏覽器窗口，而後再試一次，計數器已經重置了。</p>

</body>
</html>

可是因爲localStorage存在客戶端，因此不能分配太大的空間，咱們給他分配了5M空間，而且週期性的清除localstorage，這裏定位了一個安全問題，發送消息的接口是沒有加密的，因而我寫了一個python的程序模擬發送消息，一會這個消息就在清除以前寫滿了，溢出了，因此接口要作加密限制，不能暴露在外，還要限制接口的請求頻率等。cookie

寫下這篇作個記錄。。。session