IIS 如果要使用 reverse proxy server 服務，其實網路上已經有很多文章可以參考
這篇文章只是記錄一下安裝上要注意的事

過去安裝 IIS 套件 可以透過 Web Platform Installer 搜尋下載
但現在 IIS 的 Web Platform Installer 已經不讓人搜尋下載可安裝的套件
所以要直接去微軟網站找相關套件 可以用 IIS ARR 搜尋
https://www.iis.net/downloads/microsoft/application-request-routing
下載 requestRouter_amd64.msi 安裝這個 (3.0版 2021 年以後就沒有更新了)
安裝前，IIS也要預先安裝 URLRewrite 2 套件

安裝很簡單，msi 安裝後，IIS重啟就可以看到
IIS 的主機設定，可以看到 "Application Reuest Routing Cache"  --> 點進後右邊有 Server Proxy Settings
proxy 的設定有一些地方要注意一下，避免未來採到雷

首先 當然先開啟 Enable proxy，下面針對一些要注意的屬性說明一下

1. Time-out : 預設120秒，如果你後端的站台有一些操作可能超過兩分鐘(例如處理報表)，這個就調長一點
2. Reverse rewrite host in response header: 這個勾勾預設是開的，他的好意是同站台redirect(302) 到其他網頁，可以覆蓋
    host 讓 client端能跑到正常的網址。但如果你是 redirect 到其他站台，建議把它關掉，不然後端網站如果下
    redirect (302) 到別的站台，他會主動把 redirect網址 host 改為本站 (被雷過，所以要特別記下來)
3. Include TCP port from client IP:  這是一個 X-Forwarded-For 設定，預設是打開，這樣後端主機抓 client 來源 IP就會類似
    "112.121.100.100:443" ，但後端網站在抓 client端IP通常不會管 port number，因此就會造成比對 IP 發生錯誤
    所以建議還是把它關閉
4. Enable disk cache: 預設是勾勾打開，如果後端是靜態網站，例如圖片server，這個打開沒有問題，但如果後端網站是動態網站
    那還是關掉

 

Restful 的 API 範例，比較特別的是取得單一筆資料時，不是用一般常見的 {id} 而是用 get?id=xxx 的方式，以避免 XXS 的功擊。(不要把原網頁中的參數拼入 API 網址，要改用 Query String 的方式傳給 API)

using Ds;

using Ds.Gv;

using iText.Kernel.Geom;

using Microsoft.AspNetCore.Mvc;

using Microsoft.EntityFrameworkCore;

using NPOI.SS.Formula.Functions;

using NPOI.SS.Util;

using Su;

using System.Linq.Expressions;



namespace CallCampaign.Api

{

    /// <summary>

    /// 行銷活動

    /// </summary>

    [Route("api/call-campaign")]

    [ApiController]

    [SetAuthorizationFilter(Sh.AuthCode.不設限)]

    public class ReserveCampaignController : Controller

    {

        /// <summary>

        /// 取得行銷活動列表

        /// </summary>

        /// <param name="reserveCampaignName"></param>

        /// <param name="currentPage"></param>

        /// <param name="pageSize"></param>

        /// <param name="orderByName"></param>

        /// <param name="sort"></param>

        /// <returns></returns>

        /// <exception cref="Exception"></exception>

        [HttpGet("")]

        public async Task<object> ListAsync([FromQuery] string reserveCampaignName = "", [FromQuery] int? currentPage = 1, [FromQuery] int? pageSize = 20, [FromQuery] string orderByName = "OrderNo", [FromQuery] string sort = "asc")

