iT邦幫忙

1

詢問傳輸值的加工方法

目前想要練習撰寫一個簡單的功能,若頁面上的輸入框(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();
    }
}
看更多先前的討論...收起先前的討論...
YoChen iT邦新手 1 級 ‧ 2019-11-11 13:37:54 檢舉
您可能要說明一下您這麼做的理由,不然不太知道您要的是什麼~XDDD
anniecat iT邦新手 3 級 ‧ 2019-11-11 13:55:31 檢舉
Hi YoChen,主要是希望輸入的值(number1),在資料傳遞到後端的過程中,不是以明碼的方式傳遞~
dragonH iT邦超人 7 級 ‧ 2019-11-11 14:05:35 檢舉
基本上沒什麼用

如果是一般 post

除非打開 console

不然看不到

這樣就可以擋去一些正常的非資訊相關一般使用者

但是懂得打開 console

基本上可以將它視為懂一些資訊相關的使用者

那你這所謂的非明碼

在他眼前沒啥差
froce iT邦大師 2 級 ‧ 2019-11-11 15:27:13 檢舉
> 主要是希望輸入的值(number1),在資料傳遞到後端的過程中,不是以明碼的方式傳遞~

你需要的是https...
在前端沒有秘密,console打開要看什麼都看的到,頂多做混淆而已。
https傳輸就是在做你說的事,撈到的封包是加密的。而且你還不用多寫任何程式碼。
newkevin iT邦高手 1 級 ‧ 2019-11-12 00:04:15 檢舉
猜 類似 在第一頁輸入信用卡號
然後在第二頁 確認有無問題
第一頁 到第二頁
前端處理時不會被認出吧
anniecat iT邦新手 3 級 ‧ 2019-11-12 09:36:40 檢舉
newkevin 對的 類似您說的這樣的功能~

2 個回答

1
dragonH
iT邦超人 7 級 ‧ 2019-11-11 12:06:38
最佳解答

Convert.ToBase64String 應該是 C# 的吧

const encrypted = btoa('hello ithelp') // aGVsbG8gaXRoZWxw
const plainText = atob('aGVsbG8gaXRoZWxw') // hello ithelp

這是你要的嗎?

雖然我不太知道有什麼用途就是

看更多先前的回應...收起先前的回應...
anniecat iT邦新手 3 級 ‧ 2019-11-11 13:53:36 檢舉

View上可以使用您說的這段程式碼做轉換

const encrypted = btoa('hello ithelp') // aGVsbG8gaXRoZWxw

然後到Controller,需要可以應用到您說的這段,再將其轉換回來

const plainText = atob('aGVsbG8gaXRoZWxw') // hello ithelp

只是目前實作的部分,View上可以轉換成功,但到了Controller會無法轉換回來,可能是寫法要調整,我有先去了解您提供的這個方法,但我目前還沒嘗試出來,很感謝您提供的方法!

dragonH iT邦超人 7 級 ‧ 2019-11-11 13:57:43 檢舉

anniecat

他轉完就是一般的 base64 阿

你在你的 controller 用 c# 把 base64 轉回來應該就可以了

atob 是 javascript

雖然我對 c# 不熟

不過 c# 應該無法直接 run js 的 code 吧 /images/emoticon/emoticon26.gif


c# 轉明文

ideone

anniecat iT邦新手 3 級 ‧ 2019-11-11 14:51:16 檢舉

dragonH
謝謝您,實作以後成功了,我原本嘗試的代碼如下,看起來我使用錯誤的解碼方式(ASCII)了...

string base64Decoded;
byte[] data = System.Convert.FromBase64String(number);
base64Decoded = System.Text.ASCIIEncoding.ASCII.GetString(data);
base64Decoded=number;
dragonH iT邦超人 7 級 ‧ 2019-11-11 14:54:12 檢舉

/images/emoticon/emoticon42.gif

YoChen iT邦新手 1 級 ‧ 2019-11-11 14:56:41 檢舉

後端(Server)解碼方法如同dragonH大提供的那樣

string plainText = System.Text.Encoding.GetEncoding("utf-8").GetString(Convert.FromBase64String(hashNumber));

不過問題也如dragonH大及小魚大所說的,無論您在前端(Client)做多少的加工,都沒辦法防止有心人從中獲取資訊~

簡單來說,
對於不了解相關技術的人,即便知道別人輸入什麼,也不知道能用來幹嘛,更別提要他攔截封包、偷看資訊了~
但對於了解相關技術的人,只要您的加密方式是在前端(Client)進行,就一定有辦法解得出來~

所以這方面您可能要再思考一下~

anniecat iT邦新手 3 級 ‧ 2019-11-11 15:09:54 檢舉

謝謝YoChen,我實作完這一塊也在思考這個問題,並且測試過,確實看的到我的加工方式,所以這個做法其實並不太對,而自己目前產生困惑的點是,我在前端輸入東西(View),傳到後端(Controller),所以是要再前端Submit之前還是之後寫幫值加工的部份呢?

如果是Submit之前,目前找到的方法就是寫在View上(目前的實作)
如果是Submit之後,我應該在哪裡寫呢?

可能我對這塊瞭解的不透徹,所以產生這個困惑,也不太知道該怎麼去實作這一塊,不知道我可以往哪個方向去找,會比較好呢?

YoChen iT邦新手 1 級 ‧ 2019-11-11 16:30:50 檢舉

anniecat,您可能需要了解一下前端(Client)後端(Server)是怎麼透過HTTP運作的

另外,MVC架構並不是用來區分前、後端的,它處理的過程都屬於後端(Server)的範疇

以下簡單的提供一個範例給您

前端(Client)發出請求(Request)
它會通過網路傳輸協定(HTTP)將請求傳給後端(Server)
後端(Server)接收到資訊以後,開始準備回應(Response)
以MVC架構來說,
它就會找到對應的ControllerAction
接著處理用到的Model
然後將Model組進View裡,
最後輸出成html、css、javascript等等的文件,
再透過網路傳輸協定(HTTP)將回應傳給前端(Client)

因此,
無論是Submit之前(整理Form上的資料、呼叫方法、加密等等...)
亦或是Submit之後(打包Request資訊、發出Request等等...)
這些動作都是在前端(Client)做的,因此都沒辦法解決您想解決的問題~

其實您的問題不應該關注在怎麼加工參數,而應該把重點放在為什麼要加工參數,這也是我跟其他大大們一直想向您確認的,因為這個問題的答案才能幫助您解決根本的問題

0
小魚
iT邦大師 1 級 ‧ 2019-11-11 12:12:34

如果你在前端做了加密的動作,
你以為有用嗎?
你的加密方式全都被人看光了.

我推薦你用Ajax傳去後端處理再傳回來.

anniecat iT邦新手 3 級 ‧ 2019-11-11 13:50:26 檢舉

小魚,不好意思想詢問一下,若我在頁面上輸入了一個值,這個值會傳到後端(不知道可不可以視為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) {
        //...
        }
    })
});
小魚 iT邦大師 1 級 ‧ 2019-11-11 14:27:23 檢舉

在前端做加工別人就知道你怎麼加密的,
別人也可以照樣做出一樣的出來.

我要發表回答

立即登入回答