CORS ဆိုတာ ဘာလဲ

CORS ဆိုတာဟာ HTTP protocol ကို အခြေခံထားတဲ့ browser mechanism တစ်မျိုးပါ။ Cross-origin resource sharing (CORS) လို့ခေါ်ပြီး domain origin တခုကနေ တခြားသော မတူညီတဲ့ cross origin domain တွေရဲ့ resource တွေကို ရယူတဲ့အခါ browser တွေဖက်က ထိမ်းချုပ်လုပ်ကိုင်ပေးတဲ့ security လုပ်ငန်းစဉ်တစ်ခုဖြစ်ပါတယ်။

နည်းပညာခေတ်ဦးပိုင်းလောက်က CSRF (Cross-site request forgery) လို့ခေါ်တဲ့ malicious attack တွေကြောင့် အင်တာနက်ဟာ လုံခြုံမှုမရှိခဲ့ပါဘူး။ CSRF ဆိုတာ victim ရဲ့ browser ကတဆင့် တခြားသော application server တစ်ခုဆီကို အယောင်ဆောင် request တွေ ပေးပို့ပြီး အချက်အလက်တွေကို ရယူခြင်းတစ်မျိုးဖြစ်ပါတယ်။ ဥပမာ၊ browser ကဆင့် bank account တစ်ခုကို ဝင်ရောက်ထားတဲ့ user တစ်ဦးရှိတယ်ဆိုပါစို့။ အဲဒီ user ဟာ malicious link တွေကဆင့် တခြားသော external malicious website တစ်ခုဆီ လှည်စားခေါ်ဆောင်ခံလိုက်ရပါမယ်၊ အဲဒီနောက်မှာ browser ထဲမှာရှိနေတဲ့ cookie credential တွေကတဆင့် bank application ထဲကို အယောင်ဆောင် request တွေ ပေးပို့ပြီး အချက်အလက်တွေ ရယူသွားနိုင်တာမျိုး ဖြစ်ပါတယ်။

ဒီပြဿနာကို ကာကွယ်ဖို့အတွက် browser တွေအားလုံးဟာ same-origin policy (SOP) ကို တသမတ်တည်း အတည်ပြု ထည့်သွင်းခဲ့ကြပါတယ်။ SOP ဆိုတာ client ဖက်ကနေ resource တွေကို request လုပ်တဲ့အခါ origin တူညီတဲ့ resource တွေကိုသာ request လုပ်နိုင်ဖို့ ဖြစ်ပါတယ်။ တနည်းအားဖြင့် client URL ဟာ request လုပ်လိုက်တဲ့ server ရဲ့ protocol, port, hostname စသည်ဖြင့် တူညီနေရမှာပဲ ဖြစ်ပါတယ်။ ဒီနည်းလမ်းဟာ အင်တာနက်ကို တော်တော်လေး လုံခြုံမှုပေးနိုင်ပေမယ့် တချို့သော အခြေအနေတွေမှာ အဆင်မပြေစရာလေးတွေ ရှိလာခဲ့ပါတယ်။

လက်ရှိ modern web application အများစုမှာဆိုရင် client side နဲ့ server side ဆိုပြီး နှစ်မျိုးရှိပါတယ်။ Client ဟာ server ဆီကနေ data တွေကို ရယူနိုင်မှာပြီး server ကတော့ client ဆီကို data တွေ ပြန်ပို့ပေးမှာဖြစ်ပါတယ်။ Client နဲ့ server ဟာ သီးခြား application တွေဖြစ်တာကြောင့် ပုံမှန်အားဖြင့် မတူညီတဲ့ domain တွေပေါ်မှာပဲ host လုပ်ကြပါတယ်။ ဒါကြောင့် backend server ဆီကို data request လုပ်မယ့် client ဟာ မတူညီတဲ့ domain တနည်းအားဖြင့် မတူညီတဲ့ origin ရှိနေမှာဖြစ်ပါတယ်။ အဲဒီအပြင် authentication, analytics စသည်ဖြင့် third party API services တွေကို အသုံးပြုဖို့လိုအပ်လာတဲ့အခါမှာလည်း မတူညီတဲ့ origin တွေကို interact လုပ်လာရပါတယ်။ ဥပမာ၊ ကျနော်တို့ website ပေါ်မှာ သီးခြားအဖွဲ့အစည်း၊ သီးခြားလုပ်ငန်းတွေရဲ့ ကြော်ငြာ ads တွေ၊ resource တွေကို ဖော်ပြချင်တဲ့အခါ origin မတူညီတဲ့ API server တွေကို request လုပ်ရပါတယ်။ တနည်းအားဖြင့် ကျနော်တို့ရဲ့ application ဟာ မတူညီတဲ့ service တွေအတွက် မတူညီတဲ့ origin တွေကို request လုပ်ဖို့လိုအပ်လာပါတော့တယ်။