        {

            if (pageSize > 500)

            {

                pageSize = 500;

            }



            if (!(sort == "asc" || sort == "desc"))

            {

                throw new CustomException(System.Net.HttpStatusCode.BadRequest, "sort只能是asc或desc");

            }



            var temp = new V_ReserveCampaign().GetType().GetProperty(orderByName);

            if (temp == null)

            {

                throw new CustomException(System.Net.HttpStatusCode.BadRequest, "不存在欄位");

            }



            Expression<Func<V_ReserveCampaign, bool>> q = p => p.Is_Deleted == "N"

                    && (string.IsNullOrEmpty(reserveCampaignName) || (p.ReserveCampaignName != null && p.ReserveCampaignName.Contains(reserveCampaignName)))

                    ;



            if (orderByName.ToLower().Trim() != "id")

            {

                orderByName += " " + sort + ", id desc";

            }

            else

            {

                orderByName += " " + sort;

            }



            var ct = NewContext.GvContext;

            var list = await ct.GetPageListAsync(q, columns: "Id, ReserveCampaignName, OrderNo, StartAt, EndAt, ModifierName, ModifyDate, CreatorName, CreateDate", page: currentPage ?? 1, pageSize: pageSize ?? 20, orderByName);

            //var list = await ct.GetPageListAsync(q, page: currentPage ?? 1, pageSize: pageSize ?? 20, orderByName + " " + sort);

            return list;

        }



        /// <summary>

        /// 取得行銷活動

        /// </summary>

        /// <param name="Id"></param>

        /// <returns></returns>

        /// <exception cref="Exception"></exception>

        [HttpGet("get")]

        public async Task<dynamic> GetAsync([FromQuery] int Id)

        {

            var res = await Ds.NewContext.GvContext.ReserveCampaigns.Where(r => r.Id == Id)

                .FirstOrDefaultAsync();



            if (res == null)

            {

                throw new CustomException(System.Net.HttpStatusCode.BadRequest, "查無資料 " + Id.ToString());

            }

            return res;

        }

                

        /// <summary>

        /// 建立行銷活動

        /// </summary>

        /// <param name="dto"></param>

        /// <returns></returns>

        /// <exception cref="CustomException"></exception>

        [HttpPost("")]

        public async Task<object> CreateAsync(Dtos.CreateReserveCampaign dto)

        {

            var ct = NewContext.GvContext;

            var res = await Models.ReserveCampaignHelper.CreateReserveCampaignAsync(ct, dto);

            return res;

        }



        /// <summary>

        /// 編輯行銷活動

        /// </summary>

        /// <param name="dto"></param>

        /// <returns></returns>

        /// <exception cref="CustomException"></exception>

        [HttpPatch("")]

        public async Task<object> UpdateAsync(Dtos.UpdateReserveCampaign dto)

        {

            var ct = NewContext.GvContext;

            var res = await Models.ReserveCampaignHelper.UpdateReserveCampaignAsync(ct, dto);

            return res;

        }



        /// <summary>

        /// 刪除行銷活動

        /// </summary>

        /// <param name="id"></param>

        /// <returns></returns>

        /// <exception cref="CustomException"></exception>

        [HttpDelete("")]

        public async Task<object> DeleteAsync([FromQuery] int id)

        {

            var res = await Ds.NewContext.GvContext.MarkDeleteAsync<Ds.Gv.ReserveCampaign>(id, Sh.ModifyInfo);

            return res;

        }

    }

}

