目前想要練習撰寫一個簡單的功能,若頁面上的輸入框(number1
)被輸入值時,觸發方法myFunc
,希望可以將將輸入框輸入框(number1
)的值做加工,讓(number2
)的值變成加工後的值,然後再將輸入框(number2
)的值傳到controller,並讓這個值可以變回原本加工前的值。
簡單來說,就是希望使用者於前端輸入資訊,在按下送出後的這段,希望不是以明碼的方式去傳遞資料,因為要防範資料被竊取或是被看到的狀況。
最近上網看了很多資料,這種方式好像不是hash(雜湊),因為它將值加工了以後,無法再找回加工前的值,那若以我上述的需求是否是要使用加解密的方式進行呢?因為感覺使用加解密的方式看起來好像會過於複雜?還是說我誤解了這部分,或是有其他方式可以使用呢?
[View]
<script>
function myFunc(x) {
var str = document.getElementById(x).value;
//目前是直接將值傳到controller,希望在這邊可以做加工
//有嘗試Convert.ToBase64String但沒有成功
//var hashNo = Convert.ToBase64String(str);
document.getElementById("number2").value = str;
}
</script>
@using (Html.BeginForm("Index","Report",FormMethod.Post,new {})){
<div class="form-horizontal">
<div class="form-group">
<div class="col-md-10">
<p>Report Id : </p>
<input type="text" id="number1" onchange="myFunc(this.id)" required />
<input type="text" id="number2" name="hashNumber" />
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="search" class="btn btn-default" />
</div>
</div>
</div>
}
[Controller]
public ActionResult Index(string hashNumber) {
//這邊應該要將接到的值變回加工前的值
string number = hashNumber;
if (null!=number)
{
return PartialView("_Report");
}
else
{
return View();
}
}
Convert.ToBase64String
應該是 C# 的吧
const encrypted = btoa('hello ithelp') // aGVsbG8gaXRoZWxw
const plainText = atob('aGVsbG8gaXRoZWxw') // hello ithelp
這是你要的嗎?
雖然我不太知道有什麼用途就是
View上可以使用您說的這段程式碼做轉換
const encrypted = btoa('hello ithelp') // aGVsbG8gaXRoZWxw
然後到Controller,需要可以應用到您說的這段,再將其轉換回來
const plainText = atob('aGVsbG8gaXRoZWxw') // hello ithelp
只是目前實作的部分,View上可以轉換成功,但到了Controller會無法轉換回來,可能是寫法要調整,我有先去了解您提供的這個方法,但我目前還沒嘗試出來,很感謝您提供的方法!
dragonH
謝謝您,實作以後成功了,我原本嘗試的代碼如下,看起來我使用錯誤的解碼方式(ASCII
)了...
string base64Decoded;
byte[] data = System.Convert.FromBase64String(number);
base64Decoded = System.Text.ASCIIEncoding.ASCII.GetString(data);
base64Decoded=number;
後端(Server)
解碼方法如同dragonH大提供的那樣
string plainText = System.Text.Encoding.GetEncoding("utf-8").GetString(Convert.FromBase64String(hashNumber));
不過問題也如dragonH大及小魚大所說的,無論您在前端(Client)
做多少的加工,都沒辦法防止有心人從中獲取資訊~
簡單來說,
對於不了解相關技術的人,即便知道別人輸入什麼,也不知道能用來幹嘛,更別提要他攔截封包、偷看資訊了~
但對於了解相關技術的人,只要您的加密方式是在前端(Client)
進行,就一定有辦法解得出來~
所以這方面您可能要再思考一下~
謝謝YoChen,我實作完這一塊也在思考這個問題,並且測試過,確實看的到我的加工方式,所以這個做法其實並不太對,而自己目前產生困惑的點是,我在前端輸入東西(View),傳到後端(Controller),所以是要再前端Submit之前還是之後寫幫值加工的部份呢?
如果是Submit之前,目前找到的方法就是寫在View上(目前的實作)
如果是Submit之後,我應該在哪裡寫呢?
可能我對這塊瞭解的不透徹,所以產生這個困惑,也不太知道該怎麼去實作這一塊,不知道我可以往哪個方向去找,會比較好呢?
anniecat,您可能需要了解一下前端(Client)
及後端(Server)
是怎麼透過HTTP
運作的
另外,MVC架構並不是用來區分前、後端
的,它處理的過程都屬於後端(Server)
的範疇
以下簡單的提供一個範例給您
當
前端(Client)
發出請求(Request)
,
它會通過網路傳輸協定(HTTP)
將請求傳給後端(Server)
,後端(Server)
接收到資訊以後,開始準備回應(Response)
,
以MVC架構來說,
它就會找到對應的Controller
及Action
,
接著處理用到的Model
,
然後將Model
組進View
裡,
最後輸出成html、css、javascript等等的文件,
再透過網路傳輸協定(HTTP)
將回應傳給前端(Client)
因此,
無論是Submit之前
(整理Form上的資料、呼叫方法、加密等等...)
亦或是Submit之後
(打包Request資訊、發出Request等等...)
這些動作都是在前端(Client)
做的,因此都沒辦法解決您想解決的問題~
其實您的問題不應該關注在怎麼加工參數
,而應該把重點放在為什麼要加工參數
,這也是我跟其他大大們一直想向您確認的,因為這個問題的答案才能幫助您解決根本的問題
如果你在前端做了加密的動作,
你以為有用嗎?
你的加密方式全都被人看光了.
我推薦你用Ajax傳去後端處理再傳回來.
小魚,不好意思想詢問一下,若我在頁面上輸入了一個值,這個值會傳到後端(不知道可不可以視為controller)做一些事情,但帶到後端之前,希望這個值在傳輸過程中已經是經過加工的值,我一直想不出來要寫在哪裡,上網看了一些方法,才會以目前的寫法去做,不知道可以再問詳細一點,若是以您說的用Ajax傳去後端處理,這個詳細的作法可能會是這樣嗎?
一樣寫在目前的View上,然後架構可能如下:
<script>
$("#number1").change(function () {
var value = $("#number1").val();
$.ajax({
type: "Post",
url: "../Report?id=" + value,
data: '{}',
contentType: "...",
dataType: "json",
async: false,
success: function (data) {
//...
}
})
});
在前端做加工別人就知道你怎麼加密的,
別人也可以照樣做出一樣的出來.