ช่องโหว่ XSS และ N+1 ที่ซ่อนอยู่ใน view

XSS ทวน 30 วินาที — แล้วทำไมต้องลงลึกอีก

บท 103 เห็นแล้วว่าถ้าชื่อบทความเป็น <script>…</script> แล้วหน้าเว็บวางลงไปตรง ๆ เบราว์เซอร์ของทุกคนที่เปิดหน้านั้นจะรันโปรแกรมของคนร้าย · และ <%= %> กันให้แล้วโดยไม่ต้องสั่ง

ที่ต้องลงลึกเพราะ Day 3 เราจะเริ่มให้ AI เขียน view · และมีคำสั้น ๆ ไม่กี่คำที่ปิดระบบกันภัยนี้ได้ ซึ่ง AI (หรือคนที่รีบ) อาจหยิบมาใช้ตอนอยากให้ HTML "โชว์ออกมาสวย ๆ" · บทนี้จะลองของจริงทั้ง 4 แบบในสไลด์หน้า 17 แล้วดูว่าเบราว์เซอร์ได้รับอะไรจริง

สร้างบทความอันตรายของจริงหนึ่งชิ้น

เปิด bin/rails console (บท 107) ในหน้าต่างที่สองแล้วสร้างบทความที่ชื่อเป็นโปรแกรม · เราใช้ alert('XSS!') (alert = คำสั่ง JavaScript ที่เด้งกล่องข้อความขึ้นมาบนหน้าเว็บ) — แค่เด้งกล่อง ไม่ทำอะไรเสียหาย · คนร้ายจริงจะใส่โปรแกรมขโมยข้อมูลแทน (สไลด์หน้า 17)

wongnok-blog-all-in-one(dev):001> post = Post.create!(title: "<script>alert('XSS!')</script>", description: "บทความทดลอง XSS", category: Category.first)
  Category Load (0.5ms)  SELECT "categories".* FROM "categories" ORDER BY "categories"."id" ASC LIMIT 1 /*application='WongnokBlogAllInOne'*/
  TRANSACTION (0.3ms)  BEGIN /*application='WongnokBlogAllInOne'*/
  Post Create (0.8ms)  INSERT INTO "posts" ("title", "description", "category_id", "created_at", "updated_at") VALUES ('<script>alert(''XSS!'')</script>', 'บทความทดลอง XSS', 1, '2026-11-07 03:44:18.637441', '2026-11-07 03:44:18.637441') RETURNING "id" /*application='WongnokBlogAllInOne'*/
  TRANSACTION (0.7ms)  COMMIT /*application='WongnokBlogAllInOne'*/
=>
#<Post:0x0000000126ae2118
…
wongnok-blog-all-in-one(dev):002> post.id
=> 31

• Post.create!(…) — สร้างแฟ้มใหม่ใส่ลิ้นชัก posts (บท 107) · category: Category.first = ใส่หมวดแรก (อาหารไทย)
• VALUES ('<script>alert(''XSS!'')… — ฐานข้อมูลเก็บตัวอักษรตามที่พิมพ์ทุกตัว ไม่มีใครกรอง · ('' สองตัวคือวิธีที่ SQL เขียน ' หนึ่งตัว ไม่ต้องสนใจ)
• #<Post:0x… แล้วตามด้วย … — console โชว์แฟ้มที่เพิ่งสร้างทีละช่องอีกหลายบรรทัด ผมตัดออกเพราะไม่ใช่เรื่องของบทนี้
• post.id → 31 — จดเลขนี้ไว้ · ของคุณอาจเป็นเลขอื่น ถ้าเคยเพิ่มบทความเอง ให้ใช้เลขของคุณแทน 31 ในทุกคำสั่งข้างล่าง

สังเกตว่า Rails ยอมให้บันทึก · ระบบกันภัยของ Rails ไม่ได้อยู่ตอนเก็บ แต่อยู่ตอนโชว์ — ตรงนี้แหละที่บทนี้จะเจาะ

ลอง 4 แบบ — ดูว่าเบราว์เซอร์ได้รับอะไรจริง

หน้า /posts/31 โชว์บทความผ่านแม่พิมพ์ app/views/posts/_post.html.erb (ของเดิมจาก scaffold) · เปิดไฟล์ดูทั้งไฟล์ก่อน — ครึ่งหลังของบทก็ใช้ไฟล์นี้:

<%# app/views/posts/_post.html.erb — เลขบรรทัดอยู่ซ้ายสุด (ไม่ได้อยู่ในไฟล์) %>
 1  <div id="<%= dom_id post %>" class="w-full sm:w-auto my-5 space-y-5">
 2    <div>
 3      <strong class="block font-medium mb-1">Title:</strong>
 4      <%= post.title %>
 5    </div>
 6    <div>
 7      <strong class="block font-medium mb-1">Description:</strong>
 8      <%= post.description %>
 9    </div>
10    <div>
11      <strong class="block font-medium mb-1">Category:</strong>
12      <%= post.category_id %>
13    </div>
14  </div>

• บรรทัด 4 <%= post.title %> — ชื่อบทความ · ครึ่งแรกของบทเราแก้บรรทัดนี้
• บรรทัด 12 <%= post.category_id %> — เลขหมวด · ครึ่งหลัง (N+1) แก้บรรทัดนี้
• dom_id post ได้ id เช่น post_31 (เรื่องของบท 131) · class="block font-medium mb-1" ฯลฯ คือคลาส Tailwind (บท 72) ที่ scaffold ใส่มาจัดหน้าตา — ข้ามได้ ไม่เกี่ยวกับบทนี้

เราจะเปลี่ยนบรรทัด 4 ทีละแบบ แล้วดู HTML ที่ได้ด้วย curl (โปรแกรมเปิดหน้าเว็บจากเทอร์มินัล โชว์ HTML เป็นข้อความ — เห็นของที่เบราว์เซอร์ได้รับจริง ก่อนเบราว์เซอร์จะแปลเป็นหน้าจอ · -s = เงียบ ๆ ไม่โชว์แถบความคืบหน้า) · HTML ทั้งหน้ายาวมาก ข้างล่างตัดมาเฉพาะสองบรรทัดถัดจากคำว่า Title: · ของคุณให้ไล่หาคำว่า Title: แบบเดียวกัน

แบบ ① <%= post.title %> — ของเดิม