再增加一個同步範例(只例出 action)

        /// <summary>

        /// 取得列表

        /// </summary>

        /// <param name="name"></param>

        /// <param name="currentPage"></param>

        /// <param name="pageSize"></param>

        /// <param name="orderByName"></param>

        /// <param name="sort"></param>

        /// <returns></returns>

        [HttpGet("")]

        public object List([FromQuery] string name = "", [FromQuery] int? currentPage = 1, [FromQuery] int? pageSize = 20, [FromQuery] string orderByName = "OrderNo", [FromQuery] string sort = "asc")

        {

            return "";

        }



        /// <summary>

        /// 取得明細資料

        /// </summary>

        /// <param name="Id"></param>

        /// <returns></returns>

        /// <exception cref="Exception"></exception>

        [HttpGet("get")]

        public object Get([FromQuery] int id)

        {

            return "";

        }



        /// <summary>

        /// 建立

        /// </summary>

        /// <param name="dto"></param>

        /// <returns></returns>

        /// <exception cref="CustomException"></exception>

        [HttpPost("")]

        public object Create(Dtos.PhysicalCheckUpType dto)

        {

            return "";

        }



        /// <summary>

        /// 編輯

        /// </summary>

        /// <param name="dto"></param>

        /// <returns></returns>

        /// <exception cref="CustomException"></exception>

        [HttpPatch("")]

        public object Update(Dtos.PhysicalCheckUpType dto)

        {

            return "";

        }



        /// <summary>

        /// 刪除

        /// </summary>

        /// <param name="id"></param>

        /// <returns></returns>

        /// <exception cref="CustomException"></exception>

        [HttpDelete("")]

        public object Delete([FromQuery] int id)

        {

            return 1;

        }

試了這兩個 Sample:

https://learn.microsoft.com/en-us/training/modules/store-local-data/4-exercise-store-data-locally-with-sqlite

和 

https://blazorhelpwebsite.com/ViewBlogPost/61

結果專案在 Windows 環境下都可以正常執行，但切換到 Android Emulator 就無法存檔。

在查了很多資料後，發現需要裝額外的 Package，需安裝的 Package 如下:

    <ItemGroup>

     <PackageReference Include="sqlite-net-pcl" Version="1.8.116" />

     <PackageReference Include="SQLiteNetExtensions.Async" Version="2.1.0" />

     <PackageReference Include="SQLitePCLRaw.bundle_green" Version="2.1.4" />

     <PackageReference Include="SQLitePCLRaw.core" Version="2.1.4" />

     <PackageReference Include="SQLitePCLRaw.lib.e_sqlite3" Version="2.1.4" />

     <PackageReference Include="SQLitePCLRaw.provider.dynamic_cdecl" Version="2.1.4" />

     <PackageReference Include="System.Data.DataSetExtensions" Version="4.5.0" />

    </ItemGroup>

其它的發現為:
1. 雙點專案，就可以開啟 csproj 檔案。下方的 ItemGroup 就是已安裝的 package

2. 可以把 chrome 連接到 Android Emulator 的方法，在網址列輸入以下指令:
chrome://inspect/#devices

若網站是使用 SVN update 方式更新網站，為了防止被外部讀取到 /.svn/  目錄內容
要在 web.config 片段加上以下內容

<configuration>

<system.webServer>

     <security>

         <requestFiltering>

            <hiddenSegments>

             <add segment=".svn" />

            </hiddenSegments>

         </requestFiltering>

     </security>

</system.webServer>

</configuration>

git 也是一樣的方式
可以參考此網址
https://www.petefreitag.com/item/823.cfm
 

這裡是我測試 Gmail API 和 Google API 憑証的一些記錄。

如果你的目的是要使用 Gmail Api 取代舊的 Gmail SMTP 來發送通知信，建議你先跳到最下方看一下結論。

如果你是想要看一下 Gmail API 和 Google API 憑証的使用方法，可以看一下這篇文章。

1. 在 google cloud platform 建立新的專案.
https://console.cloud.google.com/

 
 



啟用 Gmail API







 



 


 
 



因為我們要透過 OAuth  取得使用者授權，所以要設定使用 OAuth 的同意畫面。

 
指定授權的範圍
 

 
因為剛建立的專案，不會被公開，所以要指定測試使用者
 
如果要給任意使用者，必需經過發布的流程，但準備工作有點麻煩，所以這次就不發布了。
 




建立 OAuth 2.0 用戶端 ID 憑証
 
這裡除了名稱外，還有一個設定重導 Uri 的項目。現在不填寫，但稍後要回來補這個資料。
 
 
 下載 json 之後，命名為 client_secret.json 保留後續使用。


再來就要建立專案了. 用 VS2022 建立一個新專案
  


 




