跳到主要內容

Wicket - Don't autocomplete

Problem

瀏覽器的貼心有時會為開發人員帶來困擾:


相信這個畫面大家並不陌生,登入facebook、mail都會跳這個dialog;在你下次登入時,瀏覽器會自動幫你輸入帳號密碼。當你做的軟體有整合LDAP、AD、SMTP、Samba任何與帳號密碼有關的功能時,使用者會想遇到這樣的狀況嗎?


假如我根本不需要使用帳號密碼,你幫我填入我不是還要自己消掉嗎? 除此之外,在Submit後所跳出的對話盒,是另一個困擾。本篇文章會分享針對這兩個問題的治療經驗。

How to prevent the autocomplete?

我撰寫此篇文章時,測試的瀏覽器分別為以下版本:

  • Chrome: 70.0.3538.77
  • Firefox: 63.0.1
  • IE: 11.0.9600.19129

分享的方法是給大家參考,最後要使用哪種就看應用程式需求。

Don't use type="password"

要一次解決以上兩個問題,就是不要使用password。目前看到唯一跨瀏覽器的方法,可以使用這個GitHub上MIT license的project: text-security;它是透過css去模擬密碼的外表,可以直接看demo

Declare field as Readonly

這個做法是為了解決autocomplete的問題。原理就是將password field設定為readonly,而瀏覽器針對有值或者readonly的password不會自動填入,最後再透過onfocus將readonly屬性移除就可以正常使用:

<input type="password"  readonly
     onfocus="this.removeAttribute('readonly');this.select(); this.selectionStart = this.selectionEnd = this.value.length;"
     onblur="this.setAttribute('readonly','readonly');" 
    />

在IE上如果僅移除readonly屬性,會造成點擊兩次才能夠輸入密碼的問題,必須透過再次選取與調整游標位置去讓使用者無痛;onblur是為了避免使用者按tab又觸發autocomplete的問題。最後我們有使用這方法,主要是由於我們使用Apache Wicket,這種方式比較容易做成可重複使用的元件。

Apply autocomplete="nope" or autocomplete="off"

這方法不推薦使用。目前我知道autocomplete=“off”可以使用於IE,但autocomplete=“nope”只能用於chrome與firefox的某些版本。

Fake blank input field

這個做法是在form的前面塞入隱藏的欄位給瀏覽器做自動完成。最早我們使用這個方法,但它有以下缺點:

  1. 如果整合的系統相當多,你會產生許多duplicated code。
  2. 在form submit之後,如果你的real-username與瀏覽器記住的username不同,所彈出記住登入資訊的帳號,會讓使用者覺得這是個bug。
  3. 在firexo 63以後的版本依然會有自動完成的現象;也是這個原因導致我們花時間研究這個問題。

<form autocomplete="off">
  <input id="username" style="display:none" type="text" name="fakeusernameremembered">
  <input id="password" style="display:none" type="password" name="fakepasswordremembered">
 
  <input id="real-username" type="text" autocomplete="nope">
  <input id="real-password" type="password" autocomplete="new-password">
</form>

(範例程式出自於link)

How to prevent the browser show remember login dialog?

這個問題除了避免使用password欄位以外,目前我沒有萬全之策。以下是我針對不同瀏覽器所觀察到的情況,版本與autocomplete部分相同:

  • IE: 宣告autocomplete=“off”後就解決了。
  • Firefox: 以Ajax Request取代傳統form的submit。
  • Chrome: 即使以Ajax Request取代傳統form的submit一樣會出現。目前發現只要在http、可信任的https,且在帳號密碼欄位消失時,才會跳出來;帳號密碼欄位消失指的像是關閉Dialog的動作。

以我們的軟體而言,最大問題是在Firefox上。這邊提供個範例給大家參考,如何做form的ajax submit,首先是html部分:

<form id="form" name="form">
<input id="user" name="user" type="text" />
<input id="passwd" name="passwd" type="password" />	 
<input id="btn" type="button" value="shit"/>
</form>

