手把手发起 XSS 攻击 + 如何防御

手把手发起 XSS 攻击 + 如何防御

本文内容听译自 Youtube 视频：Running a XSS Attack + How to defend 并编写完善。

原作者：Maximilian Schwarzmüller

前言

---

如果你是一个 Web 开发者，那么你自然希望创建出安全的 Web 应用。跨站脚本攻击(Cross-Site Scripting Attack，简写为XSS)是现代 Web 应用中最大的威胁之一。因此很重要的一点就是你所编写的代码不易于被 XSS 攻击，而你也需要对什么是 XSS 攻击、在你的应用中哪里有潜在的安全漏洞有一个基本的了解。这就是在本期视频中我们将详细探索的内容。

这里有一个非常简易的 Web 应用代码，只有三个文件，而且只在浏览器里运行。想要发起 XSS 攻击的话还需要一个服务器，不过我也会展示如何基于此代码发起一个攻击，这也是我使用这个简易示例的原因。

基本界面

我们可以发送以一些文本和一个图片构成的信息，这些信息会进而在下方依次简单地渲染出来。很容易想到，这个应用不可能只是在浏览器上运行，而是应该将文本和图片 URL 传输并储存到服务器的数据库里。没错，绝大多数网站就是这样做的。

比如一个用户可以购买商品，那么就会发起一个请求发送给服务器，来储存这一次购买信息。

再比如，有一个博客网站，你写了一篇博客并发表出去，那么就会被储存在数据库中，其它用户就能够访问到。

再比如，有一个公共论坛，用户可以相互交流，那么任何人发送消息，都会被存储到服务器数据库里，其它用户通过各种设备访问论坛的时候就会加载这些信息，从而展示在用户面前。

Web 应用的运作模式就是这样对吧。我们这里的这个应用也是这样，填写的信息也会被储存在数据库中。

发起攻击！

---

什么是 XSS 攻击

XSS 攻击指的是在我们用户使用的设备上执行恶意的 Javascript 代码。

简单的攻击策略

蹲点

我们首先通过页面审查，来到源代码标签，看到使整个网站运作起来的代码。

有的时候源代码会被压缩，从而很难读，不过最终依然可以读到。相关方法的介绍请查看我的其它视频。这里的代码其实就是 app.js 文件中的源码。

如下面代码所示，在用户提交时，输入的信息会进行校验，然后添加到 userMessages 数组中。

function formSubmitHandler(event) {
  event.preventDefault();
  const userMessageInput = event.target.querySelector('textarea');
  const messageImageInput = event.target.querySelector('input');
  const userMessage = userMessageInput.value;
  const imageUrl = messageImageInput.value;

  if (
    !userMessage ||
    !imageUrl ||
    userMessage.trim().length === 0 ||
    imageUrl.trim().length === 0
  ) {
    alert('Please insert a valid message and image.');
    return;
  }

  userMessages.push({
    text: userMessage,
    image: imageUrl,
  });

  userMessageInput.value = '';
  messageImageInput.value = '';

  renderMessages();
}

如果是现实环境，信息就会发送到服务器，存储到数据库，在页面加载时获取。

无论是现在这种傻乎乎的加入数组，还是从服务器获取，得到内容后，在下面这段代码里就会进行渲染。简单的渲染方式就是使用一个循环，并且最终构建出这样一串字符串，然后添加到

元素的 innerHTML 中。

function renderMessages() {
  let messageItems = '';
  for (const message of userMessages) {
    messageItems = `
      ${messageItems}
      

        

          
        
        
${message.text}
      
    `;
  }

  userMessagesList.innerHTML = messageItems;
}

攻击

你能想到的其中一个简易的模式，应该是在 Your Message 一栏写入