XSS攻击和防御

最新推荐文章于 2024-09-30 21:52:51 发布

零零柒c

最新推荐文章于 2024-09-30 21:52:51 发布

阅读量286

点赞数

分类专栏：网络安全文章标签：安全 xss node.js

本文链接：https://blog.csdn.net/qq_45448359/article/details/114854393

版权

网络安全专栏收录该内容

6 篇文章 0 订阅

订阅专栏

XSS攻击和防御

XSS：Cross Site Scripting 跨站脚本攻击

存储型XSS

恶意用户提交了恶意内容到服务器
服务器没有识别，保存了恶意内容到数据库
正常用户访问服务器
服务器在不知情的情况下，给予了之前的恶意内容，让正常用户遭到攻击

反射型

恶意用户分享了一个正常网站的链接，链接中带有恶意内容
正常用户点击了该链接
服务器在不知情的情况，把链接的恶意内容读取了出来，放进了页面中，让正常用户遭到攻击

DOM型

恶意用户通过任何方式，向服务器中注入了一些dom元素，从而影响了服务器的dom结构
普通用户访问时，运行的是服务器的正常js代码

xss的防御可以通过一个插件库 xss
安装
npm i xss

文档xsshttps://www.npmjs.com/package/xss

这个插件可以自动过滤一些关键词代码等防止xss攻击

简单的配置测试

服务端代码

const express = require("express");
const http = require("http");
const path = require("path");
const xss = require("xss");
// express
const app = express();
const server = http.createServer(app);
app.use(express.static(path.resolve(__dirname, "public")));

app.use(express.json());
app.use(express.urlencoded());
const myxss = new xss.FilterXSS({
  onTagAttr(tag, name, value, isWhiteAttr) {
    if (name === "style") {
      return `style="${value}"`;
    }
  },
});
app.use((req, res, next) => {
  for (const key in req.body) {
    const value = req.body[key];
    req.body[key] = myxss.process(value);
  }
  next();
});

const articles = [];
app.post("/api/article/add", (req, res) => {
  articles.push(req.body.content);
  console.log(articles);
  res.send({
    code: 0,
    msg: "",
    data: "ok",
  });
});

app.get("/articles", (req, res) => {
  res.render("articles.ejs", {
    articles,
    redirect: req.query.redirect,
  });
});

// 监听端口
server.listen(5008, () => {
  console.log("server listening on 5008");
});

客户端代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <a href="/articles">文章列表</a>
    <h1>发布文章</h1>
    <textarea id="txtArticle" cols="30" rows="10"></textarea>
    <button>发布</button>
    <script>
      const txt = document.getElementById("txtArticle");
      document.querySelector("button").onclick = function () {
        fetch("/api/article/add", {
          method: "POST",
          headers: {
            "content-type": "application/json",
          },
          body: JSON.stringify({
            content: txt.value,
          }),
        })
          .then((resp) => resp.json())
          .then((resp) => {
            console.log(resp);
          });
      };
    </script>
  </body>
</html>