javascript部分,以JQuery為範例,我使用FormData物件來將內容轉為multipart的格式送往server:

$( document ).ready(function() {
	$('#btn').click(function(){
		console.log('submit form');
		$("#form").submit();
	});
 
	$("#form").submit(function(e){
		var form = $(this);
		var formData = new FormData(form[0]);
		$.ajax({
			type: "POST",
			url: 'shit.php',
			processData: false,
			contentType: false,
			data: formData, 
			success: function(data)
			{
				console.log(data); // show response from the php script.
			}
	});
		e.preventDefault();
	});
 
 
});

以純javascript而言,使用以上方式就可以避免在firefox上跳出remember login dialog,但是在Apache Wicket 6上就沒這麼樂觀。下圖是我們在使用Wicket Form物件,並將multiple設為true後,發ajax request後的結果:


可以發現它並不是一個ajax request;追根究底到wicket-ajax-jquery.js中的submitMultipartForm,可以發現Wicket是使用iframe來模擬如ajax的request。從Wicket的Pull Request中可以得知,Wicket為了要相容於IE7~IE9,在舊版本的Wicket並沒使用FormData。如果要解決這個問題,有兩個方式:

  • 更新到Wicket8,它在[WICKET-6517]中使用真的Ajax取代了iframe。
  • override submitMultipartForm。

第二個方法大概這樣做:

Wicket.Ajax.Call.prototype.submitMultipartForm = function(aContext){
	var attrs = aContext.attrs;
        // ... do ajax request
};

內容實做,可以參考wicket-ajax-jquery.js內的doAjax,資料從aContext都可以拿到。

如果真的要完全解決這問題,請別使用password。

後記

之前曾寫過類似文章,方法與前面提到的類似,但本篇文章更為完整。

Reference

留言

這個網誌中的熱門文章

解決RobotFramework從3.1.2升級到3.2.2之後,Choose File突然會整個Hand住的問題

考慮到自動測試環境的維護,我們很久以前就使用java去執行robot framework。前陣子開始處理從3.1.2升級到3.2.2的事情,主要先把明確的runtime語法錯誤與deprecate item處理好,這部分內容可以參考: link 。 直到最近才發現,透過SeleniumLibrary執行Choose File去上傳檔案的動作,會導致測試案例timeout。本篇文章主要分享心路歷程與解決方法,我也送了一條issue給robot framework: link 。 我的環境如下: RobotFramework: 3.2.2 Selenium: 3.141.0 SeleniumLibrary: 3.3.1 Remote Selenium Version: selenium-server-standalone-3.141.59 首先並非所有Choose File的動作都會hang住,有些測試案例是可以執行的,但是上傳一個作業系統ISO檔案一定會發生問題。後來我透過wireshark去比對新舊版本的上傳動作,因為我使用 Remote Selenium ,所以Selenium會先把檔案透過REST API發送到Remote Selenium Server上。從下圖我們可以發現,在3.2.2的最後一個TCP封包,比3.1.2大概少了500個bytes。 於是就開始了我trace code之路。包含SeleniumLibrary產生要送給Remote Selenium Server的request內容,還有HTTP Content-Length的計算,我都確認過沒有問題。 最後發現問題是出在socket API的使用上,就是下圖的這支code: 最後發現可能因為開始使用nio的方式送資料,但沒處理到尚未送完的資料內容,而導致發生問題。加一個loop去做計算就可以解決了。 最後我有把解法提供給robot framework官方,在他們出新的版本之前,我是將改完的_socket.py放在我們自己的Lib底下,好讓我們測試可以正常進行。(shutil.py應該也是為了解某個bug而產生的樣子..)

第一次寫MIB就上手

