Chrome Dev Summit - สรุปข้อมูลเกี่ยวกับแพลตฟอร์มเว็บแบบเปิด

โดย Greg Simon และ Eric Seidel

Blink คือเครื่องมือแสดงผลโอเพนซอร์สของ Chrome ทีม Blink กำลังพัฒนาเว็บและแก้ไขปัญหาที่นักพัฒนาแอปพบ

เราได้เริ่มปรับปรุงหลายอย่างเบื้องหลังตั้งแต่เปิดตัวไปเมื่อเดือนเมษายน

สิ่งแรกที่เราทําคือการลบแหล่งที่มาครึ่งหนึ่งซึ่งไม่จําเป็นต้องใช้ เรายังไม่จบ และเราไม่ได้ดำเนินการโดยพลบค่ำ การนําโค้ดออกจะอิงตามสถิติรวมที่รายงานแบบไม่ระบุตัวบุคคลจากผู้ใช้ Chrome ที่เลือกใช้การรายงาน

เราจะเผยแพร่ API ใหม่สำหรับนักพัฒนาแอปทุก 6 สัปดาห์ ซึ่งตรงกับกำหนดการเผยแพร่ของ Chrome

การเปลี่ยนแปลงครั้งใหญ่อย่างหนึ่งที่เราทำเมื่อแยกมาจาก Blink คือการเพิ่มระบบความตั้งใจ โดยทุกครั้งที่กำลังจะเปลี่ยนแปลงแพลตฟอร์มเว็บ เราจะส่งประกาศสาธารณะไปยัง Blink dev เพื่อแจ้งความตั้งใจของเราในการเพิ่มหรือนำฟีเจอร์ออก จากนั้นเราก็เขียนโค้ด และในวันถัดจากวันที่เช็คอินฟีเจอร์ ฟีเจอร์ดังกล่าวก็พร้อมให้บริการในรุ่น Canary แล้ว ฟีเจอร์นี้จะปิดอยู่โดยค่าเริ่มต้น แต่คุณเปิดใช้ได้โดยใช้ about:flags

จากนั้นเราจะประกาศความตั้งใจที่จะจัดส่งในรายชื่ออีเมลสาธารณะ

คุณสามารถดูฟีเจอร์ที่เราพัฒนา ฟีเจอร์ที่เปิดตัว และฟีเจอร์ที่เราวางแผนจะเลิกใช้งานได้ที่ chromestatus.com นอกจากนี้ คุณยังดูบล็อกรุ่นของ Chromium ซึ่งมีลิงก์ไปยังข้อบกพร่องและแดชบอร์ดเครื่องมือติดตามของเราได้ด้วย

การเปลี่ยนแปลงที่สำคัญอีกอย่างหนึ่งคือเราจะนำคำนำหน้า WebKit ออก ไม่ได้มีไว้เพื่อใช้คำนำหน้า Blink แต่มีไว้เพื่อใช้ Flag รันไทม์ (ไม่ใช่แค่ Flag คอมไพล์ไทม์)

Android WebView เป็นปัญหาที่ท้าทายมาก แต่ HTML5Test แสดงให้เห็นว่าสถานการณ์ดีขึ้นแล้ว เราใกล้จะให้บริการ API แพลตฟอร์มเว็บชุดเดียวในทุกแพลตฟอร์มแล้ว (Web Audio เป็นตัวอย่างที่ยอดเยี่ยมของเรื่องนี้)

แต่เครื่องทำไส้กรอกทำงานอย่างไร การเปลี่ยนแปลงทุกรายการที่เราทำกับ Blink จะต้องผ่านการทดสอบมากกว่า 30,000 ครั้งทันที ยังไม่นับการทดสอบ Chromium ทั้งหมดที่ทำงานเพิ่มเติมในภายหลัง เราใช้การตรวจสอบตลอด 24 ชั่วโมงด้วยบ็อตหลายพันตัว เบนช์มาร์กหลายพันรายการ และระบบที่ส่งหน้าเว็บที่ใช้งานไม่ได้หลายล้านหน้าไปยังเครื่องมือของเราเพื่อให้แน่ใจว่าเครื่องมือจะทำงานได้อย่างต่อเนื่อง เราทราบดีว่าอุปกรณ์เคลื่อนที่ทำงานช้ากว่ามาก และเรากำลังพยายามปรับปรุงเรื่องนี้อย่างเต็มที่

