自從1990年有了www互聯(lián)網(wǎng)這個(gè)概念后，web應(yīng)用程序經(jīng)歷了從提供靜態(tài)HTML頁面到完全動(dòng)態(tài)的復(fù)雜的業(yè)務(wù)應(yīng)用的改變。
今天我們有各種各樣的電子資源或圖書來告訴我們?nèi)绾伍_發(fā)各種各樣的應(yīng)用程序。現(xiàn)在的開發(fā)環(huán)境也足夠智能，可以幫我們發(fā)現(xiàn)并修復(fù)很多錯(cuò)誤。甚至有很多不同的開發(fā)平臺(tái)提供方便的將靜態(tài)頁面轉(zhuǎn)換為高度可交互的應(yīng)用的功能。
所有的這些開發(fā)模式、時(shí)間和平臺(tái)都有共同點(diǎn)，并且容易犯相似的錯(cuò)誤因?yàn)閣eb應(yīng)用的本質(zhì)。
本文意在揭示一些在Web開發(fā)過程的不同階段作出的常見錯(cuò)誤，并幫你減少這些錯(cuò)誤。我涉及了一些幾乎所有的web開發(fā)者都熟悉的話題，想驗(yàn)證、安全、擴(kuò)展性和SEO等。當(dāng)然你不應(yīng)該被我所描述的具體情況限制住，列出這些只是為了在你遇到潛在的問題的時(shí)候有一些啟發(fā)。
常見錯(cuò)誤 #1: 不完整的輸入驗(yàn)證
客戶端和服務(wù)器端的用戶輸入驗(yàn)證是一個(gè)簡單但是必須要做的！。我們都知道“不要相信用戶的輸入”這句真理，但是源于驗(yàn)證的錯(cuò)誤還是頻繁發(fā)生。
驗(yàn)證錯(cuò)誤的最常發(fā)生的結(jié)果就是 SQL Injection ，這是OWASP Top 10 中的一個(gè)。
一定要記住大多數(shù)的前端開發(fā)框架提供的擠開即用的驗(yàn)證規(guī)則都太簡單。而且，大多數(shù)的后端開發(fā)平臺(tái)都使用簡單的注解來確保提交的數(shù)據(jù)是規(guī)則期望的。實(shí)現(xiàn)驗(yàn)證可能比較費(fèi)時(shí)，但是這應(yīng)該是你的編碼習(xí)慣的一部分，而不應(yīng)該放在一邊不管。
常見錯(cuò)誤 #2: 認(rèn)證沒有合適的授權(quán)
在我們繼續(xù)之前，請(qǐng)確保達(dá)成兩個(gè)概念的意志。這是 10 Most Common Web Security Vulnerabilities 所說的:
Authentication（認(rèn)證）:校驗(yàn)一個(gè)人（或至少看起來）是某個(gè)用戶，在他正確地提供哦你了他的安全證書后（密碼，安全問題，指紋掃描等）
Authorization（授權(quán)）:確認(rèn)某個(gè)用戶是否有權(quán)獲取某個(gè)資源，或執(zhí)行某個(gè)行為。
用另一種方式說，認(rèn)證是知道這個(gè)人是誰，授權(quán)是知道這個(gè)人能做什么。
讓我們用一個(gè)例子來闡述這個(gè)錯(cuò)誤。
想想看，你的瀏覽器擁有一個(gè)已登錄的用戶的信息，大概是這樣的一個(gè)對(duì)象
{ username:'elvis',
role:'singer',
token:'123456789'}
當(dāng)做一個(gè)更換密碼的操作時(shí)，你的應(yīng)用接到post請(qǐng)求
POST /changepassword/:username/:newpassword
在你的/changepassword方法, 你檢驗(yàn)到這個(gè)用戶已經(jīng)登錄了并且 token沒有過期. 然后用username參數(shù)找到這個(gè)用戶的信息, 并改變用戶的密碼。
那么，你驗(yàn)證了這個(gè)用戶是已經(jīng)登錄的，然后你執(zhí)行力他的請(qǐng)求也就是改變了他的密碼?？磥磉M(jìn)展正確，對(duì)嗎？不幸的是，并不是這樣的。
關(guān)鍵點(diǎn)是校驗(yàn)改變執(zhí)行這個(gè)操作的用戶和要改變的密碼的用戶同一個(gè)。瀏覽器上存儲(chǔ)的任何信息都可以被篡改，并且任何一個(gè)高級(jí)點(diǎn)的用戶只適用瀏覽器自帶的工具都可以輕易地把username:'elveis'改成username:’Administrator'.Administrator'.
在這種情況下，我們僅僅關(guān)心了認(rèn)證。我們甚至可以把/changepassword方法改成只有認(rèn)證的用戶才能執(zhí)行。但是，這還不能在很多惡毒的請(qǐng)求面前保護(hù)你的用戶們。
你需要在你的 /changepassword 方法里驗(yàn)證實(shí)際的請(qǐng)求者和請(qǐng)求的內(nèi)容，并且實(shí)現(xiàn)用戶只能修改他自己的數(shù)據(jù)這樣的授權(quán)。
認(rèn)證和授權(quán)是同一枚硬幣的兩面，永遠(yuǎn)不要把他們分開對(duì)待。
常見錯(cuò)誤#3: 沒有準(zhǔn)備好擴(kuò)展
現(xiàn)在的世界主流是快速發(fā)展高速啟動(dòng)的,并且偉大的想法迅速覆蓋全球, 將 MVP (最小可行產(chǎn)品)盡快推出到市場上是很多公司的共同目標(biāo)
然而, 時(shí)間壓力導(dǎo)致開發(fā)團(tuán)隊(duì)經(jīng)常忽略了某些問題. 擴(kuò)展性是團(tuán)隊(duì)們理應(yīng)考慮到的。 MVP的概念很偉大, 但是不久之后,你會(huì)遇到一系列的問題. 不幸的是, 選擇可擴(kuò)展的數(shù)據(jù)庫和web服務(wù)器并把不同的應(yīng)用層放到獨(dú)立的可擴(kuò)展的服務(wù)器上還不夠. 你還有很多需要考慮的細(xì)節(jié)來避免在以后大改自己的應(yīng)用。
例如，假設(shè)你選擇直接在web服務(wù)器上存儲(chǔ)用戶的上傳照片。這是一個(gè)完美的可行的方案--應(yīng)用可以快速的獲取到這些文件，在每個(gè)開發(fā)平臺(tái)都有處理文件的方法，并且你都可以把這些圖片以靜態(tài)內(nèi)容的方式提供，這意味這著應(yīng)用程序的最小負(fù)載。
但是當(dāng)你的應(yīng)用規(guī)模變大，你需要兩個(gè)或更多的負(fù)載均衡器的web服務(wù)器的時(shí)候呢？即使你漂亮的擴(kuò)展了你的數(shù)據(jù)庫存儲(chǔ)，session狀態(tài)服務(wù)器和web服務(wù)器，你的應(yīng)用還是因?yàn)橘Y料圖片這樣的小事擴(kuò)展失敗了。這樣，你需要實(shí)現(xiàn)多種文件同步服務(wù)（這樣會(huì)有延遲并且會(huì)造成短暫的404錯(cuò)誤）或其他的解決方法來確保這些文件能在你的web服務(wù)器間蔓延。
為避免這樣的問題，你需要做的就是在一開始就使用共享的文件存儲(chǔ)位置，數(shù)據(jù)庫或其他任何的遠(yuǎn)程存儲(chǔ)解決方案。這些可能會(huì)花費(fèi)一些額外的工作時(shí)間，但是和以后可能會(huì)遇到的麻煩比起來還是值得的
常見錯(cuò)誤 #4: 錯(cuò)誤SEO的或沒有 SEO
web站點(diǎn)沒有或者錯(cuò)誤的搜索引擎優(yōu)化的根本原因是"SEO專家"的誤導(dǎo)。許多web開發(fā)者認(rèn)為自己足夠了解SEO并且認(rèn)為它沒有那么復(fù)雜，但事情并不是這樣的。 掌握SEO 需要大量的時(shí)間來尋找最佳實(shí)踐以及Google、Bing、雅虎等如何索引web的千變?nèi)f化的規(guī)則一 除非你不停的實(shí)驗(yàn)并且準(zhǔn)確地跟蹤+分析, 你都不是一位SEO專家, 你也不應(yīng)該說自己是.
此外,SEO經(jīng)常被推遲到最后才做。這需要很大的代價(jià). SEO不僅僅是關(guān)于設(shè)置良好的內(nèi)容、標(biāo)簽、關(guān)鍵字、 meta-data,、圖像的 alt 標(biāo)簽,、site map等等. 它還包括消除重復(fù)的內(nèi)容、擁有可抓取的網(wǎng)站架構(gòu)、高效的加載時(shí)間、智能的反向鏈接等等。
就像擴(kuò)展性一樣，你應(yīng)該在開始構(gòu)建web應(yīng)用程序的時(shí)候就考慮到SEO，不然你可能會(huì)發(fā)現(xiàn)完成SEO實(shí)現(xiàn)工程意味著重寫整個(gè)系統(tǒng)。
常見錯(cuò)誤 #5: 請(qǐng)求處理中的耗時(shí)動(dòng)作
這個(gè)錯(cuò)誤的最好的例子就是一個(gè)基礎(chǔ)用戶的動(dòng)作發(fā)送郵件。開發(fā)者們經(jīng)常認(rèn)為在用戶請(qǐng)求處理器上構(gòu)造一個(gè)SMTP請(qǐng)求并發(fā)送一條郵件消息就可以了。
假設(shè)你創(chuàng)建了一個(gè)網(wǎng)上書店并且你期望每天要處理數(shù)百個(gè)訂單。 作為你的訂單處理的一部分, 每個(gè)用戶提交訂單post請(qǐng)求后你回去發(fā)送一封確認(rèn)郵件。 最開始的時(shí)候可能沒有問題，但是當(dāng)你的系統(tǒng)級(jí)別變大，你突然收到數(shù)千個(gè)發(fā)送確認(rèn)郵件的請(qǐng)求呢？ 你就會(huì)遇到SMTP連接超時(shí)、郵件配額不足、 or your application response time 或者你的應(yīng)用程序因?yàn)橐幚磬]件而不是用戶請(qǐng)求導(dǎo)致響應(yīng)時(shí)間顯著提升。
任何費(fèi)時(shí)的動(dòng)作都應(yīng)該用另外一個(gè)線程來處理，從而盡快地釋放掉http請(qǐng)求。這種情況下，你因該有一個(gè)外部的郵件服務(wù)來接收訂單并發(fā)送通知。
常見錯(cuò)誤 #6: 沒有優(yōu)化帶寬使用
大多數(shù)的開發(fā)和測試都是在本地網(wǎng)絡(luò)環(huán)境下進(jìn)行的。所以當(dāng)你下載5個(gè)3MB大小的背景圖片的時(shí)候，以你的1Gbit的開發(fā)環(huán)境連接可能不會(huì)有問題。但是當(dāng)你的用戶在他們的手機(jī)上用3G網(wǎng)開始加載你的15MB的首頁的時(shí)候, 你就應(yīng)該為自己準(zhǔn)備一個(gè)投訴郵件列表了。
優(yōu)化網(wǎng)絡(luò)帶寬使用可以帶來極大的性能提升，并且你可能是需要一些小技巧來實(shí)現(xiàn)這樣的提升。這有一些規(guī)范的團(tuán)隊(duì)默認(rèn)做的事情，包括:
-
縮小所有的JavaScript
-
縮小所有的CSS
-
壓縮服務(wù)器端的HTTP
-
圖片尺寸和分辨率的優(yōu)化
常見錯(cuò)誤 #7: 沒有為不同大小的屏幕開發(fā)
自適應(yīng)設(shè)計(jì)一直是近幾年的一個(gè)大話題。帶有不同大小的屏幕的智能手機(jī)的急劇增多帶來了很多新的獲取網(wǎng)上內(nèi)容的方式。通過只能手機(jī)和平板電腦訪問web的數(shù)量每天都在增加，并且這種趨勢還在加速。
為了確保無縫的導(dǎo)航和瀏覽，你必須使用戶能夠用各種各樣的設(shè)備來訪問網(wǎng)站。
關(guān)于自適應(yīng)web應(yīng)用設(shè)計(jì)有很多模式和實(shí)踐。各種開發(fā)平臺(tái)都有自己的提示和技巧。但是也有一些開發(fā)框架是跨平臺(tái)的。其中最有名的可能是 Twitter Bootstrap. 它是一個(gè)開源的 HTML, CSS, 和JavaScript框架,并且已經(jīng)被各種各樣的開發(fā)平臺(tái)接納。 在構(gòu)造應(yīng)用的時(shí)候只需要采用Bootstrap模式, 你就可以不費(fèi)力的獲得自響應(yīng)web應(yīng)用程序。
常見錯(cuò)誤 #8: 跨瀏覽器不兼容
大多數(shù)情況下，開發(fā)過程都是在巨大的時(shí)間壓力下進(jìn)行的。每個(gè)應(yīng)用都需要盡早地發(fā)布，開發(fā)者常常關(guān)注于交付功能而不是設(shè)計(jì)。盡管大多數(shù)的開發(fā)者都安裝了 Chrome，F(xiàn)irefox 和 IE，但是他們90%的時(shí)間只使用其中的一個(gè)。一個(gè)常見的例子就是在一個(gè)瀏覽器下開發(fā)并且只在應(yīng)用快完成的時(shí)候用其他的瀏覽器來測試。這樣十分有道理–假如你有很多時(shí)間來測試并修改這個(gè)階段出現(xiàn)的問題的話。
然而，當(dāng)你的應(yīng)用到達(dá)跨瀏覽器測試階段的時(shí)候還是有一些技巧來幫你顯著地節(jié)省時(shí)間的:
-
在開發(fā)的時(shí)候不需要在所有的瀏覽器下測試，這很費(fèi)時(shí)間并且低效. 但是這不是說你就可以不經(jīng)常切換瀏覽器了.每隔幾天換一個(gè)瀏覽器, 在測試階段之前你至少可以發(fā)現(xiàn)最主要的那些錯(cuò)誤。
-
不要用統(tǒng)計(jì)數(shù)據(jù)來為不支持某個(gè)瀏覽器辯解。有很多組織采納新軟件或升級(jí)很慢?？赡苡写罅吭谀枪ぷ鞯挠脩粢L問你的網(wǎng)站，但是他們因?yàn)閮?nèi)部安全或商業(yè)策略不能安裝最新的免費(fèi)瀏覽器。
-
避免使用特定于瀏覽器的代碼。在大多數(shù)情況下都有一個(gè)優(yōu)雅的跨瀏覽器兼容解決方案。
常見錯(cuò)誤 9: 沒有考慮可移植性
想當(dāng)然是萬錯(cuò)之源! 對(duì)于可移植性來說, 尤為如此. 你有見過幾個(gè)人, 把文件路徑, 數(shù)據(jù)庫連接字符串直接寫在代碼中. 你又見過多少人事先假設(shè)服務(wù)器上已經(jīng)安裝這個(gè)庫那個(gè)庫的? 事先假設(shè)應(yīng)用的最終運(yùn)行環(huán)境, 跟你本地的開發(fā)環(huán)境一致, 本身就是個(gè)錯(cuò)誤.
理想的應(yīng)用安裝配置要做到維護(hù)輕松簡單:
-
要確保你的應(yīng)用具有可擴(kuò)展性, 能在負(fù)載平衡的多服務(wù)器環(huán)境中運(yùn)行.
-
配置要簡潔明了, 并且集中保存在一個(gè)配置文件中.
-
當(dāng)服務(wù)器配置不當(dāng), 導(dǎo)致錯(cuò)誤出現(xiàn)時(shí), 要能處理異常.
常見錯(cuò)誤 10: 誤用 RESTful
RESTful API 在 web 開發(fā)中占有一席之地. 無論是在系統(tǒng)內(nèi)部使用, 還是集成到外部系統(tǒng)中, 幾乎每個(gè) web 應(yīng)用都會(huì)用到 REST 服務(wù). 盡管如此, 還是有很多人在使用 RESTful 時(shí)候, 存在這樣那樣的問題.
調(diào)用 RESTful API 常見的錯(cuò)誤有:
-
HTTP 動(dòng)詞沒寫對(duì). 比如, 用 GET 提交數(shù)據(jù). HTTP GET 旨在安全與冪等, 也就是說, 對(duì)于同一個(gè)資源, 無論你用 GET 調(diào)用多少次, 返回的結(jié)果都是一樣的, 應(yīng)用的狀態(tài)也不會(huì)發(fā)生任何變化.
-
HTTP 狀態(tài)編碼沒用對(duì). 最常見的例子是, 明明有錯(cuò)誤, 卻返回編碼 200.
HTTP 200 OK { message:'出錯(cuò)了' }
返回 HTTP 200 OK 的前提是, 提交的請(qǐng)求沒有導(dǎo)致服務(wù)器端出現(xiàn)錯(cuò)誤. 否則, 就應(yīng)該根據(jù)錯(cuò)誤信息, 返回相應(yīng)的錯(cuò)誤編碼, 如: 400, 401, 500 等等.
更多的 HTTP 狀態(tài)編碼請(qǐng)查看這里.
總結(jié)
Web 開發(fā)涉及的領(lǐng)域很廣, 包括網(wǎng)站, web service, 功能復(fù)雜的 web 應(yīng)用等.
重點(diǎn)是在處理身份驗(yàn)證和授權(quán)的時(shí)候要細(xì)心, 擴(kuò)展性要事先計(jì)劃好. 總之凡事多想想, 人畜無害.
原文地址：http://www.toptal.com/web/top-10-mistakes-that-web-developers-make
哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀的優(yōu)秀網(wǎng)站，并且能夠搭建符合百度排名規(guī)范的網(wǎng)站基底，使您的網(wǎng)站無需額外費(fèi)用，即可穩(wěn)步提升排名至首頁。歡迎體驗(yàn)最佳的哈爾濱網(wǎng)站建設(shè)。