[javascript] 利用瀏覽器特性判斷瀏覽器類別

許多人使用 http 請求的 header 中 user-agent 這個欄位來判斷瀏覽器,但在許多程式及APP,其實都內建修改 user-agent 的方法。 這邊記錄一下使用 duck typing 來判斷瀏覽器的方法,而不以輕易被偽造的 user-agent 判斷。 每個瀏覽器都有一些內建的方法或特性可以判斷 參考資料: http://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser

Continue reading


[html] 惡意超連結,window.opener 隨意更改你的網頁

大家寫網頁時一定學過 a 這個標籤,用來嵌入一個超連結 在這個標籤中,附帶了一個屬性為 target,可以決定開啟時是否新開分頁 我們可以常見的設置值 “_blank”,但這個值其實帶有一些風險 以下我們將詳細說明   比如我們今天在 A 網頁中嵌入一個超連結 站內連結(新開分頁) 在新分頁中,我們打開瀏覽器開發者工具(F12)的 console 輸入以下程式碼 你會發現我們可以操控原來的A網頁並且改變原來A網頁的內容 當然你會說站內連結通常不會是惡意網站吧!? (是沒錯啦~通常不太可能) 那我們試著使用站外連結 站外連結(新開分頁) 一樣打開瀏覽器開發者工具的 console 輸入以下程式碼 從以上程式碼可以發現,我們可以透過這個新開分頁,將 A 網頁導向惡意網站 利用這樣的手法,將使用者導至釣魚網站,便能做進一步的攻擊。 其實我們只要在 a 標籤的 rel 屬性加上 rel=noopener 即可使 window.opener === null 或者避免透過 html 的 a 標籤來新開分頁,使用 javascript 做新開分頁的動作。 參考資料: https://mathiasbynens.github.io/rel-noopener/#hax

Continue reading


[javascript] map/reduce 用法與解析

在 javascript 中的陣列有兩個函式方法為 map/reduce map: 不改變目前陣列結構(長度、元素量)的情況下,將其中元素做一些處理或修改後複製至新陣列。 map 方法會針對陣列中的每個元素呼叫一次回呼函式(callback)。 回呼函式(callback)有三個參數 value:元素的值 index:元素在陣列中的索引值 array:處理前的原陣列 比如說我們想將陣列中的值都改為平方值:   reduce: 將目前陣列中的所有元素做累加的動作,例如加總所有元素,將回傳元素之累加總和。 reduce方法會針對陣列中的每個元素呼叫一次回呼函式(callback),並且提供兩個參數 callback:走訪每個元素所呼叫的回呼函式。 initialValue:初始值,可能是累加的初始值。若未傳入此參數則會從第二個元素開始呼叫回呼函式。 回呼函式(callback)有四個參數 previousValue:上一個元素呼叫回呼函式所傳回的值 currentValue:目前陣列元素的值 curretnIndex:目前陣列元素的索引值 array:處理前的原陣列 比如我們今天想將陣列中的所有元素加總     參考資料: https://msdn.microsoft.com/zh-tw/library/ff679975(v=vs.94).aspx

Continue reading


[javascript] some/every 函式用法與解析

在 javascript 中陣列有幾個檢查元素值的函式方法,這邊介紹兩個比較常用的函式 some: 用來檢查陣列中是否有任一元素符合條件。 例如: 檢查陣列中是否有元素大於 10 只要其中一個元素大於 10 就會回傳 true   every: 用來檢查陣列中所有元素是否符合條件。 例如: 檢查陣列中所有元素是否都大於 10 只要有其中一個元素不符合條件就會回傳 false   參考資料: http://www.w3schools.com/jsref/jsref_some.asp http://www.w3schools.com/jsref/jsref_every.asp

Continue reading


[javascript] filter用法與移除陣列中重複的元素

javascript 中的 filter 函式,可以幫助我們過濾一個陣列中符合條件的元素,若不符合則刪除。不更改原陣列,而回傳新陣列。 filter 函式,接受一個 callback 函式,callback 可以有三個參數(element, index, array), element:陣列元素的值。 index:陣列元素的所在位置。 arr:已經過 filter 處理的陣列 比如說要過濾陣列中值小於10的元素 callback 中,回傳 false 的元素將會被移除,但注意元陣列並未改變,而是回傳新陣列。 利用這個函式,我們可以使用在過濾陣列中重複的元素 這樣就可以簡單又快速地快濾重複的元素~     參考資料: https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/filter http://larry850806.github.io/2016/07/16/JS-tips/

Continue reading


[javascript] for….in的用法與注意事項