記錄網址, 本測試專案是 https://localhost:44340/ ，請依實際網址為準。



回到 OAuth 2.0 用戶端 ID 的設定頁. 在已授權的重新導向 URI 中填入 https://localhost:44340/Home/AuthReturn (填入的網址依實際專案的狀況，可能會有變化)
 
 

在 VS2022 中，使用 Nuget 安裝套件: (有漏的再麻煩和我說)
Google.Apis.Gmail.v1
Google.Apis.Auth
MimeKit (發送 gmail 時使用)

建立認証用的網址:
建立一個 Action, 用來取得認証用的網址:

        /// <summary>

        /// 取得授權的項目

        /// </summary>

        static string[] Scopes = { GmailService.Scope.GmailSend };



        // 和登入 google 的帳號無關

        // 任意值，若未來有使用者認証，可使用使用者編號或登入帳號。

        string Username = "ABC";



        /// <summary>

        /// 存放 client_secret 和 credential 的地方

        /// </summary>

        string SecretPath = @"D:\project\GmailTest\Data\Secrets";



        /// <summary>

        /// 認証完成後回傳的網址, 必需和 OAuth 2.0 Client Id 中填寫的 "已授權的重新導向 URI" 相同。

        /// </summary>

        string RedirectUri = $"https://localhost:44340/Home/AuthReturn";



        /// <summary>

        /// 取得認証用的網址

        /// </summary>

        /// <returns></returns>

        public async Task<string> GetAuthUrl()

        {

            using (var stream = new FileStream(Path.Combine(SecretPath, "client_secret.json"), FileMode.Open, FileAccess.Read))

            {

                FileDataStore dataStore = null;

                var credentialRoot = Path.Combine(SecretPath, "Credentials");

                if (!Directory.Exists(credentialRoot))

                {

                    Directory.CreateDirectory(credentialRoot);

                }



                //存放 credential 的地方，每個 username 會建立一個目錄。

                string filePath = Path.Combine(credentialRoot, Username);

                dataStore = new FileDataStore(filePath);



                IAuthorizationCodeFlow flow = new GoogleAuthorizationCodeFlow(new GoogleAuthorizationCodeFlow.Initializer

                {

                    ClientSecrets = GoogleClientSecrets.Load(stream).Secrets,

                    Scopes = Scopes,

                    DataStore = dataStore

                });



                var authResult = await new AuthorizationCodeWebApp(flow, RedirectUri, Username)

                .AuthorizeAsync(Username, CancellationToken.None);



                return authResult.RedirectUri;

            }

        }

執行結果:
 
用 chrome 開啟產生的網址: 


選取任一帳號，如果出現以下錯誤，請回到 "OAuth 同意畫面" 去新增測試使用者


 
因為應用程式尚未發布，所以會看到警告，勇敢的繼續下去


這裡會要求授權使用你的名義發送信件。(這是在程式中取得授權的項目 Scopes 中所指定的)


再繼續之後，會被重導至我們在 redirectUri  指定的網址。因為我們尚未完成，所以會看到錯誤，順便也可以看一下，會帶回哪一些參數。有 state, code, scope，共三個。


順便看一下，google 的套件會在 Credentials 的目錄下幫使用者建立一個目錄，在完成驗証前，會先放一個 System.String-oauth_XXX 的檔案，裡面的值和回傳的 state 是一樣的，這個應該是用來驗証回傳資料的。