มีอะไรใหม่บ้าง

  • คอมโพเนนต์เว็บ: ดูการบรรยายของ Eric Bidelman
  • ภาพเคลื่อนไหวบนเว็บ: ภาพเคลื่อนไหวที่ซับซ้อน ทำงานสอดคล้องกัน และมีประสิทธิภาพสูง ซึ่งจะใช้ GPU ทุกครั้งที่เป็นไปได้
  • เลย์เอาต์บางส่วน: คำนวณเฉพาะสิ่งที่คุณต้องการ
  • CSS Grid
  • รูปภาพที่ปรับเปลี่ยนตามอุปกรณ์: srcset หรือ srcN หรือ ?
  • การปรับขนาดข้อความอัตโนมัติที่เร็วขึ้นและแบบอักษรที่แสดงผลในระดับพิกเซลย่อยที่สอดคล้องกัน
  • Skia ซึ่งเป็นระบบกราฟิกที่ Blink ใช้จะเปลี่ยนจาก GDI เป็น DirectWrite ใน Windows

เราอยากทราบความคิดเห็นของคุณ

หากคุณหลงใหล C++ และอยากเขียน C++ กับเรา โค้ดทั้งหมดของเราเปิดให้ทุกคนเข้ามามีส่วนร่วม คุณไม่จำเป็นต้องบอกใครหรือโน้มน้าวให้เราใช้ คุณเพียงแค่โพสต์แพตช์หรือรายงานข้อบกพร่องได้

สไลด์: กะพริบ

ความปลอดภัย

โดย Parisa Tabriz

ปัจจุบันผู้คนเชื่อมต่อกับเว็บได้มากกว่าที่เคย และจากสถานที่ต่างๆ มากขึ้น

เราเชื่อมต่อกับแล็ปท็อป โทรศัพท์ และแท็บเล็ต และอาจเชื่อมต่อกับอุปกรณ์และอุปกรณ์เสริมส่วนตัวในเร็วๆ นี้ เราเข้าถึงอินเทอร์เน็ตจากเครือข่ายที่ไม่เชื่อถือและบางครั้งก็เป็นเครือข่ายที่เป็นอันตราย เมื่อชีวิตของเราย้ายไปอยู่บนโลกออนไลน์มากขึ้นเรื่อยๆ เราจึงจําเป็นต้องดําเนินการเพื่อปกป้องข้อมูลของเราและข้อมูลของผู้ใช้

เหนือสิ่งอื่นใดในฐานะนักพัฒนาแอป เราจําเป็นต้องเข้าใจความจําเป็นและความใช้ได้จริงของ SSL

SSL คืออะไร ซึ่งย่อมาจาก Secure Sockets Layer และเป็นโปรโตคอลการเข้ารหัสลับที่ออกแบบมาเพื่อรักษาความปลอดภัยในการสื่อสารผ่านอินเทอร์เน็ต ซึ่งรับประกันความเป็นส่วนตัวผ่านการเข้ารหัสและความสมบูรณ์ เพื่อป้องกันการสอดแนมหรือดัดแปลงการเชื่อมต่ออินเทอร์เน็ต SSL มีข้อบกพร่อง แต่ก็เป็นวิธีหลักและเป็นวิธีเดียวที่แท้จริงในการรับประกันความปลอดภัยของการสื่อสารข้อมูลทุกประเภทบนอินเทอร์เน็ต

ข้อมูลจาก SSL Pulse ระบุว่าเมื่อ 1 ปีก่อนมีการนำ SSL ไปใช้ประมาณ 15% แต่ตอนนี้มีการนำไปใช้มากกว่า 50% แล้ว

คำย่อ 2 คำ

  • TLS: ส่วนใหญ่แล้วมีความหมายและวัตถุประสงค์เหมือนกับ SSL กล่าวอย่างละเอียดคือ SSL 3.1 ได้เปลี่ยนชื่อเป็น TLS และ TLS คือชื่อมาตรฐานของ IETF แต่ใช้แทนกันได้

  • HTTPS: คือ HTTP ผ่าน SSL ซึ่งเป็นการนำความสามารถด้านความปลอดภัยของ SSL และ HTTP มาตรฐานมาซ้อนกัน ขั้นแรกคือ Handshake ระหว่างไคลเอ็นต์กับเซิร์ฟเวอร์ โดยใช้การเข้ารหัสคีย์สาธารณะ/ส่วนตัวเพื่อสร้างคีย์ที่แชร์ ซึ่งโปรโตคอล SSL ส่วนที่ 2 จะใช้คีย์นี้เพื่อเข้ารหัสการสื่อสาร

