进行 XSS 攻击 和 如何防御

跨站脚本攻击（XSS 攻击）是 Web 开发中最危险的攻击之一。以下是它们的工作原理以及防御方法。

XSS 攻击

跨站脚本攻击就是在另一个用户的计算机上运行带有恶意的 JS 代码。假如我们的程序没有对这些恶意的脚本进行防御的话，他们就会由我们的页面注入到我们的服务器数据库中，从而其他用户在访问我们的网站是就会收到这些脚本的攻击。接下来我们来看看这些恶意代码是何时注入的。

XSS 攻击的例子

首先我们先看一下如下的代码：

<section id="user-input">
  <form>
    <div class="form-control">
      <label for="user-message">Your Messagelabel>
      <textarea id="user-message" name="user-message">textarea>
    div>
    <div class="form-control">
      <label for="message-image">Message Imagelabel>
      <input type="text" id="message-image" name="message-image" />
    div>
    <button type="submit">Send Messagebutton>
  form>
section>
<section id="user-messages">
  <ul>ul>
section>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// 提交表单数据后渲染对应的数据
function renderMessages() {
  let messageItems = "";
  for (const message of userMessages) {
    messageItems = `
      ${messageItems}
      

        

          ${message.image}" alt="${message.text}">
        
        
${message.text}
      
    `;
  }

  userMessagesList.innerHTML = messageItems;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

上述例子中我们只是采用了静态页面来呈现XSS攻击，即没有服务器的支持，所以我们只能自己攻击自己。

上述的例子中我们可以看到用户当表单添加消息后最终使用innerHtml进行页面元素的渲染。这样我们的页面最后渲染出的