目前想要練習撰寫一個簡單的功能，若頁面上的輸入框(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();
}
}
已邀請的邦友 {{ invite_list.length }}/5
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) {
//...
}
})
});
在前端做加工別人就知道你怎麼加密的,
別人也可以照樣做出一樣的出來.
iThome鐵人賽
看影片追技術