$ curl -s localhost:3000/posts/31
…
    <strong class="block font-medium mb-1">Title:</strong>
    &lt;script&gt;alert(&#39;XSS!&#39;)&lt;/script&gt;
…

• < · > · ' — รหัสของ < · > · ' (บท 103) · เบราว์เซอร์วาดเป็นตัวอักษร ไม่ตีความเป็นแท็ก
• ผลบนจอ: ผู้ใช้เห็นข้อความ <script>alert('XSS!')</script> ครบทุกตัว · ไม่มีอะไรรัน

แบบ ② <%= raw post.title %>

แก้บรรทัด 4 เป็น <%= raw post.title %> แล้ว curl ใหม่:

$ curl -s localhost:3000/posts/31
…
    <strong class="block font-medium mb-1">Title:</strong>
    <script>alert('XSS!')</script>
…

<script> ตัวจริงหลุดเข้าไปในหน้าเว็บ · เปิด http://localhost:3000/posts/31 ในเบราว์เซอร์ → กล่อง alert "XSS!" เด้งขึ้นมา (กด OK ปิดได้) · (ผมยืนยันด้วย Chrome จริงแล้ว — และเปิดหน้ารวม /posts ก็เด้งเหมือนกัน เพราะใช้แม่พิมพ์เดียวกัน = ทุกคนที่เปิดหน้ารวมโดนหมด)

แบบ ③ <%= post.title.html_safe %>

แก้บรรทัด 4 เป็น <%= post.title.html_safe %> — ผลจริง:

    <strong class="block font-medium mb-1">Title:</strong>
    <script>alert('XSS!')</script>

เหมือนแบบ ② ทุกตัวอักษร · กล่อง alert เด้งเหมือนกัน (ยืนยันด้วย Chrome แล้ว) · เพราะในโค้ดของ Rails เอง raw คือ to_s.html_safe บรรทัดเดียว — สองคำนี้คือของชิ้นเดียวกัน คนละหน้าตา

แบบ ④ <%= sanitize post.title %>

<%= sanitize post.title %>

    <strong class="block font-medium mb-1">Title:</strong>
    alert('XSS!')

สรุปทั้ง 4 แบบ (ผลจริงทุกช่อง):

เทียบกับ React (บท 71): {post.title} ใน JSX ก็ escape ให้เองแบบเดียวกับ <%= %> · ถ้าอยากวาง HTML ดิบ React บังคับให้พิมพ์ชื่อยาว ๆ ว่า dangerouslySetInnerHTML — ตั้งชื่อให้ดูอันตรายโดยตั้งใจ · ฝั่ง Rails คำที่ทำหน้าที่นั้นคือ raw กับ html_safe ซึ่งชื่อไม่ได้ฟังดูอันตรายเลย เราจึงต้องจำเอง

sanitize — คัดแท็กตามรายชื่อที่อนุญาต

แล้วถ้าอยากให้ผู้ใช้ทำตัวหนา หรือใส่ลิงก์ได้ล่ะ? (เช่น คำอธิบายร้านที่มี ตัวหนา) · <%= %> จะ escape ทุกแท็ก ส่วน raw ปล่อยทุกแท็ก — sanitize คือทางกลาง: เก็บแท็กที่อยู่ในรายชื่อที่อนุญาต ถอดที่เหลือทิ้ง

ลองใน console (helper ใน console = กล่องเครื่องมือชุดเดียวกับที่ view ใช้ ยืมมาลองนอกหน้าเว็บได้) — ผลจริง:

wongnok-blog-all-in-one(dev):001> helper.sanitize('<b>อร่อยมาก</b>')
=> "<b>อร่อยมาก</b>"
wongnok-blog-all-in-one(dev):002> helper.sanitize('<script>alert(1)</script>สวัสดี')
=> "alert(1)สวัสดี"
wongnok-blog-all-in-one(dev):003> helper.sanitize('<a href="/posts" onclick="alert(1)">ร้านอื่น</a>')
=> "<a href=\"/posts\">ร้านอื่น</a>"

• บรรทัด 1 — <b> (ตัวหนา) อยู่ในรายชื่อ → ผ่านไปทั้งแท็ก
• บรรทัด 2 — <script> ไม่อยู่ในรายชื่อ → ถอดแท็กทิ้ง เหลือแต่ตัวหนังสือ (แบบเดียวกับแบบ ④ เมื่อกี้)
• บรรทัด 3 — แท็ก <a> (ลิงก์) ผ่าน และ href (ที่อยู่ลิงก์) ผ่าน · แต่ onclick="…" (คำสั่ง "กดแล้วรันโปรแกรมนี้") ถูกตัดออก · \" คือวิธีที่ console โชว์ " ที่อยู่ในข้อความ ไม่ต้องสนใจ

สไลด์หน้า 17 บอกว่า sanitize "ใช้กับ rich text (บ่าย)" — rich text คือช่องที่ผู้ใช้จัดตัวหนา ใส่ลิงก์ได้ เป็นเรื่องของ Day 3 ช่วงบ่าย (ยังไม่มาในชุดนี้) · วันนี้จำแค่ว่า: ไม่ต้องการ HTML จากผู้ใช้ = ใช้ <%= %> ธรรมดา · ต้องการจริง ๆ = sanitize · ไม่มีกรณีไหนที่ควร raw ข้อมูลจากผู้ใช้

กฎหนึ่งบรรทัด + หาคำอันตรายด้วยคำสั่งเดียว

ค่าเริ่มต้นของ Rails ปลอดภัย — อันตรายเกิดเมื่อเราตั้งใจพิมพ์ raw หรือ html_safe เอง (สไลด์หน้า 17) · แปลว่าเวลาตรวจโค้ด (ของเพื่อนหรือของ AI) ไม่ต้องไล่อ่านทุกบรรทัด — ค้นหาสองคำนี้ก่อน

ตอนนี้บรรทัด 4 ของ _post.html.erb ยังเป็น sanitize อยู่ · เปลี่ยนกลับเป็น <%= raw post.title %> สักครู่ แล้วค้นด้วย grep — ผลจริง:

$ grep -rn "raw\|html_safe" app/views
app/views/posts/_post.html.erb:4:    <%= raw post.title %>

• grep — โปรแกรมค้นคำในไฟล์ เหมือนกด Ctrl+F แต่ค้นทุกไฟล์ในโฟลเดอร์ทีเดียว
• -r — ค้นเข้าไปในโฟลเดอร์ย่อยทุกชั้น · -n — บอกเลขบรรทัด (เขียนติดกันเป็น -rn)
• "raw\|html_safe" — คำที่จะหา · \| แปลว่า "หรือ" → raw หรือ html_safe
• app/views — ค้นที่ไหน
• ผล ไฟล์:บรรทัด:ข้อความ — เจอที่ _post.html.erb บรรทัด 4 · (ตรงนี้เลขบรรทัดตรงจริง ไม่ต้องลบหนึ่ง เพราะ grep อ่านไฟล์ตรง ๆ ไม่ใช่ log)

คืนไฟล์เป็นของเดิมแล้วค้นอีกรอบ: git restore app/views/posts/_post.html.erb → grep -rn "raw\|html_safe" app/views → ไม่มีอะไรขึ้นเลย = ไม่เจอ = ดี

เจอแล้วทำอะไรต่อ — ถามคำถามเดียวตามสไลด์: "ข้อมูลตรงนี้มาจากไหน"

• มาจากผู้ใช้พิมพ์ (ชื่อบทความ · คอมเมนต์ · ชื่อหมวด) → ลบ raw/html_safe ทิ้ง ถ้าต้องการ HTML จริงใช้ sanitize
• เป็นข้อความที่เราเขียนเองในโค้ด ไม่มีอะไรจากผู้ใช้ปนเลย → ปลอดภัย แต่ส่วนใหญ่มี helper ที่ไม่ต้องใช้ html_safe อยู่แล้ว (เช่น tag.div ใน บท 124)

wongnok-blog-all-in-one(dev):001> Post.last.destroy
  Post Load (0.5ms)  SELECT "posts".* FROM "posts" ORDER BY "posts"."id" DESC LIMIT 1 /*application='WongnokBlogAllInOne'*/
  TRANSACTION (0.3ms)  BEGIN /*application='WongnokBlogAllInOne'*/
  Post Destroy (0.8ms)  DELETE FROM "posts" WHERE "posts"."id" = 31 /*application='WongnokBlogAllInOne'*/
  TRANSACTION (0.8ms)  COMMIT /*application='WongnokBlogAllInOne'*/
=>
#<Post:0x0000000125c6e0f0
 id: 31,
 title: "<script>alert('XSS!')</script>",
…

N+1 ใน view — ทำไมหายากกว่าที่เห็นในบท 114

บท 114 เราเจอ N+1 ในไฟล์ view ไฟล์เดียว ที่ @posts.each กับ post.user.name อยู่ติดกัน · ของจริงในโปรเจกต์มักไม่ง่ายขนาดนั้น เพราะ การวนลูป อยู่ใน index.html.erb แต่ของที่ไปตู้ไปซ่อนอยู่ในแม่พิมพ์ _post.html.erb อีกไฟล์หนึ่ง

สมมติเพื่อนในทีมเปิด PR (คำขอรวมโค้ด) หนึ่งอัน: "โชว์ชื่อหมวดแทนเลขหมวด" · ทั้ง PR มีแค่นี้ (ผลจริงจาก git diff):

--- a/app/views/posts/_post.html.erb
+++ b/app/views/posts/_post.html.erb
@@ -9,6 +9,6 @@
   </div>
   <div>
     <strong class="block font-medium mb-1">Category:</strong>
-    <%= post.category_id %>
+    <%= post.category.name %>
   </div>
 </div>

• บรรทัดที่ขึ้นต้นด้วย - = ของเดิมที่ถูกลบ · + = ของใหม่ที่ใส่แทน · บรรทัดที่ไม่มีเครื่องหมาย = ของรอบ ๆ ที่ไม่ได้เปลี่ยน โชว์ไว้ให้รู้ตำแหน่ง
• --- +++ = ชื่อไฟล์ · @@ -9,6 +9,6 @@ = "ตัดมาตั้งแต่บรรทัด 9 ยาว 6 บรรทัด" — ไม่ต้องสนใจ
• post.category_id = เลขหมวดบนแฟ้มบทความ (อ่านฟรี ไม่ไปตู้) · post.category.name = เดินไปลิ้นชัก categories เอาชื่อหมวด (บท 114: ของที่อยู่ลิ้นชักอื่น = ไปตู้)

คนตรวจ PR เห็นแค่นี้ · controller ไม่อยู่ใน diff เลย จึงไม่มีใครเห็นว่า controller เขียน @posts = Post.all ไม่มี includes · สไลด์หน้า 18 สรุปสามเหตุผลที่มันหายาก: คนเขียน controller กับ partial อาจเป็นคนละคน คนละ PR · เพิ่มช่องใหม่ใน partial วันหลัง = เพิ่ม N+1 ใหม่โดยไม่รู้ตัว · controller ไม่เปลี่ยน diff จึงดูไม่มีอะไร

ลองทำตาม PR นี้จริง: แก้บรรทัด 12 ของ _post.html.erb จาก post.category_id เป็น post.category.name แล้วรีเฟรชหน้า /posts

Started GET "/posts" for ::1 at 2026-11-07 10:46:02 +0700
Processing by PostsController#index as */*
  Rendering layout layouts/application.html.erb
  Rendering posts/index.html.erb within layouts/application
  Post Exists? (1.1ms)  SELECT 1 AS one FROM "posts" LIMIT 1 /*action='index',application='WongnokBlogAllInOne',controller='posts'*/
  ↳ app/views/posts/index.html.erb:15
  Post Load (1.1ms)  SELECT "posts".* FROM "posts" /*action='index',application='WongnokBlogAllInOne',controller='posts'*/
  ↳ app/views/posts/index.html.erb:16
  Category Load (1.7ms)  SELECT "categories".* FROM "categories" WHERE "categories"."id" = 1 LIMIT 1 /*action='index',application='WongnokBlogAllInOne',controller='posts'*/
  ↳ app/views/posts/_post.html.erb:13
  Rendered posts/_post.html.erb (Duration: 14.6ms | GC: 8.1ms)
  Category Load (0.9ms)  SELECT "categories".* FROM "categories" WHERE "categories"."id" = 2 LIMIT 1 /*action='index',application='WongnokBlogAllInOne',controller='posts'*/
  ↳ app/views/posts/_post.html.erb:13
  …  (id = 3, 4, 5 เหมือนกัน)
  CACHE Category Load (0.3ms)  SELECT "categories".* FROM "categories" WHERE "categories"."id" = 1 LIMIT 1
  ↳ app/views/posts/_post.html.erb:13
  …  (CACHE วน id 1–5 ไปเรื่อย ๆ อีก 24 ครั้ง)
  Rendered posts/index.html.erb within layouts/application (Duration: 53.5ms | GC: 17.1ms)
  Rendered layout layouts/application.html.erb (Duration: 54.5ms | GC: 17.1ms)
Completed 200 OK in 57ms (Views: 49.3ms | ActiveRecord: 6.2ms (32 queries, 25 cached) | GC: 17.5ms)

bullet — ผู้ช่วยที่ตะโกนบอกเอง

นับจาก log ได้ผลแน่นอน แต่ต้องตั้งใจดู · สไลด์หน้า 18 แนะนำให้ "ใส่ gem bullet ไว้ตั้งแต่วันแรก" — โปรเจกต์ของคอร์สติดตั้งมาให้แล้ว (ใน Gemfile และเปิดไว้ใน config/environments/development.rb) · bullet คอยดูระหว่างหน้าเว็บทำงาน ถ้าเห็นรูปแบบ N+1 มันบอกเราสองที่:

ที่ ① บนหน้าเว็บ — กล่องสีชมพูมุมซ้ายล่าง หัวข้อ Bullet Warnings · คลิกแล้วกางออก (ข้อความจริงจาก Chrome):

Bullet Warnings
user: tuwanon USE eager loading detected Post => [:category] Add to your query: .includes([:category])

ที่ ② ใน log/development.log ต่อท้ายใบสั่งนั้น (ผลจริง · ผมตัด path ยาว ๆ ข้างหน้า app/ ออกเป็น …/):

user: tuwanon
GET /posts
USE eager loading detected
  Post => [:category]
  Add to your query: .includes([:category])
Call stack
  …/app/views/posts/_post.html.erb:13:in '_app_views_posts__post_html_erb__…'
  …/app/views/posts/index.html.erb:18:in 'block in _app_views_posts_index_html_erb__…'
  …/app/views/posts/index.html.erb:16:in '_app_views_posts_index_html_erb__…'

• user: tuwanon — ชื่อผู้ใช้เครื่องของผม · ของคุณจะเป็นชื่อคุณ · GET /posts = หน้าไหน
• USE eager loading detected — "เจอที่ควรหยิบมาล่วงหน้า" (eager loading = includes · บท 114)
• Post => [:category] — ตอนวนบทความ มีคนเดินไปเอา category ทีละชิ้น
• Add to your query: .includes([:category]) — บอกวิธีแก้มาเลย ([:category] เขียนแบบรายการ ความหมายเดียวกับ includes(:category))
• Call stack — ไล่ว่าใครเรียกใคร · บรรทัดบนสุดคือต้นเหตุ _post.html.erb:13 (ลบหนึ่ง = 12) · ข้างล่างคือที่ที่เรียกแม่พิมพ์นั้น (index.html.erb:18 → บรรทัด 17 render post · :16 → บรรทัด 15 @posts.each)

(ป้ายตัวเลข ms เล็ก ๆ มุมซ้ายบนของหน้าเว็บคือ gem อีกตัวชื่อ rack-mini-profiler ที่ repo ติดมาด้วย — บทนี้ไม่ใช้ ปล่อยไว้ได้)

แก้ที่ controller ไม่ใช่ที่ view

ทำตามที่ bullet บอก — แก้ app/controllers/posts_controller.rb บรรทัดเดียว (ของเดิมจาก scaffold คือ @posts = Post.all) · แม่พิมพ์ไม่ต้องแตะเลย:

# app/controllers/posts_controller.rb — action index
  def index
    @posts = Post.includes(:category)
  end

includes(:category) = ใบเบิกที่เขียนต่อท้ายว่า "หยิบหมวดของทุกแผ่นมาใส่ตะกร้าด้วย" (บท 114) · ชื่อ :category ต้องตรงกับใน model (belongs_to :category) · รีเฟรช /posts — log ใหม่ (ผลจริง · ตัดบรรทัด Rendered posts/_post… 30 บรรทัดออก):

  Post Exists? (0.6ms)  SELECT 1 AS one FROM "posts" LIMIT 1 /*action='index',application='WongnokBlogAllInOne',controller='posts'*/
  ↳ app/views/posts/index.html.erb:15
  Post Load (0.6ms)  SELECT "posts".* FROM "posts" /*action='index',application='WongnokBlogAllInOne',controller='posts'*/
  ↳ app/views/posts/index.html.erb:16
  Category Load (0.7ms)  SELECT "categories".* FROM "categories" WHERE "categories"."id" IN (1, 2, 3, 4, 5) /*action='index',application='WongnokBlogAllInOne',controller='posts'*/
  ↳ app/views/posts/index.html.erb:16
…
Completed 200 OK in 23ms (Views: 18.3ms | ActiveRecord: 3.2ms (3 queries, 0 cached) | GC: 5.8ms)

• (32 queries, 25 cached) → (3 queries, 0 cached) · หน้าเว็บที่ได้หน้าตาเหมือนเดิม (ผมเทียบ HTML สองรอบแล้ว ต่างกันแค่รหัสกัน CSRF ที่สุ่มใหม่ทุกครั้งอยู่แล้ว กับกล่อง Bullet ที่หายไป)
• WHERE "categories"."id" IN (1, 2, 3, 4, 5) — เดินไปลิ้นชักหมวดรอบเดียว หยิบมาครบ 5 หมวด (IN = "ตัวใดตัวหนึ่งในวงเล็บ" · บท 114)
• ไม่มีบรรทัด ↳ ไหนชี้ _post.html.erb แล้ว · และกล่อง Bullet Warnings หายไป (ผมเช็คใน HTML แล้ว ไม่มี bullet-footer)
• ถ้ามีบทความ 3,000 ชิ้น ก็ยัง 3 query · จำนวนรอบไม่โตตามข้อมูลอีกต่อไป

เทียบกับ React/Next.js: คล้ายเวลา component ลูกแต่ละตัวยิง fetch ของตัวเองใน useEffect (บท 74) — รายการ 30 ชิ้นก็ยิง 30 ครั้ง · ทางแก้ก็หลักเดียวกัน: ให้ตัวแม่ดึงข้อมูลครบทีเดียว แล้วส่งลงไปให้ลูก · ฝั่ง Rails ตัวแม่คือ controller

ให้ AI ช่วย — แต่ตรวจด้วยของสองอย่างที่เพิ่งเรียน

สไลด์ Day 3 จะให้เราสั่ง AI เขียน view บ่อย ๆ (Lab บท 126) · AI เขียน post.category.name ในแม่พิมพ์โดยไม่ไปเติม includes ที่ controller ได้ง่ายมาก เพราะมันไม่เห็น log ของคุณ · ใส่ข้อห้ามไว้ใน prompt ตั้งแต่แรก (โครง 4 ส่วนจาก บท 121) เช่นท่อน "ห้าม" กับ "เกณฑ์ตรวจรับ":

ห้าม:
- ใช้ raw หรือ html_safe กับข้อมูลที่ผู้ใช้พิมพ์
- เรียก association ใน partial โดยไม่ includes ที่ controller
เกณฑ์ตรวจรับ:
- grep -rnw "raw\|html_safe" app ไม่เจออะไร
- หน้า /posts ไม่มี Bullet Warnings และ log ขึ้นไม่เกิน 3 queries

แล้วตรวจเองทุกครั้ง อย่าเชื่อคำว่า "เสร็จแล้ว" ของ AI:

1. รัน grep -rnw "raw\|html_safe" app · เจอ → ถาม "ข้อมูลตรงนี้มาจากไหน"
2. เปิดทุกหน้าที่ AI แก้ · ดูมุมซ้ายล่างว่ามี Bullet Warnings ไหม · ดู (N queries) ใน log
3. เจอปัญหา → แปะ log หรือคำเตือนของ bullet ให้ AI ดูตรง ๆ ได้ผลกว่าสั่งลอย ๆ ว่า "ทำให้เร็วขึ้น"

  Category Exists? (0.7ms)  SELECT 1 AS one FROM "categories" LIMIT 1 …
  Category Load (0.6ms)  SELECT "categories".* FROM "categories" …
  Post Load (0.6ms)  SELECT "posts".* FROM "posts" WHERE "posts"."category_id" = 1 …
  ↳ app/views/categories/_category.html.erb:13:in 'Enumerable#map'
  Post Load (0.7ms)  SELECT "posts".* FROM "posts" WHERE "posts"."category_id" = 2 …
  ↳ app/views/categories/_category.html.erb:13:in 'Enumerable#map'
  …  (category_id = 3, 4, 5 เหมือนกัน)
Completed 200 OK in 16ms (Views: 10.7ms | ActiveRecord: 4.4ms (7 queries, 0 cached) | GC: 0.2ms)

    @categories = Category.includes(:posts)

  Post Load (0.7ms)  SELECT "posts".* FROM "posts" WHERE "posts"."category_id" IN (1, 2, 3, 4, 5) …
Completed 200 OK in 12ms (Views: 7.6ms | ActiveRecord: 3.1ms (3 queries, 0 cached) | GC: 0.0ms)

ทดสอบความเข้าใจ

ถ้าเปิดสไลด์ดูประกอบ

อ้างอิง

• Rails Guides — Securing Rails Applications § Cross-Site Scripting (XSS) — อ่านถึงหัวข้อย่อย HTML/JavaScript Injection Countermeasures แล้วหยุด · ยืนยันว่า escape ตอนโชว์คือทางป้องกันหลัก
• Rails API — OutputSafetyHelper#raw — อ่านแค่ย่อหน้าเดียว ที่เตือนว่าไม่ควรใช้กับข้อมูลจากผู้ใช้
• Rails API — String#html_safe — ยืนยันว่ามัน "ทำเครื่องหมายว่าเชื่อถือได้" ไม่ได้ทำความสะอาดอะไร · อ่านสั้น ๆ
• Rails API — SanitizeHelper#sanitize — อ่านกล่อง Warning เรื่องการเพิ่มแท็กลง allowlist และตัวอย่าง option tags: · attributes:
• MDN — Cross-site scripting (XSS) — ภาพรวมฝั่งเบราว์เซอร์ · อ่านส่วนที่พูดถึง stored (persistent) XSS และ output encoding พอ
• Rails Guides — Active Record Query Interface § N + 1 Queries Problem — ทวนบท 114 · อ่านต่อถึง Solution to N + 1 Queries Problem แล้วหยุด
• GitHub — flyerhzm/bullet — อ่านแค่ส่วน Configuration ดูความหมายของ Bullet.rails_logger กับ Bullet.add_footer ที่ repo ของคอร์สเปิดไว้
• Rails Guides — Caching with Rails § SQL Caching — ที่มาของบรรทัด CACHE … Load · อ่านแค่ย่อหน้าแรก: ความจำนี้อยู่แค่ช่วงหนึ่ง request