Merge remote-tracking branch 'origin/main' into lv5

Author: MokeMoke13151105

src/content.ts

@@ -18,23 +18,26 @@ function isDisplayed(el: Element | null): boolean {
 // 複数の問題の「現在の値」をまとめて取得する
 function getCurrentValues() {
   // 問題1: テキストのチェック
-  const el1 = document.querySelector<HTMLElement>('[data-check]')
+  const el1 = document.querySelector<HTMLElement>('.reviewText2')
   const val1 = el1 ? (el1.textContent ?? '').trim() : ''
 
   // 問題2: 画像のsrcチェック
-  // data-check2属性を持つ画像のsrcを取得する
-  const el2 = document.querySelector('[data-check2]') as HTMLImageElement
-  // src属性そのもの(例: "img/star5.png")を取得。絶対パス化されるのを防ぐため getAttribute を推奨
+  const el2 = document.querySelector('#starIcon2 img') as HTMLImageElement
   const val2 = el2 ? (el2.getAttribute('src') ?? '') : ''
 
   // 問題3: 要素の表示状態チェック
-  const el3 = document.querySelector<HTMLElement>('[data-check3]')
+  const el3 = document.querySelector<HTMLElement>('.reviewBox1')
   const val3Visible = isDisplayed(el3)
 
+  // 問題4: 価格表示のテキスト
+  const el4 = document.querySelector<HTMLElement>('#discountMessage')
+  const val4 = el4 ? (el4.textContent ?? '').trim() : ''
+
   return {
     p1: val1,
     p2: val2,
-    p3Visible: val3Visible, 
+    p3Visible: val3Visible,
+    p4: val4,
   }
 }
 

src/sidepanel/App.tsx

@@ -9,6 +9,7 @@ const ANSWERS = {
   p1: "すばらしい。",
   p2: "./images/star5.png",
   p3Visible: false,
+  p4: "30%割引が適用されました！", 
 }
 
 function App() {
@@ -21,10 +22,11 @@ function App() {
   // イベントリスナー内で最新の step を参照するための Ref
   const stepRef = useRef(step)
   // 各ステップの初期値を保持するベースライン
-  const baselineRef = useRef<{ p1: string | null; p2: string | null; p3Visible: boolean | null }>({
+  const baselineRef = useRef<{ p1: string | null; p2: string | null; p3Visible: boolean | null; p4: string | null }>({
     p1: null,
     p2: null,
     p3Visible: null,
+    p4: null,
   })
 
   // state が変わったら ref も更新しておく
@@ -44,14 +46,11 @@ function App() {
 
         port.onMessage.addListener((msg) => {
           if (msg?.type === 'DOM_VALUE_UPDATE') {
-            const { p1, p2, p3Visible } = msg.values
+            const { p1, p2, p3Visible, p4 } = msg.values
             const currentStep = stepRef.current
 
             if (currentStep === 1) {
-              if (baselineRef.current.p1 === null) {
-                baselineRef.current.p1 = p1
-                return
-              }
+              if (baselineRef.current.p1 === null) { baselineRef.current.p1 = p1; return }
               if (p1 !== baselineRef.current.p1) {
                 const isCorrect = p1 === ANSWERS.p1
                 setResult({ ok: isCorrect, details: isCorrect ? `一致: "${p1}"` : `不一致: "${p1}"` })
@@ -60,16 +59,13 @@ function App() {
                     setStep(2)
                     setResult(null)
                     baselineRef.current.p2 = p2
-                  }, 2000)
+                  }, 4000)
                 }
               }
             }
 
             if (currentStep === 2) {
-              if (baselineRef.current.p2 === null) {
-                baselineRef.current.p2 = p2
-                return
-              }
+              if (baselineRef.current.p2 === null) { baselineRef.current.p2 = p2; return }
               if (p2 !== baselineRef.current.p2) {
                 const isCorrect = p2.includes(ANSWERS.p2)
                 setResult({ ok: isCorrect, details: isCorrect ? `一致: (${p2})` : `不一致: (${p2})` })
@@ -78,30 +74,36 @@ function App() {
                     setStep(3)
                     setResult(null)
                     baselineRef.current.p3Visible = p3Visible
-                  }, 2000)
+                  }, 4000)
                 }
               }
             }
 
-            // 問題3のロジック
             if (currentStep === 3) {
-              if (baselineRef.current.p3Visible === null) {
-                baselineRef.current.p3Visible = p3Visible
-                return
-              }
+              if (baselineRef.current.p3Visible === null) { baselineRef.current.p3Visible = p3Visible; return }
               if (p3Visible !== baselineRef.current.p3Visible) {
                 const isCorrect = p3Visible === ANSWERS.p3Visible
+                setResult({ ok: isCorrect, details: isCorrect ? `要素が非表示になりました` : `要素はまだ表示されています` })
+                if (isCorrect) { setTimeout(() => { setStep(4); setResult(null); baselineRef.current.p4 = p4 }, 4000) }
+              }
+            }
+
+            // 問題4のロジック
+            if (currentStep === 4) {
+              if (baselineRef.current.p4 === null) { baselineRef.current.p4 = p4; return }
+              if (p4 !== baselineRef.current.p4) {
+                const isCorrect = p4 === ANSWERS.p4
                 setResult({
                   ok: isCorrect,
-                  details: isCorrect ? `要素が非表示になりました` : `要素はまだ表示されています`
+                  details: isCorrect ? `割引が適用されました！` : `まだ割引が適用されていません。`
                 })
               }
             }
           }
         })
 
         port.onDisconnect.addListener(() => {
-          baselineRef.current = { p1: null, p2: null, p3Visible: null }
+          baselineRef.current = { p1: null, p2: null, p3Visible: null, p4: null }
           port = null
           setResult(null)
           setStep(1)
@@ -117,7 +119,7 @@ function App() {
       if (port) {
         try { port.disconnect() } catch {}
       }
-      baselineRef.current = { p1: null, p2: null, p3Visible: null }
+      baselineRef.current = { p1: null, p2: null, p3Visible: null, p4: null }
     }
   }, [])
 
