2FA: เสริมความปลอดภัยให้บัญชีด้วยรหัสสองชั้น

ในการทำรายการผ่านอินเทอร์เน็ตแบงค์กิง โดยมากแล้วเราจะพบว่ากระบวนการสำคัญก่อนยืนยันการทำธุรกรรม คืการกรอกรหัสที่ได้รับผ่าน SMS

รหัสที่ได้นี้ทางเทคนิคมีชื่อว่า One-Time Password (OTP) ซึ่งเป็นรหัสที่จำเพาะต่อบุคคลและปัจจัยอื่น และกระบวนการใช้รหัสสองชั้นนี้เรียกว่า การยืนยันตัวตนสองขั้น (2 Factor Authentication: 2FA) ช่วยป้องกันการเข้าถึงแอคเคานต์โดยมิชอบให้เป็นไปได้รัดกุมขึ้น Continue reading “2FA: เสริมความปลอดภัยให้บัญชีด้วยรหัสสองชั้น”

Fundamental HTML+CSS: Grid system

บทความนี้อุทิศให้ไข่แห่ง CPE30 ผู้ขยันทำงาน :P

การจัดหน้าเว็บไซต์ในปัจจุบันนั้น นอกจากจะต้องคำนึงถึงความสวยงามตามนิยามของแต่ละคนแล้ว ยังต้องพิจารณาปัจจัยหลายๆ อย่างประกอบ

หนึ่งในปัจจัยที่มีผลในปัจจุบันคือขนาดของหน้าจอ ปฏิเสธไม่ได้ว่าขนาดหน้าจอที่ต่างกันนั้นทำให้เกิดความ “หลากหลาย” ของเว็บไซต์

หากทดลองเข้าบล็อกนี้จากโทรศัพท์ จะพบว่าส่วนแถบด้านข้างหายไปอยู่ด้านบน เทคนิกการจัดหน้าแบบนี้เรียกว่า “responsive” ซึ่งโดยเบื้องต้นจะกล่าวถึงการจัดหน้าโดยใช้ระบบ Grid อย่างง่าย

กริดคืออะไร

ในการออกแบบเว็บหลายๆ ครั้ง เราอาจแบ่งเป็น “แถบ” หลายๆ แถบ การออกแบบเว็บที่มีแถบด้านข้าง ก็อาจมองได้ว่าเราแบ่งเว็บในส่วนนอกเหนือจากหัวเป็น “แถบ”

เป็นเรื่องง่ายดายที่ในปัจจุบัน เราสามารถใช้ระบบ “แถบ” ที่คน “ทำ” ไว้ให้ล่วงหน้าแล้ว เราเรียกระบบนี้ว่า “ระบบกริด”

Screen Shot 2559-07-30 at 9.50.46 PM

กริดที่จะใช้ในบทความนี้ จะใช้ชุดกริดจาก flexbox grid ซึ่งสามารถแบ่ง “แถบ” ย่อยได้เป็น 12 แถบ

ข้อดีของระบบกริดสมัยใหม่ คือสามารถสั่งให้ความกว้างของแต่ละ “โซน” ต่างกันในแต่ละขนาดหน้าจอได้ เราอาจใช้ความสามารถนี้ในการ “ย้าย” เมนูแถบสีเหลืองไปไว้ต่อบน-ล่างกับเนื้อหาส่วนสีน้ำเงิน

Screen Shot 2559-07-30 at 9.53.33 PM

เพื่อไม่ให้เป็นการเสียเวลา จะอธิบายวิธีการใช้ระบบกริดได้ดังนี้

การใช้งานกริด

เริ่มต้นใช้งานกริด

ขั้นแริ่มแรกของการใช้กริด คือการเพิ่มไฟล์ CSS ของกริดไว้ในส่วน HTML Header ทำได้ด้วยการโหลดไฟล์กริดมาไว้ในที่ที่ตายตัวหนึ่งที่ แล้วใช้คำสั่ง <link> เพื่อสร้าง stylesheet

<link href="path/to/flexboxgrid.css" rel="stylesheet" type="text/css">

หากผู้อ่านเป็นนิสิต CPE30 ที่ต้องการสร้างไฟล์เพื่อส่งอาจารย์ อาจทำได้ด้วยการ hotlink (ไม่ต้องอัพไฟล์) ด้วยการแปะโค้ดตามนี้ในส่วน header

<link href="https://srakrn.me/css/flexboxgrid.css" rel="stylesheet" type="text/css">

ออกแบบหน้าเพจ

เราจำเป็นต้อง “คิด” ก่อนว่าจะ “แบ่ง” เว็บของเราเป็นกี่ส่วนตามแนวนอน ซึ่งสมมติว่าหน้าเว็บเป็นทรงมาตรฐานดังรูปข้างบน

เราอาจแบ่งเว็บทรงนี้เป็น 2 แถวตามแนวนอน คือส่วนหัวหนึ่งแถว กับส่วนเนื้อหาและส่วนเมนูด้านข้าง ตามกรอบสีแดงข้างบน

Screen Shot 2559-07-30 at 9.55.41 PM

ในการสร้างแถวตามแนวนอนใหม่ สามารถสร้างได้ด้วยคำสั่ง <div class=”row”>

ในที่นี้อาจประกาศ row สองแถวได้ดังนี้

<div class="row">
</div>
<div class="row">
</div>

การประกาศแถว เราจะประกาศด้วย <div> โดยประกาศ class ดังภาพ