在 javascript 中,有 for、foreach 及 for…in 這幾個走訪陣列的迴圈可以使用,然而 for..in 它可以走訪物件的屬性名稱與值。 但 for…in 也有一些特別需要注意的地方。 我們先來看一些基本的用法吧~ 上面這段程式碼可以看到 for…in 可以應用在走訪陣列與物件屬性上面。 接下來我們看 for…in 有沒有什麼需要注意的地方 我們從上面這段程式碼,可以發現 for…in 是會連繼承的屬性和方法都會走訪。 但是在大多數時候,我們是不需要走訪所繼承的屬性及方法。 因此我們必須使用 hasOwnProperty() 檢查這是否為非繼承的屬性(true/false) 例如將上面程式碼改為以下: 這樣就不會把原型(prototype)中的方法也印出來囉! 參考資料: https://pjchender.blogspot.tw/2016/06/javascript-for-in-function.html

Continue reading


[javascript] 預設的函式建構子(function constructors)與原生值

在 javascript 中,預設內建了一些基本的函式建構子(function constructors) 我們可以透過這些函式建構子建立相關物件,並且繼承此函式的原型(prototype)方法。 PS. 但他們型別會與原生值不同,因此還是建議不要使用,以免混淆原生值與物件。 上面這段程式碼可以看到,使用內建的 Number 及 String 函式建構子可以繼承原函式的原型(prototype)方法,也可以自行再新增原型方法。(注意,若新增的原型方法名稱與內建相同則會覆蓋掉) 最後,建議大家還是不要使用內建的函式建構子去建立原生值,讓我們看看為什麼 使用函式建構子與原生值的型態會不相同,並且很有可能造成一時無法分辨錯誤。 參考資料: https://pjchender.blogspot.tw/2016/06/javascriptfunction-constructors.html

Continue reading


[javascript] 函式建構(function constructor)中的原型(prototype)用法

我們先來看看直覺使用 new 這個函式建構關鍵字建立物件時,可能寫出的程式碼 這種寫法看起來蠻直覺,但當我們有多個 person 物件時,其中的 fullName() 其實是相同的方法,他們應該可以共用此方法。 但這種寫法會導致每個 person 物件都擁有一個 fullName 方法,佔有較多記憶體。 若使用以下函式原型(prototype)的方法的話,所有 person 物件都繼承同一個函式 constructor 的方法。 但其實當我們今天使用 new 這個函式建構關鍵字建立物件時,物件會繼承原有函式的原型(prototype)方法 比如說: 從上面這段程式碼,我們可以觀察到以下幾點  每個函式預設會有 prototype 屬性,預設為空物件{}。 當我們使用 new 函式建構物件時,物件會繼承原函式中的 prototype 屬性,至 __proto__.constructor 中。 因此當我們嘗試使用物件呼叫此函式原有方法時,將會是繼承自函式原型(prototype)的方法。 PS. 注意,函式的 prototype 並不代表函式原型,也就是並不能以 prototype 存取 proto。 再來可能有人會疑問,如果要更改物件的原型(prototype)方法,只能使用一行一行指定 prototype 之中的方法嗎? 其實有一個 javascript 建立物件的方法 Object.create(),這個方法提供傳入一個物件參數。 它將幫助你根據此物件建立相關的原型(prototype)方法,直接看程式碼吧~ 這樣我們就可以根據某個通用物件建立基本的物件,再針對各物件去宣告獨有的屬性與方法! 參考資料: https://pjchender.blogspot.tw/2016/06/javascriptfunction-constructorprototype.html https://pjchender.blogspot.tw/2016/06/javascriptprototypal-inheritance.html

Continue reading


[javascript] 函式建構(function constructor),new 關鍵字的用法與解析

在 javascript 中,有一個關鍵字為 new 它可以幫我們透過函式建構(function constructor)一個物件,並賦予相關的屬性及方法。 我們直接來看程式碼範例吧~ 上面這段程式碼,透過 new 會幫我們創造一個空的物件 接下來我們看一些賦予屬性與方法的例子 PS. 以下的 this.fullName 方法並不適合這樣寫,詳細請見https://wp.me/p7kqsB-bz 這樣原本空的物件,就會被賦予相關屬性與方法,有點像 C++ 或 JAVA 中的 class。 再來,我們看看若我們宣告的函式有相關回傳值的話呢? 最後,若我們嘗試回傳一個物件呢? 可以看到,若我們回傳物件的話,將會以回傳的物件為主,原有的物件屬性與方法將不會回傳。 參考資料: https://pjchender.blogspot.tw/2016/06/javascriptfunction-constructornew.html

Continue reading