接下來我們要新增 Action "AuthReturn" 如下:

        public async Task<string> AuthReturn(AuthorizationCodeResponseUrl authorizationCode)

        {

            string[] scopes = new[] { GmailService.Scope.GmailSend };



            using (var stream = new FileStream(Path.Combine(SecretPath, "client_secret.json"), FileMode.Open, FileAccess.Read))

            {

                //確認 credential 的目錄已建立.

                var credentialRoot = Path.Combine(SecretPath, "Credentials");

                if (!Directory.Exists(credentialRoot))

                {

                    Directory.CreateDirectory(credentialRoot);

                }



                //暫存憑証用目錄

                string tempPath = Path.Combine(credentialRoot, authorizationCode.State);            



                IAuthorizationCodeFlow flow = new GoogleAuthorizationCodeFlow(

                new GoogleAuthorizationCodeFlow.Initializer

                {

                    ClientSecrets = GoogleClientSecrets.Load(stream).Secrets,

                    Scopes = scopes,

                    DataStore = new FileDataStore(tempPath)

                });



                //這個動作應該是要把 code 換成 token

                await flow.ExchangeCodeForTokenAsync(Username, authorizationCode.Code, RedirectUri, CancellationToken.None).ConfigureAwait(false);



                if (!string.IsNullOrWhiteSpace(authorizationCode.State))

                {                

                    string newPath = Path.Combine(credentialRoot, Username);

                    if (tempPath.ToLower() != newPath.ToLower())

                    {

                        if (Directory.Exists(newPath))

                            Directory.Delete(newPath, true);



                        Directory.Move(tempPath, newPath);

                    }

                }



                return "OK";

            }

        }

再跑一次上面的流程，最後回到 AuthReturn

在 D:\project\GmailTest\Data\Secrets\Credentials\ABC 裡面會產生一個檔案: 這個就是我們的 token 了。


看一下裡面的內容, 有 access_token, refresh_token, scope 等等, 用途應該很好猜了.. 不知道各項目的目途也沒有關係。只要有這個 token 就可以了。


refresh_token 的效期請參考以下文件:
https://developers.google.com/identity/protocols/oauth2 。也可以參考下圖, 若是要用 gmail api 來發送通知信(例如連絡我們)，紅色的地方是比較令人困擾的，例如 6 個月以上，沒有人留言，原來留下的 refresh_token 就失效了。使用者必需重新建立一個 refresh_token 。

 
最後來使用 gmail api 發送通知信, 直接看程式碼如下: 在這個過程中遇到最大的問題除了憑証問題之外，另一個問題是編碼。直到最後找到可以用 MimeKit 把 System.Net.Mail.MailMessage 編碼成 Gmail API 的格式才解決。程式碼如下:

        public async Task<bool> SendTestMail()

        {

            var service = await GetGmailService();



            GmailMessage message = new GmailMessage();

            message.Subject = "標題";

            message.Body = $"<h1>內容</h1>";

            message.FromAddress = "bikehsu@gmail.com";

            message.IsHtml = true;

            message.ToRecipients = "bikehsu@gmail.com";

            message.Attachments = new List<Attachment>();



            string filePath = @"C:\Users\bike\Pictures\Vegetable_pumpkin.jpg";    //要附加的檔案

            Attachment attachment1 = new Attachment(filePath);

            message.Attachments.Add(attachment1);



            SendEmail(message, service);

            Console.WriteLine("OK");



            return true;

        }



        async Task<GmailService> GetGmailService()

        {

            UserCredential credential = null;



            var credentialRoot = Path.Combine(SecretPath, "Credentials");

            if (!Directory.Exists(credentialRoot))

            {

                Directory.CreateDirectory(credentialRoot);

            }



            string filePath = Path.Combine(credentialRoot, Username);



            using (var stream = new FileStream(Path.Combine(SecretPath, "client_secret.json"), FileMode.Open, FileAccess.Read))

            {

                credential = await GoogleWebAuthorizationBroker.AuthorizeAsync(

                GoogleClientSecrets.Load(stream).Secrets,

                Scopes,

                Username,

                CancellationToken.None,

                new FileDataStore(filePath));

            }



            var service = new GmailService(new BaseClientService.Initializer()

            {

                HttpClientInitializer = credential,

                ApplicationName = "Send Mail",

            });



            return service;

        }





        public class GmailMessage

        {

            public string FromAddress { get; set; }

            public string ToRecipients { get; set; }



            public string Subject { get; set; }

            public string Body { get; set; }

            public bool IsHtml { get; set; }



            public List<System.Net.Mail.Attachment> Attachments { get; set; }

        }





        public static void SendEmail(GmailMessage email, GmailService service)

        {

            var mailMessage = new System.Net.Mail.MailMessage();

            mailMessage.From = new System.Net.Mail.MailAddress(email.FromAddress);

            mailMessage.To.Add(email.ToRecipients);

            mailMessage.ReplyToList.Add(email.FromAddress);

            mailMessage.Subject = email.Subject;

            mailMessage.Body = email.Body;

            mailMessage.IsBodyHtml = email.IsHtml;



            if (email.Attachments != null)

            {

                foreach (System.Net.Mail.Attachment attachment in email.Attachments)

                {

                    mailMessage.Attachments.Add(attachment);

                }

            }



            var mimeMessage = MimeKit.MimeMessage.CreateFromMailMessage(mailMessage);



            var gmailMessage = new Google.Apis.Gmail.v1.Data.Message

            {

                Raw = Encode(mimeMessage)

            };



            Google.Apis.Gmail.v1.UsersResource.MessagesResource.SendRequest request = service.Users.Messages.Send(gmailMessage, "me");



            request.Execute();

        }



        public static string Encode(MimeMessage mimeMessage)

        {

            using (MemoryStream ms = new MemoryStream())

            {

                mimeMessage.WriteTo(ms);

                return Convert.ToBase64String(ms.GetBuffer())

                    .TrimEnd('=')

                    .Replace('+', '-')

                    .Replace('/', '_');

            }

        }

