进行 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>
// 提交表单数据后渲染对应的数据
function renderMessages() {
  let messageItems = "";
  for (const message of userMessages) {
    messageItems = `
      ${messageItems}
      
  • ${message.image}" alt="${message.text}">

    ${message.text}

  • `
    ; } userMessagesList.innerHTML = messageItems; }

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

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

  • 元素里面会包含图片和其他一些文本数据。

    现在我们设想一下,假如我们在textarea中输入如下的代码:

    进行 XSS 攻击 和 如何防御_第1张图片
    并且提交表单数据后,我们提交表单数据后,我们可以查看一下页面的列表元素:
    进行 XSS 攻击 和 如何防御_第2张图片

    我们可以看到页面没有报错和任何任何报警,所以注入的脚本代码实际上并没有执行。因为现代浏览器可以保护您免受这种非常基本形式的 XSS 攻击。通过 innerHTML“注入”的

    你可能感兴趣的:(JavaScript,前端,javascript,安全,跨站攻击)