Web編碼與交換資訊

在ASP.NET Web和瀏覽器之間編碼並交換資訊。To encode to exchange between browser and ASP.NET web.使用 .NetFramework (C#) 之 System.Uri.EscapeDataString() 與 JavaScript 之 encodeURIComponent() 函式。REC3986規格。

原理

因為 .NetFramework(C#)之System.Uri.EscapeDataString 與 Browser(JavaScript)之window.decodeURIComponent 的編碼解碼規格皆是『RFC 3986』所以可以互通，實作上也支援UTF8中文字元的編解碼。

範例

page.cshtml (C#)

// cshtml 後端編碼並存入cookie
var info = new { foo='什麼都可以什麼都不奇怪。', bar=12345.6789 };
string json = Newtonsoft.Json.JsonConvert.SerializeObject(info, Newtonsoft.Json.Formatting.None);
string encoded = System.Uri.EscapeDataString(json); //『RFC 3986』編碼
var infoCookie = new HttpCookie("cookiename", encoded);
infoCookie.HttpOnly = false; // 非HttpOnly才能在Browser端取得值。
infoCookie.Expires = DateTime.Now.AddSeconds(29);
Response.Cookies.Add(infoCookie);  

page.js (JavaScript)

// html.js 前端取cookie並解碼
const encoded = $.cookie("cookiename")
$.removeCookie("info"); // 取值後馬上清除。
const json = window.decodeURIComponent(encoded); // 『RFC 3986』解碼
const info = JSON.parse(json);

範例二

info => json => rfc3986 => base64 => encrypt (plus)

page.cshtml (C#)

@{
  // cshtml 後端編碼並存入交換區
  string encoded = Convert.ToBase64String(
    ASCIIEncoding.ASCII.GetBytes(
      Uri.EscapeDataString(
        JsonConvert.SerializeObject(info))));
}

<script>
  window['EXCHANGE_ID'] = '@encoded'; 
</script>

page.js (JavaScript)

// html.js 前端取交換資料並解開
const info = JSON.parse(
  window.decodeURIComponent(
    window.atob(window['EXCHANGE_ID'])));
window['EXCHANGE_ID'] = undefined; // 取值後馬上清除。

utf8_to_b64

傳統上有 atob() 與 btoa() 函式可以 ASCII 與 Base64轉換，若是UTF8字元，則需再加工編碼如下：

function utf8_to_b64( str ) {
  return window.btoa(unescape(encodeURIComponent( str )));
}

function b64_to_utf8( str ) {
  return decodeURIComponent(escape(window.atob( str )));
}

// Usage:
utf8_to_b64('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU="
b64_to_utf8('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"

Base64 - MDN Web Docs Glossary: Definitions of Web-related terms | MDN