收到的信件:



結論:
使用 Gmail API 最大的原因是要增加安全性，和舊的 smtp 不同的地方是，使用 gmail api 之後，客戶不需要提供 gmail 的帳號和密碼就可以讓系統使用 gmail 發送信件，不過由於 refresh_token 的效期問題，可能會造成無法發送通知信而沒有任何人發現的情況，整個實用性會變的很低。

另一個還沒有測試的部份是應用程的啟用。這個審核不知道會不很麻煩，不過可以而知的時，整個流程會花更多的時間。

取代的做法: 可能要改用 Amazon 的 SES 來寄信，而且為了避免每個小網站都要跑 SES 的建立流程，準備來寫一個 API 給各網站使用，可以發送簡單的通知信。

以上的程式碼可以在這裡下載: https://github.com/bikehsu/GmailTest

環境說明:

AD Server: dc1 (192.168.101.109)
PC: pc110 (192.168.101.110)
PC: pc111 (192.168.101.111)

第一步，把 PC 加入 AD, 這個算是基本操作，網路上說明很多, 就不再截圖了。不過在這裡還是遇到了第一個問題，解決過程請參考另一份文件: https://blog.uwinfo.com.tw/Article.aspx?Id=486

第二步，在 Visual Studio 的測試環境中測試:
一開始是使用 .Net 6.0 來實作，沒想到找到的文件都是 .Net Core 3.1 的，所以先用 .Net Core 3.1 實做了一次，後來改用 .Net 6.0 實作才成功。使用 .Net 6.0 實作的過程如下:

1. 建立一個 MVC 的標準專案: 
 
為了避免憑証問題，所以拿掉了 HTTPS 的設定


2. 改寫 launchSettings.json:
iisSettings 中的 windowsAuthentication 改為 True, anonymousAuthentication 改為 false。如下圖:
 
3. 修改 Program.cs, 加入以下四行指令:
builder.Services.AddAuthentication(IISDefaults.AuthenticationScheme);
builder.Services.AddAuthorization();
app.UseAuthentication();
app.UseAuthorization();
(注意: UseAuthentication 要加在 UseAuthentication 之後, VS 2022 應該會提示要新增 using Microsoft.AspNetCore.Server.IISIntegration;)
 