ဆိုတော့ မတူညီတဲ့ origin တစ်ခုဆီကနေ resource တွေကို ရယူလိုတဲ့အခါ ဘယ်လိုနည်းလမ်းနဲ့ ရယူနိုင်မလဲ။

CORS ဟာ မတူညီတဲ့ origin တစ်ခုဆီကနေ resource တွေကို access လုပ်ပေးနိုင်ပါတယ်။

Origin ဆိုတာ လွယ်လွယ်ပြောရရင် browser ရဲ့ လက်ရှိ URL ဖြစ်ပြီး တခြားသော မတူညီတဲ့ URL တွေအားလုံးဟာ cross-origin တွေဖြစ်ပါတယ်။

CORS က ဘယ်လို အလုပ်လုပ်တာလဲ။

ကျနော်တို့ရဲ့ လက်ရှိ standard internet communication protocol တခုဖြစ်တဲ့ HTTP မှာဆိုရင် browser ဟာ server ဆီကို HTTP request တခုပေးပို့ပါမယ်၊ အဲနောက်မှာ server ဘက်က ပေးပို့လိုက်တဲ့ data ကို HTTP response အနေနဲ့ လက်ခံပြီး user ဆီကို ပြသပေးမှာဖြစ်ပါတယ်။ ဒီနည်းလမ်းဟာ ပုံမှန် client-server ဆက်သွယ်တဲ့နည်းလမ်းဖြစ်ပါတယ်။

ဆိုတော့ မတူညီတဲ့ origin တခုဆီကို request လုပ်တဲ့အခါမှာဆိုရင် browser ဟာ ပေးပို့လိုက်တဲ့ HTTP request ရဲ့ header ထဲမှာ လက်ရှိ origin ရဲ့ port, hostname, protocol စသည်ဖြင့် information တွေ ထည့်သွင်းပေးလိုက်ပါတယ်။ Server ဘက်ကတော့ ရောက်ရှိလာတဲ့ HTTP header ကို ကြည့်ပြီး response data နဲ့အတူ Access-Control header တစ်ခုကို ပေးပို့လိုက်ပါတယ်။ အဲနောက်မှာ browser ဟာ အဆိုပါ access control header ကိုစစ်ဆေးပြီး သက်ဆိုင်ရာ origin ဟာ resource တွေကို share သုံးခွင့်ရှိမရှိ ဆုံးဖြတ်ပေးတာပဲဖြစ်ပါတယ်။ အကယ်၍ server ကိုယ်တိုင်က cross-origin access ကို ခွင့်မပြုတဲ့အခါ error မက်ဆေ့တစ်ခုကိုသာ ပြန်လည်ပို့ပေးမှာ ဖြစ်ပါတယ်။ ဒါဟာ CORS ရဲ့ ယေဘုယျလုပ်ဆောင်ပုံပဲဖြစ်ပါတယ်။

