從另一個方向介紹網頁、HTML、CSS 與 JavaScript。

這次要介紹的是網頁的基礎三要素：HTML、CSS 與 JavaScript。

 

會選擇這個主題是因為發現一部分的初階網站工程師或甚至是進階工程師，已經有辦法架設網站了，但對於一些概念始終都只說得出函式庫的名稱或是函數名稱。程式可能是對的，但是邏輯上總是有很多黑盒子的感覺。

 

因此這裡小編將嘗試使用最單純的方式來解釋一些容易被當成常識的部分，並且讓所謂的前端網頁、後端程式、作業系統與電腦硬體這幾個看起來不相關的部分連起來。

 

當然這樣的範圍無法一篇文章就講完。所以就先從瀏覽器與網頁開始

 

 

 

基本上，網頁就是檔案，或者更精確的說一個網頁是由很多個檔案組成。開啟網頁需要使用程式去開啟，這個程式就是所謂的瀏覽器(Browser)，而現在流行的瀏覽器有Chrome, Safari, Firefox, Edge(IE) 等等。

 

 

 

 

就像是使用 Office Word 去開啟.doc 或 .docx檔一樣，我們必須使用瀏覽器才能正確的開啟 .html檔。

 

 

而且還有一個特性跟 Word 一樣，就是不同的瀏覽器支援度不一樣。像是很多公司為了省錢使用 LibreOffice 一樣，用過的都覺得痛苦。開啟word檔一樣的檔案，LibreOffice 跟 Word 顯示出來的排版有時就是不一樣。

 

 

 

 

瀏覽器就是一個顯示特定格式檔案的顯示程式，而且它除了可以顯示自己電腦裡面的檔案外，它還可以跟別的電腦要檔案去顯示。執行方式就是透過網路硬體裝置連上對方的電腦，將檔案下載到自己的電腦裡，再顯示出來。

(透過 HTTP、HTTPS、FTP、SFTP ...等，就是利用這些通訊協定跟遠方的電腦要檔案、資料)。

 

 

 

這聽起來好像很理所當然，不值得分享。不過正所謂魔鬼藏在細節裡，有一個問題小編常被人問到：

 

某某網站會直接偷取其他網站內容當成自己的內容，有可能不讓他偷嗎？

 

 

這個答案很可惜的是：

無法，傳到前端的資料就是無法防範的。因為網際網路的根本，就是把整個網頁檔案連同圖片送給觀看的人或程式下載，觀看的人利用程式把網頁與資源使用瀏覽器解析後顯示。但是有可能可以讓他覺得「很麻煩」，或是讓技術上他無法克服。

(假設他沒有特別針對或是技術比較弱)

 

 

所以瀏覽器動作其實是兩個步驟，
 

 

 

如果無法接受這個概念，可能是因為這兩件事都是由同一個程式(瀏覽器)，依照順序執行。

 

瀏覽器在你提供網址之後，透過硬體裝置(以前可能叫做網卡)，會到該網址背後所對應的電腦下載目標檔案。當然提供檔案的電腦是有權利決定提供怎樣的檔案給對方下載，或是決定不給下載。

 

一般口語上我們會叫擁有瀏覽器且發出下載要求(Request)的電腦叫做用戶端(Client)，提供檔案電腦的叫做伺服器端(Server)。

 

如果用戶端成功獲得了伺服器端所提供的檔案，它就會把資料暫存起來，可能存在硬碟空間，也可能存在 Ram，每個瀏覽器都有可能不一樣。然後瀏覽器把那些檔案( .html 檔與其他資源)依照檔案設定的內容顯示出來，就成了我們看到的網頁。

 

 

 

網頁的目的大多是提供資訊，例如新聞，youtube 影片。但是資訊的排版方式是一件很重要的事情，就像實體的報紙一樣，標題要比較大，上面要顯示什麼左邊要顯示什麼，廣告底色之類的，這些一般來說資訊提供者都會想要設定。

 

因此就像是.doc 可以排版一樣，.html檔也可以排版。但是他比較麻煩一點，Word檔用滑鼠拉一拉就可以排版了。.html 則必須要用 HTML 這個格式語法來表示。所以所謂的 HTML 語法，就是設定網頁排版的一種被"規定"語法。

 

雖然 HTML 是一種給瀏覽器看的語法規定，但撰寫瀏覽器程式並不需要申請許可。所以真正決定行為的還是瀏覽器這隻程式與其作者。無論你的語法寫得多標準，全部都遵照語法規範，只要瀏覽器說你錯、看不懂，效果還是不會顯現正常。就算是現在這個網路時代，瀏覽器的行為還是沒有完全統一。更別說瀏覽器的程式如果不怕麻煩的話，是可以自己寫出來(需要花幾年則就看個人功力)。

 

瀏覽器的行為其中大部分是遵照 W3C 協會所制訂的，但並沒有強制性，並不是不照規範走就不能發行瀏覽器程式。

 

以HTML來說，目前最新的規範建議為 HTML5。新的瀏覽器大多都支援 HTML5，不過舊的瀏覽器因為已停止更新所以很多新技術都不支援。這也是為何 Windows 的預設瀏覽器 IE 惡名昭彰的原因，

 

 

現在如果使用 IE6 ~ 8去很多新的網站會發現都不支援，會跑版很亂。

(網站要支援到多低的 IE 版本可以參照微軟作業系統的預設，以 Windows XP 後期的 SP2 64 bits 來說預設是 IE 7，最後可以升級到 IE 8。Windows 7 預設是IE 8，可以升級到 IE 11，資料來源微軟)。

 

 

 

除了HTML外，通常會一起提到的還有 CSS 與 JavaScript，他們也都是有個別的規範。

 

