Tag: javascript

[XSS] web security wargame (上)

最近在玩 alert(1) 的 XSS 小遊戲,藉此紀錄一下每關的思路及解法 (建議先自己玩過之後再看這篇,免得被我雷到 XD) XSS 的危險性就不特別解釋了 輕則可以注入挖礦程式,重則被盜用個人資料 以下有每關的解法及答案,防雷 ~ Warmup (第一關)相當單純的沒做任何輸入過濾,可以直接湊出 “) 即可 Adobe (第二關)多了 ” 取代為 \” 的處理,那就多放個 \ 囉 XD JSON (第三關)完全用 JSON.stringify 做字元過濾,少了 <, >, / 這些的過濾 Markdown (第四關)常見的 markdown 轉為 HTML 的取代方式,看起來突破口不是 a 就是 img,嘗試使用 onerror 接口突破 DOM (第五關) 看了很久,找到最有可能的為 createComment 這個接口,配合 > 塞上 img 即可 Callback (第六關)明顯的第一個參數是不擋 […]

[javascript] delete 和設為 undefined 差別在哪?

前一陣子在討論刪除一個變數的屬性值,應該用 delete 還是設為 undefined 呢? 讓我們來看看兩種作法差別在哪 undefined單純只是將屬性值改為 undefined ,屬性仍然存在. delete刪除此 Object 的屬性 直覺看起來好像 delete 可以準確的刪除此屬性值,但有個要注意的地方是 delete 並不會刪除 prototype chain 的屬性值 舉個例子: 因此可能要注意的是,如果要避開 prototype chain 上面的屬性值 必須要使用 hasOwnProperty 進一步檢查屬性值 XD 參考資料: https://stackoverflow.com/questions/14967535/delete-a-x-vs-a-x-undefined

[javascript] 清空 array 的方法介紹與比較(new、pop 及 shift…等)

紀錄一下幾個 javascript 清空陣列的方法比較。 指派一個新的空陣列 reference arr = []; ps. 如果有其他變數仍然指到原本的陣列,會造成占較多 memory,以至於效能不佳。 長度設為 0 arr.length = 0; splice 移除 arr.splice(0, arr.length); 迴圈 pop 清空 迴圈 shift 清空 來看看上面這幾個清空陣列的 jsperf 效能比較:https://jsperf.com/array-destroy/40 在多數瀏覽器,pop 和 shift 的方法最有效率,但在 firefox new 的方法效率遠大於其他方法。   參考資料: http://www.jstips.co/en/javascript/two-ways-to-empty-an-array/

[javascript] throttle 與 debounce,處理頻繁的 callback 執行頻率

在 javascript 的程式碼執行,採的是非同步的 callback 函式。 因此時常會是一個 event 觸發 callback 執行,但有時可能會頻繁的觸發事件(比如說瀏覽器的 resize 或 scroll 等等事件) 這時候如果每次觸發都執行 callback 可能不是這麼必要,甚至導致程式碼執行效率不佳 我們就可以透過 underscore.js throttle 或 debounce 的方法去優化這些 callback 的執行時間點。 debounce: 把短間隔時間(自行設定微秒)內重複觸發的事件合併為一個(自行設定觸發時間點),只呼叫一次 callback。 像是當瀏覽器 resize 時,會頻繁觸發 resize 事件,使用 debounce 就可以達到視窗最後改變時再觸發 callback。 下面例子,試著把滑鼠頻繁的在 Trigger area 中移動,可以看到 debounce 函數的實際效果。 See the Pen Debounce. Trailing by Corbacho (@dcorb) on CodePen. 上面這個例子,可以看到當你在 Trigger area 頻繁移動滑鼠(400微秒內)時,僅會觸發一次的 […]

[Javscript] insertAdjacentHTML、insertAdjacentText,vanilla.js 就支援的插入 HTML 及文字

