單頁面應用(Single Page Application)簡稱 SPA,使用 SPA 理念構建的應用優點有用戶體驗好、速度快,內容的改變不需要重新加載整個頁面,避免了不必要的跳轉和重複渲染,從而相對減輕了服務器壓力。
實作上,使用 HTML5 的 PushState + Ajax 可實現不刷新整個頁面卻可讓地址欄變換、頁面局部刷新的效果。
在 SEO 方面,Google官方宣布不再繼續支持2009年以來的AJAX的googlebot檢索。
Google建議在建置網站時應該使用漸進增強的原則。
如果已經實施了Google關於AJAX的建議 ,Google表示網站仍然會被索引,但建議網站應支援新的隨時間變化的作法。
具體解釋window.history:
https://tw.saowen.com/a/022ff7a00a0cc0214313135aba4cbc178a59784adda3bf0a6120038b205eac9c
PushState+Ajax實現簡單的單頁面應用SPA:
https://www.itread01.com/articles/1476680423.html
ajax与HTML5 history pushState/replaceState实例
https://www.zhangxinxu.com/study/201306/ajax-page-html5-history-api.html?area=pudong
Javascript實現前端簡單路由:
https://www.itread01.com/articles/1476578707.html
PushState and Ajax
http://www.ayqy.net/blog/pjaxpushstate-and-ajax/
pjax = pushState + ajax (一個開源的 jQuery plugin)
https://github.com/defunkt/jquery-pjax
了解 Ajax 漏洞
Ajax 吸引 Web 開發人員的地方也是對其安全性最易受威脅的地方。眾多安全專家一致認為 Web 應用程序是網絡犯罪的一大目標,但是 Web 安全通常只是企業安全預算的一小部分。由於 Ajax 被用於開發很多可在 Web 上看到的應用程序,因此它的流行使其成為攻擊者在 JavaScript 代碼中尋找漏洞的目標。
Ajax 存在的核心是可以用它來創建數據驅動網站。真正吸引攻擊者的不是可以將 Ajax 用作 Web 應用程序開發工具,而是數據,不管是金融數據、個人數據還是機密數據,都是珍貴的在線商品,Ajax 再次發現自己成為了網絡犯罪的焦點。
在使用 Ajax 進行開發時,可以採用以下步驟防止出現 XSS 漏洞
確保 JavaScript 變量被引用。
使用 JavaScript 十六進制編碼。
使用 JavaScript Unicode 編碼。
避免反斜杠編碼(\"、\' 或 \\)。
使用 JSON.parse 或 json2.js 庫來分析 JSON。
避免使用 eval() 方法分析 JSON,它執行任何包含 JSON 的腳本。
要避免Ajax 橋接漏洞,在橋接時除了需要與第三方的站點之間建立信任,也應該審核第三方站點以何種方式訪問您的站點,並掃描可能被橋接利用的任何漏洞。
與 Ajax 相關的資安議題應詳閱 https://www.ibm.com/developerworks/cn/web/wa-vulnerabilities/index.html
資安風險:
駭客的攻擊方向之一恐怕會是尋找該應用的 Javascript 編程漏洞,另一個攻擊方向可能是 XSS、SQL注入,或是將目標放在大量的用戶資訊等容易被輕忽的XML或 JSON 資料傳遞。
比如說先取得明星的粉絲 Email ,再假借明星的名義對粉絲販售商品。
由於在用戶端有各種不確定性,比如用戶可能會使用各種方式來另開分頁,所以許多細節都必須考慮在 SPA 應用編程內,而 Javascript 程式碼必須赤裸裸地開源在前端,越複雜的程式碼,透露的資訊越多,為攻擊者提供了越多的線索 (資深的程式師從一段編程,看到的不只是程序是否存在安全議題,也看得到該程式碼創作者可能是個人還是團隊、軟體管理的情況、編程習慣、資歷等)。
Ajax 受到喜愛的原因是提高了 UI/UX 用戶體驗的同時還降低了 Server 負擔,然而,顧及用戶端的許多使用細節,就是得應用更大量的前端編程;當前端設計越複雜,如果只是 CSS 這些不涉及資安的層面,對維護者的心理壓力尚輕;若一旦涉及資安,就變成越養越大的不定時炸彈了。
所以,適度地使用 Ajax 會有好處,但是過度使用則會帶來隱憂,取捨並達到平衡點就好。