Category: html

[html] 從 html spec 了解有時候按下 enter 會自動 submit form,有時卻不會?

在開發網頁時,我們時常會使用 <form> 實作表單,但你是否有發現有些 <form> 按下 enter 不會自動 submit,有些卻會呢? 讓我們來看看 html spec 怎麼定義何時應該觸發 form 的 submit 行為 4.10.22.2 Implicit submission A form element’s default button is the first submit button in tree order whose form owner is that form element. If the user agent supports letting the user submit a form implicitly (for example, on some platforms hitting the “enter” key while a text field is focused implicitly submits […]

[HTML] form.submit is not a function,這命名不合理阿!

前兩天看到了這篇文章,覺得蠻神奇的哈哈 大概就是在說瀏覽器會自動幫我們把 form 底下的 input name 屬性,綁定至 form 底下 舉個正常使用的例子: 可以看到上面這個例子,瀏覽器會把 account與 password 綁定到 form 元素的屬性上,form.submit 則可以提交表單。 接下來我們試著將 form 底下的 input name改個命名。 上面這個例子,可以發現 form 底下的 id 、 className及 submit 屬性都被覆寫掉了,原因是我們將底下的 input name 改為這些關鍵字 導致這些屬性被覆寫掉,某種程度或許也可以說是 bug….不過我想應該大多數人不會這樣命名才對….. PS. MDN 文件也有提到這件事,請參考https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit 參考資料: https://trackjs.com/blog/when-form-submit-is-not-a-function/?utm_campaign=blog&utm_source=social&utm_medium=hootsuite&utm_content=form-submit

[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

[HTML、CSS] 載入圖片失敗時,純 CSS 替代處理方法

當我們在網頁中載入外部圖片時,時常會使用 HTML 的 <img> 標籤 src 來嵌入圖片來源,這也是其中一個可以允許發送跨域請求的 HTML 標籤。 PS. 跨域請求:簡單來說就是可以載入任意網域的外部資源,因此常是 XSS 的攻擊方式之一。(這邊不多談) 若外部網域發生錯誤,圖片無法正常顯示則會產生一個醜醜的小縮圖,如以下範例: 因此若你的網站有大量外部資源圖片,就可能因為圖片載入失敗而影響排版與視覺觀感。   其實預設在 <img> 標籤本身就附帶 onload、onerror、onabort 幾個事件來判斷圖片是否載入成功 onload:當圖片成功載入時觸發此事件。 onerror:當圖片載入失敗時觸發此事件。 onabort:當使用者手動中斷此圖片的載入,如:點擊瀏覽器左上角的停止載入按鈕。 我們可以透過以下的程式碼來測試以上情況所觸發的事件 PS. 在瀏覽器按下 F12,選擇主控台或 console 即可看見不同情況的輸出訊息。 因此大家可能會想,那就可以利用此事件。當圖片載入發生錯誤,我們就將 src 替換為替代圖片。 因此可寫出如以下的程式碼 <img src=”404.jpg” onerror=”this.src=’noimage.jpg’” /> 但是以上這段程式碼可能會發生無窮迴圈而無止盡執行的錯誤。 若 noimage.jpg 也發生錯誤,就會導致無止盡的替換 src ,但又無止盡的發生錯誤,造成網頁的崩潰。 以上說了這些事件,是希望大家能對事件有初步的了解及可能的應用。 再來我們進入主題,可以如何使用CSS來做取代圖片 首先我們來看 <img> 這個標籤,當讀取圖片失敗時有沒有什麼特性。 <img src=”404.jpg” alt=”圖片讀取失敗” /> 若圖片讀取失敗,會將 alt […]

[HTML] script 資源載入,async、defer 與 integrity

HTML5 在 <script> 標籤中新增了幾個幫助載入外部 js 資源的屬性。 首先,先來看一下 DomContentLoaded 與 load 事件 網頁正常載入的順序: 解析 HTML 結構 載入解析外部 stylesheet 或 js 資源。 執行載入的 script (注意:此時會暫停 HTML 的繪製) HTML dom 載入完成 ( DomContentLoaded,JQuery 的 ready ) 載入剩餘的 stylesheet 與圖片或 frame 全部資源與頁面載入完畢 ( load ) 從以上流程我們也可以發現,為什麼有人常說若是需要等 dom 載入完成才能執行的 <script> 標籤,放在body 底下可以增進網頁的載入速度。 有了初步流程的認識,接下來說說 HTML5 在 <script> 幾個新增的屬性~ async 在背景下載 script(不暫停 […]

[HTML] 被忽視的HTML attribute aria-label、aria-hidden

寫網頁時總是會套用些如:bootstrap、angular-material 等等的樣式框架 不知道大家有沒有注意到,其中有些 CSS 的 class 名稱為 sr-only 或是一些 aria-label、aria-hidden 等的HTML屬性。 由於現在很多 <input> 都不像以前外層會包一個 <label>,便使得朗讀軟體難以辨認此元件。 因此這些是為了增進網頁的 accessibility,讓一些閱讀不易的使用者,可以透過朗讀軟體來存取你的網頁。 我們來看看一個普通的輸入使用者名稱 <input> 在 windows 我們可以試著按 [win] + [enter] 開啟朗讀程式,預設可支援IE,打開IE點選網頁的 <input> 部分可以測試。 目前我的測試是優先抓取的屬性為: aria-label > title > placeholder 當然,每種朗讀程式會抓取的標籤有所不同,但 aria-label 是一定會被抓取的,title 與 placeholder 則不一定。 aria-hidden=”true” 則是可以讓朗讀軟體讀不到此元件。 相反地 .sr-only 這個 class 是只有使用朗讀程式才看得到(其實是讀取到),一般使用者則會隱藏此元件。 其他還有細部的 aria-* 的屬性,可以參考 參考資料: http://lepture.com/zh/2015/fe-aria-label http://lepture.com/zh/2014/talk-on-accessibility-jsdc2014