最近才知道 HTML 元素有 insertAdjacentHTML  insertAdjacentText這兩個方法,讓插入 HTML 或文字位置時可以比較有彈性。(類似 jQuery prepend 或 append 等等) 以下就來介紹他的用法吧~ insertAdjacentHTML(position, text) 及 insertAdjacentText(position, text) position: beforebegin: 插入在元素標籤前(外層) afterbegin: 插入在元素標籤內的開頭 beforeend: 插入在元素標籤內的結尾 afterend: 插入在元素標籤後(外層) text: 期望插入的 HTML 字串或純文字。 ps. insertAdjacentText 與 insertAdjacentHTML 差別就在 insertAdjacentHTML 僅允許插入純文字。 直接來看看程式碼或許會更理解囉~ 參考資料: https://developer.mozilla.org/zh-TW/docs/Web/API/Element/insertAdjacentHTML https://developer.mozilla.org/zh-TW/docs/Web/API/Element/insertAdjacentText

[javascript] vanilla js 實作 JQuery.extend 方法

若有使用過 JQuery,或許會對 extend 這個方法有些熟悉及基本了解。 先來看看 extend 的用法 jQuery.extend(obja, objb) 方法輸入為兩個參數,此方法會判斷 obja 與 objb 屬性,將 objb 物件所擁有的屬性覆寫/新增至 obja,並回傳 obja。 來看看程式碼比較快理解~ 從上面的例子可以發現幾個值得注意的地方 a 與 b 都存在的屬性,會被 b 覆寫 a 與 c 是同一個物件   接下來,我們試著用 vanilla js 實作 extend 函式 上面這段程式碼簡單實作了jQuery 基礎的 extend,但實際的 jquery.extend 提供更多的選項及參數彈性 舉例來說: 上面這段程式碼, a 與 b 物件皆有 second ,而且 second 底下的屬性是不相同的,但卻直接被覆寫。 也就是沒有 deep extend […]

[javascript] vanilla js 實作 addClass() 與 removeClass()

以前寫 javascript 要去改變 新增/刪除 元素的 Class 總是覺得 jquery 方便許多,今天想說來整理個純 javscript 實作 addClass() 和 removeClass() 目前處理元素的 Class,我們可以使用 className 及 classList(支援IE10以上及各瀏覽器,部分瀏覽器有些小限制)。 以下例子會使用到 querySelectorAll (IE8以上之瀏覽器支援) 首先看使用 className 的實作 上面這段程式碼使用 className 實作出 selector addClass 的功能   上面這段程式碼則使用 className 實作出 selector removeClass 的功能   接下來我們換成使用 classList 實作 addClass() 與 removeClass()。(支援IE10 以上) 上面這段程式碼使用 classList 實作出 addClass()   上面這段程式碼使用 classList 時作出 removeClass() […]

[javascript] Singleton 唯一實體

最近跟同事討論到了 Singleton 的實作,之前都沒有想過實際的細部實作 要創造一個物件,我們可以使用物件或 new 方法,以下我會分別介紹這兩種方法如何實作 Singleton。 物件: 上面這段程式碼 a 和 b 將會是相同實體。   new 方法建造物件: 利用這個 myInstance 物件(函式)的靜態變數 (instance) 記住已經建造過的物件,讓之後建造時都回傳先前已存在之物件。   這段程式碼則是另一種 new 方法的 Singleton 的實作方法,第一次進函式時,覆寫 myInstance 的 constructor,之後 new myInstance() 時,其實只會 return instance。   參考資料: http://stackoverflow.com/questions/1479319/simplest-cleanest-way-to-implement-singleton-in-javascript http://stackoverflow.com/questions/31222765/javascript-singleton-pattern http://cythilya.blogspot.tw/2015/06/javascript-design-pattern-singleton.html

[javascript] call by reference 還是 call by value?

在 javascript 中,究竟是 call by value 還是 call by reference? 讓我們嘗試執行以下的例子及程式碼測試看看 上面這段程式碼,我們用 add() 將 a 加 1,但實際上並沒有真正的讓 a=2,可以猜測在這個例子中,函式 num 為 a 的複製,而不是真正對 a 的實體做加減。 上面這段程式碼,我們用 empty() 將 a 的值改為空字串,如上面那個例子,str 也是 a 的複製,不是對 a 的實體操作。   在上面這段程式碼,我們可以發現在物件則是對實體進行操作。   從上面這個例子看起來卻不是完全的 call by reference,   因此大概可以發現在 javascript 中,對於 Primitive type(Number、 String及Boolean等)為 call by value。 在物件、陣列及函式時則為 call by reference。(當然有一些爭議) […]