文章專區

網頁程式技術探討

SQL Injection 是網站系統中經常遇到的安全問題之一,利用SQL指令插入到表單並藉由特殊字元改變SQL語法結構,當這樣的命令被執行時攻擊者就可以直接對資料庫進行任何的動作。   假設現在有一個會員登入功能的網站,使用者登入時必須要驗證帳號、密碼,CommandText為「"select  *  from  member  where  account = '"  +  Request.Form["account"]  +  "'  and  password  =  '"  +  Request.Form["password"]  +  "'"」,帳號輸入「' or 1 = 1 --」,密碼隨意輸入,此時的指令就變成了「"select  *  from  member  where  account  =  ''  or  1=1 -- and  password = ''  "」,因為「--」為註解意思所以後半部的判斷式將不會被執行,而 1 = 1恆成立故駭客也就可以輕鬆登入。   SQL 攻擊就是如此簡單,僅需短短的指令就整個資料庫有極大的威脅,透過底下的防範方式可減少資料庫的傷害。     1.存取資料庫時給予帳號不同的權限   不應使用sa或是含有db_owner權限的帳號,如非必要不要賦予Create、Drop、Truncate table權限,可將成員資格限定為「db_datareader」、「db_datawriter」,   甚至可單獨對每個物件限定使用權限,但此種作法也比較累人就是。     2.過濾輸入的內容 在還沒有進行查詢前先把傳入的特殊符號如單引號(‘)、註解符號(--)、分號(;)過濾掉,亦可針對HTML或<script>標籤做些防範。 3.使用參數化查詢 存取資料時輸入的資料不是動態結合到SQL指令,而是透過參數來給值,資料庫在編譯SQL指令後才會套用參數。 SqlCommand cmd = new SqlCommand("select * from member where Account = @Account and Password = @Password", conn); cmd.Parameters.AddWithValue("Account", "admin"); cmd.Parameters.AddWithValue("Password", "admin"); conn.Open(); cmd.ExecuteNonQuery(); conn.Close(); 4.不要將錯誤訊息顯示於頁面上 如將 customErrors設定為off,頁面出錯時會直接把錯誤訊息顯示出來,那麼駭客就能利用這些漏洞攻擊。應建立錯誤頁面,並在網站發生錯誤時導向至該頁面 <customErrors mode="RemoteOnly" defaultRedirect="~/ErrorPages/ Error.aspx"/>    
      ASP為撰寫網頁程式的一種語言,使用環境需要架設IIS來模擬所需要的環境,為早期發網頁的主要語言,在日新月異的科技時代,眾多其他語言如雨後出筍般的出現,一來是為了能讓開發者能夠更快速或是更容易的撰寫出網頁,而有好的一面也會反映出不好的一面,當兩個不同的程式語言要呼相溝通時,這時候就會有困難,這時後你可能會知道有網路服務、Web Service等這些字眼。        什麼是Web Service?說實在可能每個工程師的解釋都不同,Web service算是一個軟體的服務元件,它透過標準的Web通訊協定及資料格式的共同標準來顯示,如像是HTTP或是SOAP等的應用服務提供溝、傳遞資料。說得有些模糊簡單講就是它是一個提供服務元件,它是以Web的資料開放標準。         以Web資料開放標準來制訂好處,能夠被廣泛的其他Web服務來使用,相對上具有良好的溝通性及支援性,能在不同平台上的語言能夠互相的傳遞、接收及回傳訊息,假設我們是製作一個旅行社的旅遊網站,網站本身除了自己的一些行程之外,有時候會包含了一些機場航班查詢、異地時間查詢及當地天氣等查詢服務,透過Web Service服務使用,不需要擔心上面提到的服務是使用什麼平台,對程式設計師而言,能夠輕易的將服務串接起來,可以快速輕鬆的將系統建置起來。Web Service基本架構是HTTP和XML,而核心元件是XML、SOAP、WSDL和UDDI,每個元件的詳細介紹及應用就不在此敘述。   以下範例由ASP簡單傳遞資料給Web Service及接收回傳資料:  '透過物件將參數宣告SOAP格式 Set oClient = Server.CreateObject("MSSOAP.SoapClient30") oClient.ClientProperty("ServerHTTPRequest") = True   '服務位置 ASPNetWebServiceUrl = "http://127.0.0.1/WebService.asmx" oClient.MSSoapInit ASPNetWebServiceUrl   '使用Web Service中的某個服務名稱及填入要傳遞的資料 '回傳訊息將會回給invoicenumber invoicenumber = oClient.function_name(data_xml)  
 在現今以行動裝置為主的世代中,傳統的網頁已漸漸無法滿足行動裝置對於網站瀏覽的特殊需求了 。 行動裝置包含:智慧型手機、平版電腦、簡易型電腦、隨身型影音播放器等等。 在行動裝置瀏覽時會有以下限制: 頻寬的限制:行動裝置所使用的行動網路並不像傳統使用的有線/寬頻網路一樣,可提供可靠且穩定的網路傳輸。在行動網路的條件下,頻寬的變動是非常大的。 運算效能的限制:行動裝置通常在有限的電力環境下,無法提供高效能且長時間的運算效能。因此,傳統網頁設計出來的頁面往往會因特效的關係,耗用大量的運算, 造成裝置電力的過度耗損、溫度過高、效能下降等可能的情形。 儲存空間的限制:行動裝置目前提供的硬體儲存空間相對於個人電腦來說都是相對小的,且行動裝置的瀏置的瀏覽器可用的資源相較於個人電腦來說,也是相較不足的, 因此要在行動裝置中展現良好的使用者經驗的話,對於網頁設計上存取的資源也比需相對的管控。 瀏覽範圍的限制:行動裝置相對於個人電腦來說,可瀏覽的大小以目前來說為5吋~7吋左右的大小,如何在此限制下讓使用者有良好的瀏覽網頁的體驗也是相當重要的。   而Google對於此議題也有進行相當的研究,為了改善上面的問題,進而提出了AMP網頁的格式。   這樣的格式有其相較於傳統網頁設計上不同的格式規定。主要是站在加速網頁瀏覽器在生成(Render)頁面的速度,讓使用者有良好的瀏覽體驗。 主要的設計要領有下面幾個方向,自訂的HTML標籤、自訂的JS功能、禁止CSS外部載入,其他的細節可參考Google AMP網頁指南(https://support.google.com/webmasters/answer/6340290?hl=zh-Hant)。   如果我們在原本的網站中加入了AMP網頁,對我們會有什麼好處? 由於Google本身是搜尋引擎的提供者,對於有製作AMP網頁的網站會進行收錄的動作,接著由於AMP網頁在行動裝置的瀏覽體驗會比傳統網頁設計的頁面來的高, 因此對於行動版的搜尋引擎的效果會有相當的幫助。   一化網頁設計,身為專業的客制化網頁設計廠商。目前提供AMP網頁設計的專業規劃,若您對此有興趣的話,歡迎使用下方的聯絡我們與我們詳談。

ARTICLE

4

什麼是 jQuery

jQuery 是一個快速又簡潔的 JavaScript 程式庫,簡化了在 HTML 文件裡面尋找 DOM 物件、處理事件、製作動畫、和處理 Ajax 互動的過程。   jQuery 對瀏覽器的支援 雖然各個瀏覽器因各自的特性對網頁所產生出來的效果不盡相同,但是 jQuery 大部分均能將其結果依照各個瀏覽器的性質來呈現,也就是說 jQuery 是跨瀏覽器的。   如何使用 jQuery 首先需將下列的 HTML 標籤放置在網頁的 之前: (本例的 jquery.js 是置於 js 資料夾中) 當 jQuery 載入之後,便可以使用 jQuery 來撰寫程式碼了。   jQuery 與 傳統 JavaScript 的差異 取得一個 id="test_id" DOM 物件: //傳統的 JavaScript 寫法 var obj1 = document.getElementById("test_id"); //jQuery 的寫法 var obj2 = $("#test_id");   原本的 document.getElementById("id") 現在只需 $("#id") 便能取代(在選取 id 時,需在 id 前加上 #)。 此外 jQuery 的選取器也能選取標籤(如:, , )、或是選取 class="myclass" 的 elements,當然 jQuery 的選取器還有許多種不同的用法,這對撰寫跨瀏覽器的網頁來說,相當便利。     Posted by 程式設計師 / wyven

ARTICLE

5

何謂XML?

目前資訊的發達,網路興起,造成各大公司紛紛推出各式網頁軟體,例如:Firefox、IE、Navigator…等,因為便造成因版本問題而導致網頁開啟有問題或排版出現問題的情況。為了修正這種情形,因此便出現了XML語言。 那何謂XML語言呢?   XML是一種[ 中介標籤語言 ](meta-markup language),可提供描述結構化資料的格式,這將有助於文件內容的宣告,並符合跨平台的搜尋作業,此外,XML也將是新一代網路資料呈現與運作的關鍵技術,在進一步介紹XML之前,我們還是先來看看,什麼是「標籤語言」吧!   所謂 [ 標籤語言 ],是由一些特殊字碼(code)或控制標籤(tag)所組成,它們單獨存在時並無任何的意義,而需要特殊的軟體經由一定的規則解讀後,再將文件輸出到螢幕或印表機...等輸出設備上,所以標籤語言可以使文件更具結構化,這樣的結構化使得應用程式能夠便於管理、解讀與運用文件中的資料,而標籤語言又可分為 [ 特定標籤語言 ] 與 [ 一般化標籤語言 ]。 特定標籤語言: 特定標籤語言是針對某種特定軟體或特定用途所制定的,像我們所熟悉的HTML標籤語言,就是為了應用在Web上而制定的標籤語言,其它像微軟的文書處理軟體Word也是藉由標籤語言來顯示文字的字型、大小、粗細或是換行、換頁等文件格式。 通用標籤語言: 通用標籤語言通常只是用來描述文件的內容與結構,而不會去定義如何顯示或運用這些文件的內容,所以並不是為了特定的軟體而制定的,它可以讓許多不同的軟體解讀文件,至於解讀後的資料要如何運用,就視各種應用程式的需求而定了。也因為通用標籤語言是一種不受限於特定應用或是設備的文件描述方法,所以具有較佳的可攜帶性,像是已經通過ISO國際標準認可的SGML「標準通用標籤語言」,與其前身GML(Generalized Markup Language),都是我們所說的通用標籤語言。 HTML標籤語言 如果您曾經製作過網頁,一定對HTML標籤語言非常熟悉,HTML文件必須遵循一定的規則,而這個規則明確的規範文件應該如何被顯示或運用,讓執行處理工作的應用程式知道在HTML文件中去讀取哪些標籤內容、識別標籤的結構並將結果呈現在瀏覽器中;除了顯示文件格式,HTML也可以在文件中放置外部檔案,像是音效檔、圖形檔或其它的崁入式的程式;此外,從一個HTML文件連結到另一個HTML文件或檔案的「超連結」的動作,也是藉由標籤來定義的。 在HTML文件中有許多不同的標籤,這些標籤都有它特定的位置與目的,像是標籤定義了文字的字型與大小,標籤則將文字的格式定義為粗體字。 但是HTML並不完美,它只是一種表達的技術,並不一定能夠描述HTML標籤中所包含資料的意義,舉一個最簡單的例子好了, Apple 這段程式碼在瀏覽器中有其特定的呈現方式,但是HTML並沒有告訴我們它倒底是什麼,雖然Apple只是一個英文單字,但它在不同的領域中可能就會有不同的含義,到底是一家電腦公司、一種水果,還是一個姓氏呢?HTML文件無法告訴我們資料本身所代表的含義。 其實大部分的瀏覽器為了提供一些特殊的功能,所以並不會完全依照DTD中的定義來檢視HTML文件,而有其專屬的標籤解析規則,甚至完全不去讀取DTD,也因此造成目前的HTML文件在各家瀏覽器上的相容性不佳,但這樣的情形在我們改用XML後,將能有效的避免。   NOTE:DTD「文件類型定義」(Document Type Definition),提供了所有元素、屬性與實體間的相互關係,能夠詳細地描述文件的結構規則。 SGML標準通用標籤語言 談到XML就一定要從SGML(Standard Generalized Markup Language)講起,SGML允許你指定文件的結構,並使用DTD「文件類型定義」來指定文件的結構,SGML可以將文件轉換成多種的輸出格式,包括了純文字、HTML、LaTeX、PostScript...等格式,最重要的是它為所有的文件提供了一致的外觀,以便於管理與維護。 SGML文件本身包含了三個部份:SGML宣告( SGML Declaration)、DTD文件類型定義和文件標示(Document Instance),其中SGML宣告是用來告訴SGML處理器(SGML Parser)在解讀該份文件時,所要使用的字元集和文件特性,DTD則是用來宣告該份文件的結構與文法參數,而文件標示就是加上標示處理後的文件。 SGML在現今的社會中已經廣泛被應用,其中最大的理由就是SGML的跨平台特性,以SGML格式所儲存的文件,任何人都可以輕易的解讀,而且不會因為軟體的不同而出現亂碼。(最常見的情形就是,若將OFFICE 2000的文件拿到OFFICE 97中開啟.....你將會看到一推的亂碼!) SGML與HTML最大的不同在於SGML中並沒有定義資料顯示格式的資訊,例如文字的字型、大小與格式,但標籤可以定義出文件的架構,而某些資料內容,像是書名、作者...等,其實已經是文件結構的一部份了,然後再藉由DTD描述標籤的類型與文件的格式,最後以適當的方式呈現這些資料。   XML可延伸標籤語言 XML是從SGML推演出來的,SGML其實是一套非常複雜的系統,因為它具有許多的機制,以便提供各種的語法,來解讀、編輯及保存內容龐大複雜且互相連結的技術文件,而XML則擷取了SGML中文件結構的核心部份,是SGML的一個子集合,其目的是為了擴充在網際網路上的應用,並靡補HTML的不足,讓SGML也能輕易地在網路上應用,所以XML肩負著使全球資訊網能夠傳輸或處理更豐富資訊的責任,雖然在一般情況之中,HTML或是JAVA的功能就已經相當足夠了,但隨著資訊的爆炸、資料量的激增與資料結構的複雜化,只用HTML就顯得捉襟見肘了,而JAVA又顯得太大才小用,也不易學習,現在有了XML與HTML的相輔相成,這些問題就都解決了,所以XML並不是用來取代HTML與SGML,或是廢除原有的標準,XML是用來制定新的標準、用來定義一種新的標籤語言,其自訂的範圍包括標籤及屬性的名稱,XML文件可以選擇性的包含文法描述的資料,以便應用程式可以檢查其完整性,而使用者可以藉由XML定義專屬的文件型態,程式設計師也能撰寫出便於管理文件的應用程式。 雖然XML是為了能有效的在Web環境下運作而設計的,但XML也能在Web以外的環境中運作,包括了商業應用、出版業及企業資料交換應用,為了能在不同的環境中應用,因此XML被設計成使用簡單、具有彈性與開放的語言,以便讓不同的使用者製作各種XML文件。   Posted by 程式設計師 / 小瑜
XML開發者是一群來自於SGML的設計者和應用者,他們已經在SGML上投入了大量的精力,但卻發現SGML並沒有完全發揮它的作用,而他們有其充分的理由相信,在這些方面XML帶來的影響可以算得上是一場革命。   對EDI的支持 EDI「電子資料交換」,是網路發展的主要目標之一,而資料結構化的主要目的無非就是要使資料交換更簡單、更方便,不同的領域都應制定該領域的統一模型,就像是不同的國家有著不同的語言,若不同領域的資料都採用統一的模型,便能夠方便、有效的共享資料,這樣的模型就是DTD「文件類型定義」,雖然DTD正逐漸的被XML Schema所取代,但是很明顯的,網路將會是一個理想的電子資料集散地,而在這裏HTML無法完全表示不同領域中所需的模型和它的語義,所以XML就誕生了。   對Java技術的幫助 Java技術是本世紀最重要的技術發展之一,Java使瀏覽器工作時就像在通用的應用平台上,而平台與平台之間卻是獨立的,但HTML固定的標籤和語義上的貧瘠卻使得Java的應用受到了極大的限制,這主要是因為資料中的訊息無法統一的緣故,而XML卻能夠完全勝任這份工作,XML和Java技術的整合,可以有效減少網路應用程式的通訊量,提昇傳輸速度,也同時提高了應用程式本身的效能,我們可以說XML真正使得Java有了用武之地。   電子商務的靈魂 隨著網際網路的普及,電子商務(e-commerce)的熱潮也愈演愈烈,可是在熱潮的背後卻隱含著一個巨大的危機,那就是龐大的資料交換問題,我們可以想像的是,並不是每家公司都使用相同的資訊系統,微軟可能使用SQL Server、IBM可能使用DB2、Oracle公司可能使用oracle..等等,就算是使用了相同的資料庫好了,每家公司的資料結構也一定大相徑庭,而如此龐大的資料交換實在相當的困難。   過去要解決這個問題的方法是使用EDI「電子數據交換」(Electronic Data Interchange),EDI將資料格式化後經網際網路傳送處理,所以傳統企業所使用的各種單據、票證都可以被網路的資料交換所取代,EDI可以減少資料處理的費用和資料重複登錄的費用,並大大縮短交易的時間,但在實際執行上卻是舉步維艱,其中最主要的問題是EDI雖然實現了資料的一致性,卻嚴重缺乏可延伸性,它要求所有的合作夥伴都必須使用唯一的解決方案,這使得EDI的成本過高,而且如果政府提出一個新的稅率方案或者某個商家想增加一些附屬的內容,整個EDI系統就必須重新修改,這可是牽一髮動全身的浩大工程呀! 但是現在,由於XML優越的可延伸性,讓我們可以自己定義標籤結構來描述資料,不必拘泥於EDI的框架之中,而且XML是一個簡單的文字文件,加上XSL文件的應用,雙方都不必撰寫繁瑣的資料轉換程式,只要知道對方的資料結構,就可以在傳送XML文件時同時傳送一套與對方資料結構相對照的XSL文件,這樣對方打開瀏覽器的時候就能看到以自己的格式所呈現的XML資料了。   Posted by 程式設計師 / 小瑜
  何謂「Page Rank」(網頁等級)呢?簡單的來說就是有效地利用了 Web 所擁有的龐大連結構造的特性。從網頁A導向網頁B的超連結被看作是對頁面A對頁面B的支持投票,Google根據這個投票數來判斷頁面的重要性。當然Google不只是利用如此簡單的計算方式,還會對此網頁做分析,且計算的方式也複雜許多。而根據此分析得到了高評價的重要頁面會被給予較高的「Page Rank」(網頁等級),在檢索結果內的名次也會提高。   目前「Page Rank」分為十級,等級越高名次就會越前面,而目前等級7以上的網頁,皆是眾所周知的網站,例如:自由時報、HiNet、Yahoo...等。 那如何能夠提升PR值?首先,當然要努力的生產好的內容(Google抓取您網站的頁面數量越多,網站更新率越高,也有助於提升PR),然後努力的行銷、推廣網站,讓您的網站更廣為人知,讓別的網站自動放您的連結,連結進來的數量越多越好,有些人則因此會勤奮的去各大網站、blog留言(留言時也附帶自己的網址),或是努力的在書籤網站自推,接著,連結自己網站的page頁面,pr值也要越高越好,這樣自然而然,就會提升PR值了。   Posted by 程式設計師 / Kelly
「Client 端程式碼」對各種瀏灠器的相容性   通常,動態網頁除了 Server 端的程式碼撰寫「Client 端程式碼」也必須下不少工夫。例如:表單提交前的資料驗證、圖片的輪播、選單的收合等等。 因此,對於 Client 端 是否能正常執行指令碼也必須適當的考量,然而目前瀏灠器的種類繁多,對JavaScript程式碼的解讀也不同;所以如何撰寫出能在大部份瀏灠器上正常執行的指令碼是非常重要的,否則網頁的跨平台性將會大打折扣。 以目前較多人使用的 IE 及 FireFox 來說,有些指令碼其實並不通用,所以在程式的撰寫上必須要多加注意,因此有時候得視情況撰寫替代的程式碼以增加相容性。   舉例來說:   指令:document.getElementsByName("myID") 作用:找出所有 ID="myID" 的元素遵回傳 Array 雖然此一指令能夠在 IE 上正常執行,但是到了 FireFox 上卻是一點用也沒有。 因此,可以考慮將這些元素的 ID 額外加上編號 x ( x 代表任意數字),然後在網頁載入後,再使用 document.getElementById("myID_x") 將各個元素一一存進一個 Array。     屬性:e.innerText 作用:存取元素的文字內容 在 IE 上,可以使用 e.innerText = "測試內文"; 來指定元素 e 的內容;但是在 FireFox 上,innerText 這個屬性卻沒辦法正常使用。 所幸還有一個屬性 innerHTML 可以在兩者正常執行,因此應該儘量使用 innerHTML 來替代 innerText。     參數: 說明:tbCell 為 table 的 cell 元素、tbRow 為 table 的 row 元素 下列指令碼是在 row 元素中,插入一個 cell 元素,index 為插入位置 tbCell = tbRow.insertCell(); //IE 執行正常、FireFox 則否 tbCell = tbRow.insertCell(index); //IE、FireFox 皆正常   對於常使用 Client 端 指令碼來產生動態產生元素的程設師而言,選擇較高相容性的指令碼來撰寫雖然比較費時;但是至少能夠確保大部份的使用者都能正常顯示、操作,也能減少許多因為相容性而衍生出來的問題。     Posted by 程式設計師 / wyvern

ARTICLE

9

病毒行銷

  2001年秋天,網路公司的股票價格在美國股票市場大幅下滑,很多人把這種現象稱之為網路達康泡沫化。許多投資者因而認定,網際網路不過是誇大不實的科技而已。但是儘管股票市場暴跌,背後隱含的新科技革命,卻已經悄悄誕生。   隨著web 2.0的興起,網站不再只是一個PUSH資訊的媒介,而是一個平台,一個讓全球人類交流資訊的平台,透過web 2.0 讓資訊散撥出去。因此,傳統的行銷方式已不適用,目前採用的是「病毒行銷」(Viral marketing),亦即採用直接從一個用戶到另一個用戶的方式來傳播訊息。   所以一個體質好的網站便越來越重要,在網頁設計時立場便需明確,了解自已網站所要表達的東西,使這些資訊能夠更快速的散撥出去,讓自已的網站蘊含網路的威力,取得先機。 Posted by 程式設計師 / Kelly
網頁程式的漏洞   在網頁程式的撰寫上,參數的傳遞可分為post與get。 不論是以何種方式傳遞參數,在撰寫程式碼的時候必須得在 Server 端加工過後才能使用;否則很有可能會成為有心人士攻擊的漏洞。   例如: 以get的方式傳遞參數 http://www.test.com.tw/data.asp?data_seq=1 檔案 data.asp .... SQL = "select * from data_table where data_seq=" & Request("data_seq") 'Run SQL Cmd --> 以正常的參數傳遞來說,程式碼可以組合出的 SQL command 是: select * from data_table where data_seq=1 程式能按照預期的結果執行,但是如果參數被人改成: http://www.test.com.tw/data.asp?data_seq=1 or 1=1 那麼程式碼組合出來的 SQL command 將變成 select * from data_table where data_seq=1 or 1=1 如此一來,參數將會淪為攻擊者的填空遊戲。輕者程式執行出錯,重者可能會造成資料庫損毀。 因此,在 Server 端程式碼的撰寫上,必需對 Client 端傳遞過來的參數加工處理,以避免類似的漏洞產生。   Posted by 程式設計師 / wyvern