4. 在 HomeController 增加一個 Action, 以讀取驗証資料:

        [Route("GetAuthenticatedUser")]
        [HttpGet("[action]")]
        public IdentityUser GetUser()
        {
            return new IdentityUser()
            {
                Username = User.Identity?.Name,
                IsAuthenticated = User.Identity != null ? User.Identity.IsAuthenticated : false,
                AuthenticationType = User.Identity?.AuthenticationType
            };
        }

        public class IdentityUser
        {
            public string Username { get; set; }
            public bool IsAuthenticated { get; set; }
            public string AuthenticationType { get; set; }
        }
 
5. 啟動時記得要改用 IIS Express (感覺早上花了兩三個小時在為了這個問題打轉):


6. 執行結果:

第三步，在 IIS 中安裝網站：
1. 在安裝 IIS 時，記得要勾選 windows 驗證


2. 安裝 .Net 6.0 的 Hosting Bundle
https://dotnet.microsoft.com/en-us/download/dotnet/6.0
 
3. 新增網站:
主機名稱留空白 (AD 驗証在網域內好像不會使用指定的主機名稱，這個有待後續再做確認)


如果沒有刪除預設網站，會遇到警告，直接確認即可.


要把 Default Web Site 關閉，再啟動測試站
 
要啟動 windows 驗証: 
在 web.config 中增加 

      <security>

        <authentication>

          <anonymousAuthentication enabled="false" />

          <windowsAuthentication enabled="true" />

        </authentication>

      </security>

修改 applicationHost.config:

檔案位置: %windir%\system32\inetsrv\config\applicationHost.config
這兩地方的 Deny 改為 Allow

<section name="anonymousAuthentication" overrideModeDefault="Deny" />

<section name="windowsAuthentication" overrideModeDefault="Deny" />

 
參考文件: https://docs.microsoft.com/zh-tw/iis/get-started/planning-for-security/how-to-use-locking-in-iis-configuration

3. 可以取得登入資訊如下:

4. 從 Domain 中另一台主機來存取，不用登入，自動取得目前登入者的資訊。
 
5. 從非網域主機連線: 會要求認証
 

目前遇到問題: 在網域中的電腦只能用主機名稱登入，非網域的電腦，才能夠使用網址登入。

測試專案下載: https://github.com/bikehsu/AD60
 

在後端部分，因為有uw元件，在處理url時已經很好處理了
但是在JavaScript因為我們沒有固定js在使用，
因此提供一套簡易使用網址處理工具
thisPage.ParameterByName(key) //取得網址上特定參數
thisPage.OriUrl(key) //中間一段提供修改變數的功能

    <script>

        var thisPage = {

            Init: function () {

                thisPage.InitPageInput();



                $("body")

                    ;

                thisPage.ChangeEvent();

            },

            ParameterByName: function (targetKey) {

                var res = null;

                const urlSearchParams = new URLSearchParams(window.location.search);

                const params = Object.fromEntries(urlSearchParams.entries());

                for (const [key, value] of Object.entries(params)) {

                    if (targetKey.trim().toLocaleLowerCase() === key) {

                        res = value;

                    }

                }

                return res;

            },

            OriUrl: function () {

                var arrayUrl = [];

                arrayUrl.push(window.location.protocol);//https:

                arrayUrl.push("//");

                arrayUrl.push(window.location.hostname);//blog.uwinfo.com.tw

                if (window.location.port.length > 0) {

                    //大多情況，不用特別指定port

                    arrayUrl.push(":");

                    arrayUrl.push(window.location.port);//80

                }

                arrayUrl.push(window.location.pathname);//post/Edit.aspx

                //換一套寫法

                //arrayUrl.push(window.location.search);//?Id=321

                const urlSearchParams = new URLSearchParams(window.location.search);

                const params = Object.fromEntries(urlSearchParams.entries());

                var ayyarQueryString = [];

                //這邊可以加工增加額外的key值

                for (const [key, value] of Object.entries(params)) {

                    if (value.trim().length > 0) {

                        //這邊要注意中文需要encode

                        ayyarQueryString.push(key + "=" + encodeURIComponent(value));

                    }

                }

                if (ayyarQueryString.length > 0) {

                    arrayUrl.push("?");

                    arrayUrl.push(ayyarQueryString.join('&'));

                }

                return arrayUrl.length > 0 ? arrayUrl.join('') : '';

            },

            InitPageInput: function () {

                const urlSearchParams = new URLSearchParams(window.location.search);

                const params = Object.fromEntries(urlSearchParams.entries());

                for (const [key, value] of Object.entries(params)) {

                    $('input[name=' + key + ']').val(value);

                    //這邊因為input有多種不同輸入方式，可以自行編輯

                    //$('select[name=' + key + ']').val(value);

                    //$('textarea[name=' + key + ']').html(value);

                }

            },

            ChangeEvent: function () {



            },

        }

        $(function () {

            thisPage.Init();

        });

    </script>

