Yang Yang

上一篇教各位如何將前端配合同構達成如SSR的效果，但是其實那種寫法是有一些資安隱憂需要注意的。原本是CSR變成SSR的話，就需要考量到Server注入的資料是否有問題，因此有可能會發生XSS的問題。 SEO全系列文章📌 如何加強網站的SEO - 基礎篇📌 如何加強網站的SEO - 進階篇📌 如何加強網站的SEO - SSR與CSR篇📌 如何加強網站的SEO - 同構篇📌 如何加強網站的SEO - 框架篇📌 如何加強網站的SEO - 資安篇 認識Cross-Site ScriptingCross-Site Scripting又稱為XSS，中文稱作跨網站指令碼，透過程式碼注入的方式，將程式把注入到網頁上面並且執行，而影響到網站的正常運作，XSS變化的方式不少，時常搭配HTML的斷句或是大小寫等…避開一些程式規則。 什麼狀況會發生XSSXSS有很多案例，以下列出幾個比較重要且經典的 Reflected XSS - 即時反映的script有任何可輸入的欄位，都必須小心發生XSS通常惡意者會利用回吐的error，從中拿取資料 1234<form> <in ...

相信很多人看到上一篇文章大概都嚇壞，甚至打退堂鼓了心裡開始想：什麼？難道要做SSR是這麼複雜的事情？其實任何的方式都可以簡單也可以複雜，只是你有沒有選擇對的工具和方法之前已經有很多人注意到了這點，所以框架的框架也誕生了 SEO全系列文章📌 如何加強網站的SEO - 基礎篇📌 如何加強網站的SEO - 進階篇📌 如何加強網站的SEO - SSR與CSR篇📌 如何加強網站的SEO - 同構篇📌 如何加強網站的SEO - 框架篇📌 如何加強網站的SEO - 資安篇 什麼是框架的框架大家熟知的框架當然就是React和Vue我們都知道這兩個都是開發前端網頁很有名的框架但是有團隊非常熱心的開發了框架的框架，加速和解決大家開發程式所遇到的問題因此之後就有了Nextjs與Nuxtjs，以下帶大家了解 為什麼需要Nextjs讓我們來看看官方的這段話 1Next.js gives you the best developer experience with all the features you need for production: hybrid static & serv ...

在上一篇了解為什麼很多開發者希望把CSR做到如SSR的效果，這篇就來介紹如何做到Isomorphic的效果。以下將會介紹如何讓SPA程式做到類似SSR的效果。補充：不管你是開發Vue或是React，Server端的程式都是Node.js，因此開發任何框架的開發者都可以觀看這篇參考。 SEO全系列文章📌 如何加強網站的SEO - 基礎篇📌 如何加強網站的SEO - 進階篇📌 如何加強網站的SEO - SSR與CSR篇📌 如何加強網站的SEO - 同構篇📌 如何加強網站的SEO - 框架篇📌 如何加強網站的SEO - 資安篇 認識IsomorphicIsomorphic的翻譯為同構，你可以理解成，建構出相同程式的概念，有些人又稱它叫做pre-render。一般傳統的SSR會把所有的程式產生出完整的HTML再丟到Client，但是同構的方式跟SSR不一樣。同構所做的事情是，他只會把產生出部分的HTML給Client，剩下半殘的未產生的HTML繼續交給Client產生。 關於調整以下的調整將會分F2E與Node（中間層或API server）的部分改寫調整的部分其實比較麻煩的 ...

這篇文章將會進一步的講述上次所提到的SSR與CSR，並且進一步的分析如何讓CSR也能達到如SSR的效果。 SEO全系列文章📌 如何加強網站的SEO - 基礎篇📌 如何加強網站的SEO - 進階篇📌 如何加強網站的SEO - SSR與CSR篇📌 如何加強網站的SEO - 同構篇📌 如何加強網站的SEO - 框架篇📌 如何加強網站的SEO - 資安篇 SSR與CSR比較 Server-Side Rendering 傳統網頁渲染的方式，從Server產生HTML後，再傳送到Client。 需要等待Server產生好HTML，Client才會收到畫面，因此可能會有等待過久的狀況。 Client-Side Rendering Modern web的網頁開發框架主要是以CSR為主，通常是SPA的網頁開發框架。 程式傳送到Client才產生HTML，所以一開始Client收到的HTML，幾乎是一張白紙，只有進入點（root）。 SPA藉由先傳送程式碼到Client，來增加Client瀏覽網站的流暢度，在某些情境可以加速載入。 CSR的疑問你可能看完上面的比較，會覺得CSR ...

我們在上一篇提到了SEO的基本觀念，先大略的認識什麼是CSR, SSR與如何加強SEO的部分後，再來就是進一步的探討SEO更進階的應用，之後將會介紹如何透過SSR來達成SEO的效果，另外也會包含如何善用schema來達到更進階的網站辨識度。 如果你在尋求如何把SPA達到如SSR的效果，那麼可以參考之後的SEO文章。 SEO全系列文章📌 如何加強網站的SEO - 基礎篇📌 如何加強網站的SEO - 進階篇📌 如何加強網站的SEO - SSR與CSR篇📌 如何加強網站的SEO - 同構篇📌 如何加強網站的SEO - 框架篇📌 如何加強網站的SEO - 資安篇 SSR與SEO的關係SSR翻譯為伺服器端渲染，也就是直接從Server產生HTML，而非JavaScript這類的程式碼傳到Client端。你可能會問，為什麼SSR這麼重要，又會跟SEO常常扯上邊討論呢？主要的原因就是要讓Search Engine讀懂你的網站。 Search Engine如何讀懂至於是如何讀懂的，其實官方始終並沒有明確的表示，他們是如何使用搜尋演算法來過濾這麼龐大的網路。主要原因是因為，如果他們明確 ...

