web 安全 XSS 攻击 url 参数

一、不安全的原因

直接使用了 url 参数，并且渲染出了 html，使得攻击脚本能够在浏览器运行，而造成的不安全。属于 xss 的 反射型。

二、express + ejs

express 框架
ejs 模板渲染
url 传递不安全的参数

三、安装依赖

sh 复制代码

pnpm add express ejs

四、定义模板

主页模板

ejs 复制代码

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM - XSS - Jimmy</title>
</head>
<body>
  <%- title %>
  <a href="/about?param=<script>alert('this is xss')</script>">go about</a>
</body>
</html>

模拟时 a 标签 href 属性跳转到 about，并且携带参数是一个 script 标签。

about 模板

ejs 复制代码

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM - XSS - Jimmy</title>
</head>
<body>
  <%- xss %>
</body>
</html>

模板中 <%- xss %> 直接渲染 xss 变量。

五、不安全的 url

xml 复制代码

https://example.com?param=<script>alert("this is xss script")</script>

不安全的 url 中 param 是不安全的字符串脚本。

六、express 渲染页面

主页
about

ts 复制代码

import express from 'express'

const app = express()
app.set('view engine', 'ejs')


app.get('/', (req, res) => {
  res.render('index', { title: 'Home' })
})

app.get('/about', (req, res) => {
  res.render('about', { xss: req.query.param }) // 直接使用不安全的 param
  //res.render('about', { xss: encodeURIComponent(req.query.param) }) // 使用 encodeURIComponent进行编码
})

app.listen(3000, () => {
  console.log('Server is running on port 3000')
})

七、效果

直接使用 req.query.param 的会将 script 脚本直接注入模板中，然后返回给浏览器渲染。此时就渲染了不安全的 script 脚本，造成 xss 攻击。

八、解决办法

保持不信任前端传递的数据，并且对相应的 url 进行处理。
因为是 url 的参数，所以可以直接使用 encodeUrlParam 来进行转码，也可以使用可信赖的第三方包。
使用正则匹配自己的将 url 进行转码

九、具有转义的第三方安全部包

he
validate
DOMPurify
xss-filters

十、手动定义正则

ts 复制代码

function htmlEncode(input) {
  return input
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;');
}

const originalString = '<script>alert("XSS")</script>';
const escapedString = htmlEncode(originalString);

console.log(escapedString);
// 输出: &lt;script&gt;alert("XSS")&lt;/script&gt;

十一、小结

文本针对此 url 情况使用 express 与 ejs 模板引擎进行模拟，以及对象的解决办法。后端服务器 不信任 任何来自前端的内容。此处以本地模拟 url 为例，注入了一个可运行的 js 脚本，被渲染到 html 内部，当用户每次访问此页面的时候，都会执行 script 标签中的内容。url 脚本是 XSS 中一个最常见的示例。也是 web 开发中常见和最应该注意安全地方。