SNMP(Simple Network Management Protocol)是用來管理網路設備的一種Protocol,我對它的認識也是從工作接觸開始。雖說是管理網路設備,但是主機、電源供應器、RAID等也都可以透過它來做管理。如果你做了一個應用程式,當然所有的操作也都可以透過SNMP來完成,不過可能會很痛苦。前陣子遇到一個學弟,它告訴我說:「我可能不會想寫程式。」為什麼? 因為這是他痛苦的根源。 在這篇文章中,不是要告訴你SNMP是什麼,會看這篇文章的大哥們,應該已經對SNMP有些認識了。 是的!主題是MIB(Management information base)! 對於一個3th-party的SNMP oid,有MIB可以幫助你去了解它所提供的資訊是什麼,且可以對它做什麼操作。最近我運氣很好剛好做到關於修改MIB的工作,也讓我順便了解一下它的語法,接下來我要交給大家MIB的基礎認識。 smidump 我並非使用什麼高強的Editor去編寫MIB,我僅透過Nodepad++編輯和smidump編譯而已。smidump是Kay教我使用的一個將MIB module轉成樹狀結構或oid列表的工具,唯一的缺點是不會告訴你哪一行打錯。當然有錢直接買編輯樹狀結構的工具就可以不需要了解語法了! 安裝 在Ubuntu上可先輸入smidump確認是否安裝,如果沒安裝可透過apt-get install libsmi2ldbl安裝。(CentOS可以透過yum install libsmi) root@tonylin:~/multi-boot-server# smidump The program 'smidump' is currently not installed. You can install it by typing: apt-get install libsmi2ldbl 使用 透過下面兩行指令,就可以將mib file產生出對應的tree與oid列表的檔案。也可以透過這個結果確認MIB是不是你想要的。 smidump -f tree example1.mib > xtree.txt smidump -f identifiers example1.mib > xiden.txt 如果有參考其它檔案要加上p的參數: smidum...

Windows DLL - 32-bit dll with 64-bit driver

前言 在64-bit作業系統上所使用的驅動程式,一定是64-bit,然而應用程式卻可能是32或64-bit。當32-bit應用程式傳值給驅動程式時是有可能會發生溢位的。主要原因是32與64-bit指標所佔用記憶體長度的不同。接下來我將透過Reference 1中的程式PhyMem,來告訴大家問題在哪與如何修改。(最後改完的程式碼恕我不提供) PhyMem介紹 這是一個中國人寫的程式。作用與WinIO相同,可以存取windows的io port與physical memory。這個程式包含pmdll、driver與test三個專案,分別產生dll、sys與exe。作者僅提供32-bit的版本,但只要修改編譯設定就可以讓它產生出64-bit的artifact。但如同我前言所說,如果你是32-bit的dll要存取64的sys該怎麼辦? 可以規定User在64-bit的OS用64-bit的應用程式就好了阿! 但是將一個32-bit應用程式改為64-bit的有這麼簡單嗎? 除此之外,中間傳遞的資料型態也會影響到正常功能。 設定driver專案 我開發環境是VC2008與DDK6000,下載Reference1的專案是無法直接編譯的,可以參考我的設定去修改編譯、連結參數。輸出檔可以看個人需求,根據32或64命名,或者是用同一個檔案名稱。 32-bit C/C++ > 一般 > 其它Include目錄($(DDKROOT)為設定於環境變數的DDK安裝目錄): $(DDKROOT)\inc\ddk";"$(DDKROOT)\inc\api";"$(DDKROOT)\inc\crt";"$(DDKROOT)\inc\crt\gl";"$(DDKROOT)\inc\crt\sys" 連結器 > 一般 > 其它程式庫目錄: $(DDKROOT)\lib\wnet\i386。 連結器 > 資訊清單檔: 將產生資訊清單與UAC選擇否,因為這不適用於driver。 連結器 > 進階 > 隨機化的基底位置: 選擇預設。 64-bit Reference1僅提供32-bit設定。64-bit可在建置>組態管理員中,新增x64平台,而設定檔可從win32複製過來修...