@@ -144,18 +146,27 @@ function App() {
         </div>
       )}
 
-      {/* ステップ3の表示 */}
       {step === 3 && (
         <div>
           <h2>問題3</h2>
           <p>一つ目のレビューを、CSSを使って非表示にしてみよう！</p>
+          {result && <div className={result.ok ? "result-ok" : "result-ng"}><h3>判定: {result.ok ? '正解！' : '不正解'}</h3><p>{result.details}</p>{result.ok && <p>次の問題へ進みます...</p>}</div>}
+          {!result && <p className="hint">ヒント：DevToolsのスタイルパネルで <code>display: none;</code> を追加してみよう。</p>}
+        </div>
+      )}
+
+      {/* 問題4のUI */}
+      {step === 4 && (
+        <div>
+          <h2>問題4</h2>
+          <p>割引コードを盗んで、30%割引を適用させよう！</p>
           {result && (
             <div className={result.ok ? "result-ok" : "result-ng"}>
               <h3>判定: {result.ok ? '正解！' : '不正解'}</h3>
               <p>{result.details}</p>
             </div>
           )}
-          {!result && <p className="hint">ヒント：DevToolsのスタイルパネルで <code>display: none;</code> を追加してみよう。</p>}
+          {!result && <p className="hint">ヒント：sourcesに割引コードが書かれているかも</p>}
         </div>
       )}
     </div>

vulnerable-web/shopping/index.html

@@ -46,12 +46,12 @@ <h1 class="productName">
       <section class="reviewSection">
         <h2>レビュー</h2>
         <div class="reviewContainer">
-          <div class="reviewBox1" data-check3>
+          <div class="reviewBox1">
             <img src="./images/reviewIcon.png" class="reviewIcon" />
             <div class="reviewContent">
               <p class="username">Username</p>
               <div id="starIcon1"><img src="./images/star2.png"></div>
-              <p class="reviewText">
+              <p class="reviewText1">
                 ワイヤレスには対応しているものの、有線接続用のケーブルを取り外すことができず、非常に邪魔くさい。
                 音質も値段の割には悪い。ノイキャンは効いているかどうかわからないレベルであり、
                 電車内では普通にノイズが聞こえる。
@@ -62,8 +62,8 @@ <h2>レビュー</h2>
             <img src="./images/reviewIcon.png" class="reviewIcon" />
             <div class="reviewContent">
               <p class="username">Username</p>
-              <div id="starIcon2"><img src="./images/star1.png" data-check2></div>
-              <p class="reviewText" data-check>
+              <div id="starIcon2"><img src="./images/star1.png"></div>
+              <p class="reviewText2">
                 とにかくひどい。
               </p>
             </div>
@@ -88,6 +88,6 @@ <h2>レビュー</h2>
         ©2025 ut.code(); 当サイトのコンテンツはフィクションであり、実際の商品・会社とは一切関係ありません。
       </p>
     </footer>
-    <script src="/script.mjs"></script>
+    <script src="script.mjs"></script>
   </body>
 </html>

vulnerable-web/shopping/style.css

@@ -183,7 +183,11 @@ main {
   margin-bottom: 5px;
 }
 
-.reviewtext {
+.reviewText1 {
+  margin-top: 10px;
+  color: #555;
+}
+.reviewText2 {
   margin-top: 10px;
   color: #555;
 }