名命規則

C#: 
    參數, 區域變數: 小駝峰(CamelCasing)
    其它: 大駝峰(PascalCasing)
    參考:
    https://docs.microsoft.com/zh-tw/dotnet/standard/design-guidelines/naming-guidelines

Javascript:
    小駝峰(CamelCasing)

網址:
    全小寫, 用 - (減號) 分隔單字
    參考:
    https://www.seoseo.com.tw/article_detail_609.html
    https://blog.miniasp.com/post/2011/01/14/Avoid-using-underline-as-domain-name-character
    http://epaper.gotop.com.tw/pdf/acn023600.pdf

class 名命 HTML : 
    全小寫, 用 - (減號) 分隔單字 

複合字範列:

Pascal	Camel	Not
BitFlag	bitFlag	Bitflag
Callback	callback	CallBack
Canceled	canceled	Cancelled
DoNot	doNot	Don't
Email	email	EMail
Endpoint	endpoint	EndPoint
FileName	fileName	Filename
Gridline	gridline	GridLine
Hashtable	hashtable	HashTable
Id	id	ID
Indexes	indexes	Indices
LogOff	logOff	LogOut
LogOn	logOn	LogIn
Metadata	metadata	MetaData, metaData
Multipanel	multipanel	MultiPanel
Multiview	multiview	MultiView
Namespace	namespace	NameSpace
Ok	ok	OK
Pi	pi	PI
Placeholder	placeholder	PlaceHolder
SignIn	signIn	SignOn
SignOut	signOut	SignOff
UserName	userName	Username
WhiteSpace	whiteSpace	Whitespace
Writable	writable	Writeable
DateTimePicker	dateTimePicker	DatetimePicker

過去都是使用 jquery lazy load js 來實作延遲載圖，
其運作原理是偵測scroll事件以及img物件的相對位置來決定要不要load圖片

現在有更簡單的方式，就是用 IntersectionObserver API 這個 Web標準
來偵測 img 物件是不是進入可視 webview 範圍
https://developers.google.com/web/updates/2016/04/intersectionobserver

document.addEventListener("DOMContentLoaded", function() {

var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));;



if ("IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype) {

    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {

     entries.forEach(function(entry) {

        if (entry.isIntersecting) {

         let lazyImage = entry.target;

         lazyImage.src = lazyImage.dataset.src;

         lazyImage.srcset = lazyImage.dataset.srcset;

         lazyImage.classList.remove("lazy");

         lazyImageObserver.unobserve(lazyImage);

        }

     });

    });



    lazyImages.forEach(function(lazyImage) {

     lazyImageObserver.observe(lazyImage);

    });

}

//這裡可以加上else處理萬一瀏覽器不支援的狀況

});

網頁裡面只要用  <img data-src='圖片網址' class='lazy' />  就可以啦

IntersectionObserver API
目前 Can I Use 網站顯示大部分 browser 都支援，iOS safari 要 12.2 版才支援
應該可以放心使用


 

作業系統版本：Platform 



參考網址：
https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/ms537503(v=vs.85)