CORS အတွက် နမူနာတစ်ခုကို ဖော်ပြရရင် https://news.example.com ဆိုတဲ့ site တစ်ခုဟာ third party API တစ်ခုဖြစ်တဲ့ partner-api.com ကနေ resource တွေရယူချင်တယ်ဆိုပါစို့။ ဒီလိုဆိုရင် https://partner-api.com မှာရှိတဲ့ developer တစ်ယောက်ဟာ သူတို့ရဲ့ server ပေါ်မှာ CORS ကို allow လုပ်မယ့် origin list တွေကို အရင်ဆုံး configure လုပ်ပေးရမှာပါ။ လက်ရှိ နမူနာအရဆိုရင် partner-api.com ရဲ့ server configuration file ထဲမှာ Access-Control-Allow-Origin: https://news.example.com ဖြစ်ကြောင်း configure လုပ်ပေးရမှာပါ။ Server ဘက်က CORS access ကို configure လုပ်ပြီးတဲ့သွားအခါမှာတော့ news.example.com ကနေတဆင့် resource တွေကို request လုပ်နိုင်သွားမှာပဲဖြစ်ပါတယ်။ ဒီနေရာမှာ access list ဟာ https://news.example.com အတွက်ပဲ ခွင့်ပြုပေးထားတာဖြစ်လို့ တခြားသော origin တွေကနေ access လုပ်လို့တော့ ရနိုင်မှာမဟုတ်ပါဘူး။

နမူနာ access control response header တစ်ခုဟာ အခုလိုပုံစံဖြစ်ပါတယ်

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 00:23:53 GMT
Server: Apache/2
Access-Control-Allow-Origin: *
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/xml

နမူနာ response မှာ Access-Control-Allow-Origin ဟာ wildcard တန်ဖိုး * ကို အသုံးပြုထားပါတယ်။ ဒါဟာ server အနေနဲ့ မတူညီတဲ့ origin တိုင်းကနေ resource တွေကို request လုပ်ခွင့်ပြုထားတာပဲဖြစ်ပါတယ်။

ပုံမှန် ရိုးရှင်းတဲ့ CORS interaction တွေမှာဆိုရင် browser ဟာ request ကို တစ်ကြိမ်သာပေးပို့လေ့ရှိပါတယ်။ ဥပမာ၊ GET method လို operation မျိုးတွေပါ။ သို့ပေမယ့် တချို့သော ရှုပ်ထွေးတဲ့ HTTP request တွေမှာဆိုရင်တော့ actual request ကို မပေးပို့ခင်မှာ confirmation request တစ်ခုကို ပေးပို့ပါတယ်။ အဆိုပါ process ကို preflight request လို့ခေါ်ပါတယ်။ ဥပမာ၊ GET, POST မဟုတ်တဲ့ တခြားသော method တွေ၊ multipart/form-data, text/plain မဟုတ်တဲ့ content-type header ပါဝင်တာမျိုးတွေဖြစ်ပါတယ်။

ဒီလိုမျိုး preflight request တွေမှာဆိုရင် browser ဟာ option request တစ်ခုကို အရင်ဆုံး ပေးပို့ပါတယ်။ နမူနာအနေနဲ့ အောက်မှာဖော်ပြထားသလိုပုံစံဖြစ်ပါတယ်။

OPTIONS /data HTTP/1.1
Origin: https://example.com
Access-Control-Request-Method: DELETE

အဆိုပါ preflight request ကို server အနေနဲ့ သက်ဆိုင်ရာ access control information တွေပါဝင်တဲ့ response တစ်ခုပြန်ပေးမှာ ဖြစ်ပါတယ်။ နမူနာအနေနဲ့ အောက်မှာဖော်ပြထားသလိုပုံစံဖြစ်ပါတယ်။

HTTP/1.1 200 OK
Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Origin: https://news.example.com
Access-Control-Allow-Methods: GET, DELETE, HEAD, OPTIONS

အဲဒီနောက်မှာ browser ဟာ အဆိုပါ access control request header ကိုစစ်ဆေးပြီး resource တွေကို access လုပ်ခွင့်ရှိမရှိ ဆုံးဖြတ်ပေးမှာပဲ ဖြစ်ပါတယ်။

#webdevelopment #CodewithThura