有時候在撰寫程式的時候，特別是設計表單事件時，都有可能會放置function的時候，如果對觀念上有誤解，很有可能會造成呼叫後發生錯誤。以下就來介紹一下設計事件需要注意的問題。 一般的Function使用以下是我們時常使用Function的方式，一開始initialForm被定義之後，當這個Function被呼叫的同時，就會馬上被執行。 123456function initialForm(customList) { const customElement = document.createElement('li'); customList.append(customElement);}initialForm(customList); 搭配事件使用的Function請查看以下簡單的範例 12345function sayHelloToEveryone() { alert('Hello');}greetButton.addEventListener('click', sayHell ...

在開發程式的時候，通常會利用Git進行專案的版本控制，但是事實上不少工程師，甚至是資深工程師，都有可能誤用或是誤解Git正確的用法，其實之所以會有這些誤用，只能說是因為網路資訊普及造成的現象，當自己什麼都不清楚的狀況下，很容易在初學的階段就輕易相信別人所說的話，所以導致不經意的錯誤觀念不斷誤用，以下將整理一些重點給大家知道。 為什麼會學不好Git 情境跟指令搭不起來有些指令根本不是做那些事情，反而拿去使用了這些指令，可能會導致專案版本控制出了狀況。 基本認知有錯，把它當FTP在用很多人以為Git不就是像GitHub那樣把檔案放到雲端上管理，但是事實上那根本不是Git在做的。 先來提供學習資料 Gitbook這邊我要推薦五倍紅寶石的高見龍老師的網站，當然你也可以買他的書，但是他的書本事實上幾乎跟網站上的資料一模一樣，但是你也可以購買他的書當作是贊助和保養自己的眼睛用。我們公司也請過高大大來演講過不少次，都有把很多Git的精華提供給我們受益良多，這邊也希望能夠幫他多推廣知識，讓更多知道Git真正的用法。 官方網站現在網路流通的時代，導致太多人喜歡看懶人包學習，導致基本功容易不扎實，但 ...

有一句話時常在網路上看到：ECMAScript 2015的出現，讓JS具有完整的class特性了！但是這句話其實是錯的，你可能會問為什麼？不是從那個時間點開始有了class可以用的嗎？但是其實class在JavaScript中，說穿了不過就是一個糖衣罷了，要實現class的特性，主要還是基於Prototype上運作。讓我們看以下的範例 Prototype讓我們來用Prototype來實現一般我們所熟悉的class來看看吧！ constructor這個function我們可以視為是類別的一個constructor當function被建立的時候，其實就可以將這個行為視為是一種constructor 123function Pet(name) { this.name = name;} 宣告內容在protoType內在你所宣告的function內，你可以在它的prototype裡面放入你想放的內容 123Pet.prototype.meow = function meow() { console.log(this.name + ' me ...

以下將以React抓取wordpress的資料為例子，讓你知道如何解決跨網域存取遇到的問題。 前言在開發一些大型專案時，會運用同網域限制（Same origin policy）來保護資料傳輸的安全性問題。最常見的手法就是，在你的前端開一個Node.js API 專門與後端進行溝通，同時又能確保IP不被洩露的風險存在。但是有時候專案上，會需要外部網域存取來完成你的需求。例如：有一個專案要從WordPress的REST API拿資料，在自己的local測試是可行的，但是一旦Deploy到Lab，在Travis CI查看時，發現產生了不可預期的錯誤，抓下來的JSON是undefined，這就是同網域限制的問題。 同源策略以下假設，現在有server1.abc.com 和 server2.abc.com兩個網域理論上來說，server1和server2是無法進行溝通的。但是在HTML中，script tag是一個例外。因此可以利用script tag這個例外來達成雙方的溝通。例如：從server1動態產生JSON傳給server2。這個模式稱為JSON-Padding。 認識JSONP做法主要 ...

講到常用的資料結構，一定會想到Array和LinkedList，但是一旦被問到他們的差別或是實際如何去應用時，很多人便會無法以實際的例子來詮釋，特別是在面試的時候。 兩者主要差異以下是我整理出比較常見的差異 Array是index based的結構，LinkedList則是Reference based。 Array會存在sequential memory locations，LinkedList則是sequence of the elements，每一個element都會link下一個element。 Array裡面會儲存同樣結構的資料，可以是Primitive Data Type或是Object Data Type，LinkedList裡面每個儲存的Object都會包含Data與Link。 Array可以先宣告要多大的空間，LinkedList則不受限。 Array存取資料需要index，LinkedList需要從頭開始尋找資料。但是上面列出來的差異都是大家很常見的，所以下面做更完整的整理。 儲存結構Array：Random Access即是隨機存取，又被大家稱為直接存取。 t ...