Screen Shot 2559-07-30 at 10.11.18 PM

โดยที่

  • col-xs- คือกินพื้นที่กี่ “แถบ” บนจอขนาดเล็กมาก เช่นโทรศัพท์เก่าๆ
  • col-sm-คือกินพื้นที่กี่ “แถบ” บนจอขนาดเล็ก เช่นโทรศัพท์ใหม่ๆ
  • col-md- คือกินพื้นที่กี่ “แถบ” บนจอขนาดเล็ก เช่นไอแพดแนวตั้ง
  • col-lg- คือกินพื้นที่กี่ “แถบ” บนจอขนาดใหญ่ เช่นคอมพิวเตอร์

ทั้งหมดตามด้วยตัวเลขว่ากินพื้นที่กี่แถบ มากสุดคือ 12

ในส่วนของหัวแถวแรก เราสามารถประกาศ “แถบ” ที่กว้าง 12 หน่วยอย่างเสมอต้นเสมอปลายได้เลย

<div class="row">
    <div class="col-xs-12
                col-sm-12
                col-md-12
                col-lg-12">
        <h1>ส่วนหัว</h1>
    </div>
</div>
<div class="row">
</div>

ในส่วนของหัวแถวแรก เราสามารถประกาศ “แถบ” ที่กว้าง 12 หน่วยอย่างเสมอต้นเสมอปลายได้เลย

<div class="row">
    <div class="col-xs-12
                col-sm-12
                col-md-12
                col-lg-12">
        <h1>ส่วนหัว</h1>
    </div>
</div>
<div class="row">
</div>

และในส่วนเนื้อหา เราอาจประกาศได้ดังนี้

เมนู: เล็กมากๆ ให้กว้างทั้งจอ ถ้าใหญ่ให้กว้าง 3 ส่วน
เนื้อหา: เล็กมากๆ ให้กว้างทั้งจอ ถ้าใหญ่ให้กว้าง 9 ส่วน

อาจเขียนเป็น HTML ได้ดังนี้

<div class="row">
    <div class="col-xs-12
                col-sm-12
                col-md-12
                col-lg-12">
        <h1>ส่วนหัว</h1>
    </div>
</div>
<div class="row">
    <div class="col-xs-12
                col-sm-12
                col-md-3
                col-lg-3">
        <h2>เมนูด้านซ้าย</h2>
    </div>
    <div class="col-xs-12
                col-sm-12
                col-md-9
                col-lg-9">
        <p>เนื้อหา</p>
    </div>
</div>

เป็นการใส่โครงให้กับ HTML เพื่อกำหนดความกว้างโดยคร่าว

My preference on OS X setup

น่าจะได้ฤกษ์ฟอร์แมต OS X ใหม่ (ยังไม่ใช้ Sierra ไม่เรียก macOS นะ :P)

ขอ list ไว้ก่อนว่าต้องทำอะไรมั่ง (ถึงแม้สุดท้ายจะไล่ตามนี้เยอะมากๆ ก็เถอะ)

ทั้งนี้ manual ล้วนๆ ทั้งที่ควรศึกษา dotfiles

Continue reading “My preference on OS X setup”

SSL Intercept – แน่ใจหรือเปล่าว่าใช่?

ในกระบวนการการสื่อสารด้วย SSL เรามั่นใจได้ว่าข้อมูลที่เราสื่อสารไปนั้นยังเป็นความลับอยู่
แต่ความลับนั้นอยู่ได้นานแค่ไหน? คำตอบคือตราบใดที่ “ลูกศรร่วม” (Symmetric key) ยังเป็นความลับในกระบวนการการแลกเปลี่ยนคีย์

Continue reading “SSL Intercept – แน่ใจหรือเปล่าว่าใช่?”

ความปลอดภัยเบื้องต้น: HTTPS คืออะไร และทำงานอย่างไร

บทความนี้เขียนเพื่อเป็นส่วนหนึ่งของความตระหนักต่อการเข้ารหัส
เพราะการเข้ารหัสไม่ใช่เรื่องไกลตัว

เราคงเคยได้ยินลูกกุญแจสีเขียวที่ถ้ามีแล้วเว็บจะปลอดภัยขึ้นกันมาบ้าง

ลูกกุญแจสีเขียวนี้ เราเรียกกันว่า HTTPS

กลไกการทำงานของ HTTPS นั้นเอาเข้าจริงแบ่งเป็นสองระบบซ้อนกัน คือ HTTP ที่ใช้กันอยู่ปกติ และตัว S ที่เพิ่มขึ้นมา

Continue reading “ความปลอดภัยเบื้องต้น: HTTPS คืออะไร และทำงานอย่างไร”

การเข้ารหัสเบื้องต้น: Public-Private key encryption

บทความนี้เขียนเพื่อเป็นส่วนหนึ่งของความตระหนักต่อการเข้ารหัส
เพราะการเข้ารหัสไม่ใช่เรื่องไกลตัว

เคยมีความลับที่ไม่อยากบอกใครไหมครับ?
เคยนินทาเพื่อนด้วยโค้ดเนมย่อของมันแทนที่จะเป็นโค้ดเต็มไหมครับ?
เคยเรียกครูว่า “ป้าแก่” “เจ๊โหด” “อีถึก” เพื่อป้องกันไม่ให้รู้ว่าหมายถึงใครไหมครับ

นี่แหละ การเข้ารหัส

Continue reading “การเข้ารหัสเบื้องต้น: Public-Private key encryption”