การติดต่อสื่อสารทางอินเทอร์เน็ตอาจดูปลอดภัย รวดเร็ว และทันท่วงที รู้สึกเหมือนกำลังพูดกับเว็บไซต์โดยตรง แต่จริงๆ แล้วไม่ใช่การเชื่อมต่อโดยตรง การสื่อสารของเราผ่านเราเตอร์ Wi-Fi, ISP และอาจมีพร็อกซีสื่อกลางอื่นๆ ระหว่างอุปกรณ์ของคุณกับเว็บไซต์ หากไม่มี HTTPS การสื่อสารทั้งหมดจะเป็นแบบข้อความธรรมดา

ปัญหาคือผู้ใช้ไม่ค่อยพิมพ์ URL แบบเต็มซึ่งระบุ HTTPS หรือคลิกลิงก์ที่ใช้ HTTP ที่แย่กว่านั้นคืออาจมีการโจมตีแบบแทรกกลางการสื่อสาร (Man-In-The-Middle) และแทนที่ HTTPS ด้วย HTTP เครื่องมือที่ชื่อว่า SSLstrip ซึ่งเปิดตัวในปี 2009 ก็ทำเช่นนั้น Firesheep ซึ่งเปิดตัวเมื่อปี 2010 เป็นเพียงโปรแกรมที่คอยฟังเครือข่าย Wi-Fi ที่เปิดอยู่เพื่อหาคุกกี้ที่ส่งแบบไม่เข้ารหัส ซึ่งหมายความว่าคุณสามารถฟังแชทหรือเข้าสู่ระบบบัญชี Facebook ของผู้อื่นได้

แต่ SSL นั้น (ค่อนข้าง) ราคาถูก รวดเร็ว และใช้งานง่าย (ดูที่ ssllabs.com และหนังสือ High Performance Browser Networking ของ Ilya Grigorik) การปักหมุดคีย์สาธารณะออกแบบมาเพื่อให้ผู้ดำเนินการเว็บไซต์มีวิธีจำกัดผู้ออกใบรับรองที่ออกใบรับรองให้กับเว็บไซต์ได้

"ในเดือนมกราคมปีนี้ (2010) Gmail ได้เปลี่ยนไปใช้ HTTPS กับทุกอย่างโดยค่าเริ่มต้น ในการดําเนินการนี้ เราไม่ต้องติดตั้งใช้งานเครื่องเพิ่มเติมและไม่ต้องใช้ฮาร์ดแวร์พิเศษ ในเครื่องฝั่งเฟรมเวิร์กเวอร์ชันที่ใช้งานจริง SSL คิดเป็นสัดส่วนน้อยกว่า 1% ของภาระงาน CPU, หน่วยความจำน้อยกว่า 10 KB ต่อการเชื่อมต่อ และค่าใช้จ่ายเพิ่มเติมของเครือข่ายน้อยกว่า 2%…

หากหยุดอ่านตอนนี้ คุณก็จำไว้แค่อย่างเดียวว่า SSL ไม่ได้ใช้ทรัพยากรการประมวลผลมากอีกต่อไปแล้ว"

Overclocking SSL, Adam Langley (Google)

สุดท้ายนี้ เรามีตัวอย่างข้อบกพร่องที่พบบ่อยที่สุด 2 ข้อดังนี้

  • เนื้อหาแบบผสม: เว็บไซต์ที่ใช้ทั้ง HTTP และ HTTPS ผู้ใช้จะรู้สึกรำคาญเนื่องจากต้องคลิกปุ่มสิทธิ์เพื่อโหลดเนื้อหา (แต่ Chrome และ Firefox บล็อกเนื้อหาผสมจาก iframe อยู่แล้ว) ตรวจสอบว่าทรัพยากรทั้งหมดในหน้า HTTPS โหลดโดย HTTPS โดยใช้ URL แบบสัมพัทธ์หรือแบบสัมพัทธ์กับรูปแบบ เช่น <style src="//foo.com/style.css">
  • คุกกี้ที่ไม่ปลอดภัย: ส่งแบบไม่เข้ารหัสผ่านการเชื่อมต่อ HTTP หลีกเลี่ยงปัญหานี้โดยการตั้งค่าแอตทริบิวต์ secure ในส่วนหัวของคุกกี้ นอกจากนี้ คุณยังใช้ส่วนหัว "Strict Transport Security" ใหม่เพื่อกำหนดให้ใช้ SSL Transport Security (HSTS) ได้ด้วย

