Show HN: Little Rat - ส่วนขยาย Chrome สำหรับตรวจสอบการเรียกเครือข่ายของส่วนขยายอื่น

 (github.com/dnakov)
2 คะแนน โดย GN⁺ 2023-08-15 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • Little Rat เป็นส่วนขยาย Chrome ขนาดเล็กที่ใช้ตรวจสอบการเรียกเครือข่ายของส่วนขยาย Chrome อื่น ๆ และสามารถบล็อกได้ตามต้องการ
  • การตรวจจับและบล็อกทราฟฟิกของส่วนขยายอื่นทำได้เมื่อเปิดแฟลก extensions-on-chrome-urls ที่ chrome://flags/#extensions-on-chrome-urls หรือรัน Chrome ด้วย --extensions-on-chrome-urls
  • การติดตั้งแบบแมนนวลใช้ขั้นตอนดาวน์โหลด GitHub ZIP, แตกไฟล์, เปิดใช้งาน Developer mode ใน Chromium/Chrome Extensions และเลือก Load unpacked extension จากไดเรกทอรี little-rat-main

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2023-08-15
ความคิดเห็นจาก Hacker News

  • ผมอยากให้สิ่งนี้เป็น ฟีเจอร์พื้นฐานของ Firefox หรือ Chrome มากกว่าเป็นส่วนขยายของบุคคลที่สาม แบบนั้นอัตราการใช้งานจะมากพอจนเบราว์เซอร์อื่นต้องใส่ใจตามไปด้วย สำหรับส่วนขยายบางตัว ผมอยากอนุญาตเฉพาะคำขอ GET ไปยัง URL แบบคงที่ที่กำหนดไว้ โดยไม่สามารถเปลี่ยน header ได้
    แบบนี้ยังอัปเดตข้อมูลได้ แต่ลดความเสี่ยงการรั่วไหลลง บางส่วนขยายทำงานแค่ภายในเบราว์เซอร์ในเครื่อง จึงไม่จำเป็นต้องเข้าถึงเครือข่ายเลยด้วยซ้ำ อย่างไรก็ตาม ถ้ามันแก้ไข source ของหน้าได้ ก็อาจเลี่ยงไปส่งข้อมูลได้อยู่ดี เบราว์เซอร์คงเลยไม่ทำเรื่องนี้ ถึงอย่างนั้น ผมก็คิดว่าน่าลองมากกว่ายอมแพ้แล้วปล่อยให้เป็นหน้าที่ของส่วนขยาย Chrome

    • ถ้าต้องการแค่สังเกตการณ์ก็ทำได้ ต้องเปิด debugger สำหรับเบราว์เซอร์ ไม่ใช่ debugger สำหรับหน้าปัจจุบัน
      ขั้นตอนเกือบเหมือนกับการตรวจสอบ UI คือเปิด remote debugging แล้วเรียก Browser Toolbox: https://superuser.com/questions/1608096/how-to-inspect-firef...
      ยังมีประโยชน์เวลาต้องการรู้ว่าต้องใส่อะไรในไฟล์ user-chrome CSS เพื่อปรับหน้าตาแท็บให้มากกว่าแค่ธีม แต่การใช้ user-chrome CSS เองก็ค่อนข้างยุ่งยาก
      เพื่อให้มองเห็น request เครือข่ายของส่วนขยาย ผมต้องเปลี่ยนเป็น multi-process mode ซึ่งโดยรวมก็เป็นพฤติกรรมที่สมเหตุสมผล
      ตัวอย่างเช่น ภาพที่ uBlock ดึงรายการบล็อกแบบสุ่มที่ผมคลิกเพื่อทดสอบ: https://i.imgur.com/wBYbBM2.png
      ภาพที่ Firefox เองอัปเดตรายการ safe-browsing อยู่เบื้องหลัง: https://i.imgur.com/JYxWwjW.png
    • คำขอ GET ก็สามารถรั่วข้อมูลผ่าน path และพารามิเตอร์ query string ได้ แม้จะปิดทางนั้นแล้ว ก็ยังสร้างการสื่อสารแบบรหัสมอร์สที่บอกนัยกิจกรรมผ่านเวลาและความถี่ได้ และถ้ามี request มากพอ ก็ส่งข้อมูลระดับเมกะไบต์ได้ไม่ยาก
    • ถ้าส่วนขยายสร้าง HTTP request ที่ไม่ใช่แค่การเรียก URL ที่มีอยู่แล้วในหน้านั้นซ้ำ ๆ ผมคิดว่าควรแสดง toast notification ที่จัดรูปแบบเนื้อหา request ให้อ่านง่าย
      ส่วนขยายที่ทำมาดีจะมีแจ้งเตือนแค่เป็นครั้งคราว และส่วนขยายที่ต้องใช้เซิร์ฟเวอร์ก็จะขึ้นในจังหวะที่ผู้ใช้คาดว่าจะมีการสื่อสารกับเซิร์ฟเวอร์ ส่วนขยายที่ส่งคีย์ที่พิมพ์หรือข้อมูลน่าสงสัยน่าจะถูกสังเกตเห็นได้ง่ายมาก
    • เท่าที่จำได้ ส่วนขยายจะเข้าถึง URL ที่ไม่ได้ระบุไว้ใน ส่วน permissions ของ manifest ไม่ได้ ผมเข้าใจว่า Firefox จะแสดง URL เหล่านั้นในหน้าต่างยืนยันสิทธิ์
      แต่สามารถใส่ wildcard ใน URL ได้ และเหมือนจะมีค่าพิเศษที่หมายถึงทุก URL ด้วย ถึงอย่างนั้น ส่วนขยายที่ต้องใช้สิทธิ์แบบนั้นจริง ๆ ก็ควรมีไม่มาก
    • เหตุผลที่ผู้ผลิตเบราว์เซอร์ไม่ใส่ฟีเจอร์แบบนี้ อาจเป็นเพราะไม่ว่าจะใส่มาตรการป้องกันอะไร ก็ เลี่ยงได้ง่าย
      เช่น ต่อให้ตัวส่วนขยายสร้าง request เองไม่ได้ แต่ถ้ามีสิทธิ์แก้ DOM ของเว็บเพจ ก็มีหลายวิธีที่จะหลอกให้เว็บเพจส่ง request แทน

  • ส่วนขยายนี้ติดตั้งไม่ง่ายนัก จึงน่าจะเพิ่ม screenshot ที่แสดง network event ที่จับได้จริง ตอนนี้ screenshot ไปบังฟีเจอร์ที่น่าสนใจที่สุดอยู่

    • เปิด Google Chrome แล้วไปที่เมนูจุด 3 จุดมุมขวาบน → Extensions → Manage Extensions → เปิดสวิตช์ Developer Mode มุมขวาบน → ปุ่ม “Load Packged” มุมซ้ายบน → โหลดไดเรกทอรี .zip ที่แตกไฟล์แล้ว
      จากนั้นกลับไปที่หน้าต่างเบราว์เซอร์ปกติ กดไอคอนส่วนขยายรูปชิ้นจิ๊กซอว์ทางขวาของแถบที่อยู่ แล้วกดไอคอนหมุดเล็ก ๆ ข้าง Little Rat เพื่อติดตั้งและให้แสดงในรายการไอคอนส่วนขยาย

  • เจ๋งดี พูดตรง ๆ คือแปลกใจที่ทำแบบนี้ได้
    ผมไม่แน่ใจว่า API เหล่านี้ให้ข้อมูลอะไรบ้างกันแน่ แต่ถ้าส่วนขยายหนึ่งเข้าถึง request ของอีกส่วนขยายได้ ก็อาจเกิดความกังวลด้านความปลอดภัยกับ ส่วนขยายจัดการรหัสผ่าน หรือส่วนขยายที่ใช้ authentication token ไม่ใช่หรือ?

  • ดีเลย รู้สึกว่าสิ่งนี้ควรอยู่เป็น chrome:// URL มากกว่า

    • สิ่งแรกที่ผมนึกคือ ในเมื่อส่วนขยายเป็นความเสี่ยงด้านความปลอดภัยและความเป็นส่วนตัวมากขนาดนี้ ทำไมมันถึงไม่เป็น ฟีเจอร์พื้นฐานของ Chromium

  • ดูดีนะ แต่อยากรู้ว่ามีแผน พอร์ตไป Firefox ไหม
    มีใครรู้จักทางเลือกที่ทำแบบเดียวกันบน Firefox บ้างไหม?

    • การเชื่อมต่อแบบนี้น่าจะปรากฏใน Browser Console ด้วย[1] ไม่อย่างนั้นก็สามารถ log traffic ได้[2] หรือจะตรวจสอบและ debug ส่วนขยายรายตัวก็ได้[3]
      คุณอาจแปลกใจที่ Mozilla ปล่อยให้การละเมิดนโยบายส่วนขยายอย่างชัดเจนจำนวนไม่น้อยผ่านไปในส่วนขยายที่ “แนะนำ”
      [1]: https://firefox-source-docs.mozilla.org/devtools-user/browse...
      [2]: https://firefox-source-docs.mozilla.org/networking/http/logg...
      [3]: https://firefox-source-docs.mozilla.org/devtools-user/about_...
    • เดี๋ยวจะลองเร็ว ๆ นี้แล้วมาอัปเดต
    • ในกรณีส่วนใหญ่ แค่เพิ่ม var chrome = browser; ไว้บนสุดของไฟล์ JS แต่ละไฟล์ ก็อาจทำงานบน Firefox ได้แล้ว Firefox extension API ค่อนข้างเหมือนสำเนาของ Chrome Extension APIs ที่ต่างกันเพียงเล็กน้อย

  • ถ้าขึ้น Chrome Store แล้วจะลองใช้

    • กำลังใช้ declarativeNetRequest.onRuleMatchedDebug[0] อยู่ ซึ่งดูเหมือนเป็น สำหรับ debug เท่านั้น เลยสงสัยว่าจะได้รับอนุญาตบน Chrome Web Store ไหม
      0: https://github.com/dnakov/little-rat/blob/f0b9b6be39af9fe7f4...
    • ไปที่ Releases แล้วคลิกขวาบันทึกไฟล์ crx จากนั้นไปที่ Extensions ของ Chrome แล้ว ลากแล้วปล่อยไฟล์ crx นั้นลงไปก็ได้

  • ทำไมถึงไม่มีใน Chrome Store?

    • ตอนนี้อยู่ระหว่างการรีวิว เพราะใช้ chrome.declarativeNetRequest ซึ่งเป็น API ที่ uBlock ก็ใช้อยู่

  • ดูเรียบร้อยดี แต่ส่วนนี้ควรจัดการอย่างระมัดระวังกว่านี้: https://github.com/dnakov/little-rat/blob/main/popup.js#L36
    ผมไม่อยากต้องกังวลว่าส่วนขยายอื่นจะฉีด XSS เข้ามาที่นี่ผ่าน request, ID หรือชื่อที่ถูกดัดแปลงได้หรือไม่

    • เป็นข้อสังเกตที่ดีมาก แต่ content security policy ไม่อนุญาต unsafe-inline และ extension ID ถูก Chrome สร้างให้อัตโนมัติ

  • แค่ไม่มี network call ไม่ได้พิสูจน์ว่าส่วนขยายนั้นปลอดภัย มันอาจ แคช ข้อมูลที่คุณอยากเก็บเป็นส่วนตัวไว้ แล้วค่อยส่งออกไปเป็นระยะ ๆ ก็ได้