20
常網設計謬失 以登錯誤訊息設計為例

2015年4月TDOH幹部訓

Embed Size (px)

Citation preview

Page 1: 2015年4月TDOH幹部訓

常⾒見網⾴頁設計謬失以登⼊入⾴頁⾯面錯誤訊息設計為例

Page 2: 2015年4月TDOH幹部訓

相信,這個畫⾯面很常⾒見

Page 3: 2015年4月TDOH幹部訓

相信,這個畫⾯面更常⾒見這跟⿊黑⿊黑⼀一點關係也沒有

Page 4: 2015年4月TDOH幹部訓

可是瑞凡

Page 5: 2015年4月TDOH幹部訓

為⽑毛躺著也中槍

Page 6: 2015年4月TDOH幹部訓

這個網址怎麼怪怪的?

Page 7: 2015年4月TDOH幹部訓

我們換個網址試試

Page 8: 2015年4月TDOH幹部訓

合理推斷……?

Page 9: 2015年4月TDOH幹部訓

測試看看?

Page 10: 2015年4月TDOH幹部訓

不過就是彈個視窗 沒關係吧

Page 11: 2015年4月TDOH幹部訓

這下靠北了

Page 12: 2015年4月TDOH幹部訓

我幹了啥?

Page 13: 2015年4月TDOH幹部訓

只是把表單傳送的⺫⽬目標改掉⽽而已

Page 14: 2015年4月TDOH幹部訓

防護⽅方法?

Page 15: 2015年4月TDOH幹部訓

錯誤⽰示範

str_replace():把字串中的⼦子字串代換掉。

Page 16: 2015年4月TDOH幹部訓

<scRipt></Script>

<img src=“a.jpg” onerror=“”>

Page 17: 2015年4月TDOH幹部訓

正確⽅方式(⼀一)

htmlentities():把字串中的HTML字元代換掉

“<” 會轉變成 &lt; “>” 會轉變成 &gt;

……

Page 18: 2015年4月TDOH幹部訓

正確⽅方式(⼆二)

不顯⽰示使⽤用者所輸⼊入的字串

Page 19: 2015年4月TDOH幹部訓

正確⽅方式(三)— 有爭議

請愛⽤用Chrome或Webkit核⼼心瀏覽器

某些情況下會無法作⽤用,所以請不太過份依賴

Page 20: 2015年4月TDOH幹部訓

Q&A