สรุปประเด็นสำคัญ

  • หากให้ความสำคัญกับความเป็นส่วนตัวและความสมบูรณ์ของข้อมูลผู้ใช้ คุณต้องใช้ SSL ซึ่งทำได้เร็วขึ้น ง่ายขึ้น และถูกลงกว่าที่เคย
  • หลีกเลี่ยงข้อผิดพลาดที่พบบ่อยในการติดตั้งใช้งาน เช่น ข้อบกพร่องของเนื้อหาแบบผสมหรือการไม่ตั้งค่าบิตส่วนหัว HTTP ที่ถูกต้อง
  • ใช้ URL แบบสัมพัทธ์หรือแบบสัมพัทธ์กับรูปแบบ
  • ลองดูฟีเจอร์ใหม่ๆ ที่น่าสนใจ เช่น HSTS และการปักหมุดใบรับรอง

สไลด์: มี SSL ไหม

Media API สำหรับเว็บที่ใช้งานได้บนอุปกรณ์หลายประเภท

โดย Sam Dutton และ Jan Linden

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

การศึกษาของรัฐบาลสหราชอาณาจักรพบว่าผู้ใหญ่ 53% "ใช้สื่อหลายอย่างพร้อมกัน" ขณะดูทีวี โดยการใช้อุปกรณ์เคลื่อนที่เพื่อแชร์และบริโภคสื่อ ในหลายประเทศ การดูทีวีลดลงและการรับชมออนไลน์เพิ่มขึ้น ตัวอย่างเช่น ในปี 2012 มีเพียง 30% ของครอบครัวในกรุงปักกิ่งที่ดูทีวี ซึ่งลดลงจาก 70% ในปี 2009 ไฮไลต์ของ W3C ปี 2013 ระบุว่า "ปีที่ผ่านมา การดูวิดีโอบนอุปกรณ์เคลื่อนที่เพิ่มขึ้น 2 เท่า" ในปีนี้ เวลาเฉลี่ยที่ใช้กับสื่อดิจิทัลต่อวันในสหรัฐอเมริกาจะมากกว่าการดูทีวี การดูไม่ได้เป็นกิจกรรมแบบพาสซีฟอีกต่อไป ผู้บริโภคความบันเทิง 87% ในสหรัฐอเมริการะบุว่าใช้อุปกรณ์หน้าจอที่ 2 อย่างน้อย 1 เครื่องขณะดูทีวี Cisco ระบุว่า "วิดีโอจะคิดเป็นสัดส่วน 80-90 เปอร์เซ็นต์ของการเข้าชมของผู้บริโภคทั่วโลกภายในปี 2017" ซึ่งเทียบเท่ากับวิดีโอความยาวเกือบ 1 ล้านนาทีต่อวินาที

เรามีสิ่งใดบ้างสำหรับนักพัฒนาเว็บ ระบบนิเวศของ Media API สําหรับเว็บแบบเปิด: เทคโนโลยีมาตรฐานที่ทำงานร่วมกันได้ซึ่งทำงานได้บนแพลตฟอร์มหลายแพลตฟอร์ม

สรุปประเด็นสำคัญ

  • WebRTC ให้บริการการสื่อสารแบบเรียลไทม์ในเบราว์เซอร์ และตอนนี้ได้รับการรองรับอย่างกว้างขวางบนอุปกรณ์เคลื่อนที่และเดสก์ท็อป โดยปัจจุบันมีปลายทาง WebRTC ทั้งหมดกว่า 1.2 พันล้านรายการ
  • Web Audio มีเครื่องมือที่ซับซ้อนสำหรับการสังเคราะห์และประมวลผลเสียง
  • Web MIDI ที่ผสานรวมกับ Web Audio ช่วยให้โต้ตอบกับอุปกรณ์ MIDI ได้
  • ตอนนี้องค์ประกอบเสียงและวิดีโอใช้งานได้ในเบราว์เซอร์บนอุปกรณ์เคลื่อนที่และเดสก์ท็อปมากกว่า 85%
  • ส่วนขยายแหล่งที่มาของสื่อสามารถใช้สำหรับการสตรีมแบบปรับเปลี่ยนได้และการเปลี่ยนเวลา
  • EME เปิดใช้การเล่นเนื้อหาที่ได้รับการคุ้มครอง
  • ข้อความถอดเสียง คำบรรยาย และองค์ประกอบแทร็กช่วยให้มีคำบรรยายแทนเสียง คำบรรยาย ข้อมูลเมตาแบบกำหนดเวลา การทำ Deep Link และการค้นหาแบบเจาะลึก

สไลด์: Media API สำหรับเว็บที่ทำงานได้บนอุปกรณ์หลายประเภท