CSS在原本只是HTML的狀態描述，例如描寫文字顏色、樣式，是寫在HTML裡面，稱作 style。但後來隨著功能越來越複雜而獨立出來有了自己的規範，最新的版本稱作 CSS 3，但是不太需要拘泥於這個名稱，原因後面會提到。

 

JavaScript 則與 Java 沒有關係，據稱是因為要沾 Java 這隻程式語言的光所以才這樣取名混淆視聽。JavaScript 主要是用來動態改變網站格式編排，或是執行瀏覽器提供的功能(瀏覽器如果沒提供，語法正確也沒用)。

 

正確的規範名稱其實叫做 ECMAScript，而 JavaScript 大致上是依照ECMAScript 的規範去製作，早年在微軟還有另外一個名稱叫做jScript，也是依照ECMAScript，JavaScript則是微軟對手網景公司製作的。

 

後來 JavaScript 贏了，所以jScript這名稱就消失與JavaScript融合再一起。現行大部分瀏覽器支援的 ECMAScript 版本為第5版，縮寫為 ES5。

 

雖然比較新的一些前端工具提倡使用第 6 版 ES6，但因為大多瀏覽器還不支援，所以需要前置編譯器轉換語法到 ES6 來相容。後面也一直有補充 ES7、ES8 等。不過一樣不用太拘泥於名稱。

 

不太需要拘泥於名稱的原因是因為，W3C 雖然每隔一段時間都會新增規範標準，但瀏覽器公司並沒有一定要照著發布順序去做更新，可以自己決定要加入那一些功能，所以瀏覽器公司並不是 ES6 的功能實現率到 100% 以後才會去實現 ES7 的功能，一切都是決定於他們。

 

此外前置編譯器能轉換的語法也是逐步更新，以現在最熱門的 Babel 來說，想要了解最新的支援的話，可以參考他們的 Blog，或是到他們的 Github babel-preset-env 上，他們有產出圖片可以參考。

 

 

 

 

 

幾年前，很多人極度的痛恨IE系列，因為前面提到的JScript的語法特殊，做同樣一件事情，寫法與別人就是不同。在還沒進入網路時代的時候，瀏覽器只是「作業系統」裡的一個基本程式，他還沒那麼多功能。所以最大的作業系統商微軟擁有定義什麼叫做「對的瀏覽器行為」，不甩其他競爭對手。所以Windows 的預設瀏覽器 IE 在古早的版本總是有很多獨特的行為。

 

後來網路時代，很多網路公司越來越大，例如Google, Amazon, Yahoo之類的。開始有發言權，W3C所協商的HTML標準與其他標準才比較落實。

(當然如果真的翻歷史的話，很早就有定義HTML標準，但就是環保協定一樣，大公司不參加你也沒轍。大公司總是喜歡當規格制定者，像是以前的Sony，狂出不相容的硬體規格，想利用規格控制市場。詳情可見Wiki HTML、瀏覽器大戰、W3C)

 

 

這時候就要提到 jQuery，jQuery就是那時候的產物，它的其中一個概念就是建立了一個程式端的中間層，讓所有的瀏覽器在同一種jQuery語法下做出同樣的動作。這樣就不需要特別去判斷不同的瀏覽器。

 

 

但是近年來因為微軟停止舊系統的支援，所以IE9以前的瀏覽器越來越少。Windows 10成主流，可以支援到 Edge。 所以這很多開發者為了效能都開始拋棄jQuery。就連 bootstrap 5 與 Ruby on rails 5 都已經不再包含 jQuery 了。

 

 

 

接著回到我們的實務面，如何讓讓別人無法惡意偷取我們的網站。

 

我們用最基礎的概念做簡單的分析。

 

1. 如果我們知道他是誰。

要知道對方是誰，可以用用戶端的IP地址查或是瀏覽器所發出來的要求去查。如果他的IP都是固定的，當然可以直接擋IP，不過如果IP不是固定的就擋不到。

如果看瀏覽器發出的要求 (Request) 去擋則更不切實際，因為儘管Request多半會帶些用戶端的系統資訊。但那是用戶端可以自己設定的。 這些偷盜的人士可能會使用自己的程式而非一般的瀏覽器。

 (可以把它想成自製的瀏覽器，或是最近常見的爬蟲程式，例如 UserAgent 就是很常被偽造的目標。)

 

 

 

2. 我們不知道他是誰

a. 可以先將文章資源加密，然後再解開。因為解開是用戶端瀏覽器幫忙解。

(通常是使用JavaScript)

 

意義上就是把鑰匙與鎖一起丟給用戶端，讓我們的丟給用戶端的程式去解，所以只要找到鑰匙，要解開也是很容易。但如果它的程式無法執行 JavaScript，他就無法得到解密過的資源。

 

 

b. 所有的網頁資源用 JavaScipt 取得。

一樣是可以過濾掉無法跑 JavaScipt 的爬蟲。曾聽說個案例，某台灣中小型數據公司，不曉得自己為何抓不到 Instagram 的資源，而為無法分析數據。

在 Instagram 使用的技術中，所有的資源都是開啟網頁後再執行 JavaScript 去抓真正的資料(AJAX)，因此爬蟲沒辦法執行 JavaScript 是無法抓到資料的。

此外 Instagram 是使用 React 利用虛擬 DOM 的方式執行程式，所以無法執行 JavaScript 除了抓不到資料外，其實也沒辦法會製出 HTML。

 

 

 

這都是最單純的技術敘述，所以可想而知還是有很多種不同的方法可以用來防守，本文只是藉此提供個契機，讓大家暸解有時一些很單純的基本程式常識正是所缺少的那一段。

   

 

最後，如果你喜歡我們的文章，別忘了到我們的FB粉絲團按讚喔!!