如何通过使用HTTP-Only Cookies来保护React应用免受XSS攻击

nano Dockerfile

FROM node:18.7.0-bullseye

RUN apt update -y \
    && apt upgrade -y \
    && apt install -y vim nano \
    && mkdir /app

WORKDIR /app

CMD [ "tail", "-f", "/dev/null" ]

docker build -f /path_to_your_dockerfile --tag jwt-tutorial-image .

Output
...
 => => writing image sha256:1cf8f3253e430cba962a1d205d5c919eb61ad106e2933e33644e0bc4e2cdc433                                    0.0s 
 => => naming to docker.io/library/jwt-tutorial-image   

docker run -d -p 3000:3000 -p 8080:8080 --name jwt-tutorial-container jwt-tutorial-image

docker exec -it jwt-tutorial-container /bin/bash

Output
root@d7e051c96368:/app# 

mkdir /app/jwt-storage-tutorial
cd /app/jwt-storage-tutorial

npx create-react-app front-end

Output
...

Success! Created front-end at /home/nodejs/jwt-storage-tutorial/front-end
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd front-end
  yarn start

Happy hacking!

npm install pm2 -g

Output
added 183 packages, and audited 184 packages in 2m
12 packages are looking for funding
  run `npm fund` for details
found 0 vulnerabilities -->

cd front-end
nano ecosystem.config.js

module.exports = {
  apps: [
    {
      name: 'front-end',
      cwd: '/app/jwt-storage-tutorial/front-end',
      script: 'npm',
      args: 'run start',
      env: {
        PORT: 3000
      },
    },
  ],
};

pm2 list

Output
┌────┬────────────────────┬──────────┬──────┬───────────┬──────────┬──────────┐
│ id │ name               │ mode     │ ↺    │ status    │ cpu      │ memory   │
└────┴────────────────────┴──────────┴──────┴───────────┴──────────┴──────────┘

pm2 delete all

pm2 start ecosystem.config.js

Output
┌────┬────────────────────┬──────────┬──────┬───────────┬──────────┬──────────┐
│ id │ name               │ mode     │ ↺    │ status    │ cpu      │ memory   │
├────┼────────────────────┼──────────┼──────┼───────────┼──────────┼──────────┤
│ 0  │ front-end          │ fork     │ 0    │ online    │ 0%       │ 33.6mb   │
└────┴────────────────────┴──────────┴──────┴───────────┴──────────┴──────────┘

npm install react-router-dom@5.2.0

Output
...

added 13 packages, and audited 1460 packages in 7s

205 packages are looking for funding
  run `npm fund` for details

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

mkdir src/components

nano src/components/SubscriberFeed.js

import React from 'react';

export default () => {
  return(
    <h2>Subscriber Feed</h2>
  );
}

nano src/App.js

import logo from './logo.svg';
import './App.css';

import { BrowserRouter, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

import logo from './logo.svg';
import './App.css';

import { BrowserRouter, Route, Switch } from 'react-router-dom';
import SubscriberFeed from "./components/SubscriberFeed";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

import logo from './logo.svg';
import './App.css';

import { BrowserRouter, Route, Switch } from 'react-router-dom';
import SubscriberFeed from "./components/SubscriberFeed";

function App() {
  return(
    <div className="App">
      <h1 className="App-header">
        JWT-Storage-Tutorial Application
      </h1>
    </div>
  );
}

export default App;

标签拥有一个className属性为App，其中包含一个<h1>标签，显示你的应用程序名称。

在<h1>标签下方，添加一个 BrowserRouter 组件，该组件使用 Switch 组件将包含 SubscriberFeed 组件的 Route 组件进行包装。

import logo from './logo.svg';
import './App.css';

import { BrowserRouter, Route, Switch } from 'react-router-dom';
import SubscriberFeed from "./components/SubscriberFeed";

function App() {
  return(
    <div className="App">
      <h1 className="App-header">
        JWT-Storage-Tutorial Application
      </h1>
      <BrowserRouter>
        <Switch>
          <Route path="/subscriber-feed">
            <SubscriberFeed />
          </Route>
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

这些新行允许您定义应用程序的路由。BrowserRouter组件封装了您定义的路径。Switch组件确保返回的路径是与用户导航到的路径匹配的第一条路由，而Route组件定义特定的路由名称。

最后，您将使用CSS为应用程序添加填充，以使标题和组件居中和漂亮。在最外层的<div>标签的className属性上添加一个包装器。

import logo from './logo.svg';
import './App.css';

import { BrowserRouter, Route, Switch } from 'react-router-dom';
import SubscriberFeed from "./components/SubscriberFeed";

function App() {
  return(
    <div className="App wrapper">
      <h1 className="App-header">
        JWT-Storage-Tutorial Application
      </h1>
      <BrowserRouter>
        <Switch>
          <Route path="/subscriber-feed">
            <SubscriberFeed />
          </Route>
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

保存并关闭App.js文件。

打开App.css文件。

nano src/App.css

你会在这个文件中看到现有的CSS。删除文件中的所有内容。

然后，添加下列代码来定义包装样式:

.wrapper {
    padding: 20px;
    text-align: center;
}

你将wrapper类的text-align属性设置为center来使应用程序中的文本居中。你还通过将padding属性设置为20px，为wrapper类添加了20像素的内边距。

保存并关闭App.css文件。

你可能会看到你的React首页更新了新的样式。导航到http://localhost:3000/subscriber-feed来查看订阅者动态，现在已经可见。

路由按预期工作，但所有访客都可以访问订阅者动态。为了确保订阅者动态仅对经过身份验证的用户可见，您需要为用户创建一个登录页面，让他们通过用户名和密码进行验证。

在你的组件目录中打开一个新的Login.js文件。

nano src/components/Login.js

将以下行添加到新文件中：

import React from 'react';

export default () => {
  return(
    <div className='login-wrapper'>
      <h1>Login</h1>
      <form>
        <label>
          <p>Username</p>
          <input type="text" />
        </label>
        <label>
          <p>Password</p>
          <input type="password" />
        </label>
        <div>
          <button type="submit">Submit</button>
        </div>
      </form>
    </div>
  );
}

你可以创建一个表单，其中包含一个 <h1> 标签作为标题、两个输入框（用户名和密码）以及一个提交按钮。你将表单放在一个 <div> 标签中，并给它一个类名为 login-wrapper，以便在 App.css 文件中进行样式设置。

保存并关闭文件。

打开项目根目录中的App.css文件，为您的登录组件设置样式。

nano src/App.css

将以下CSS行添加到login-wrapper类的样式中。

...

.login-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

你可以通过使用flex的display属性和align-items属性，将组件居中在页面上。然后，你将flex-direction设置为column，这将使元素在垂直的列中对齐。

保存并关闭文件。

最后，你将使用useState Hook将Login组件渲染在App.js中，并将令牌存储在内存中。打开App.js文件：

nano src/App.js

将突出显示的行添加到文件中。

import logo from './logo.svg';
import './App.css';

import { useState } from 'react'

import { BrowserRouter, Route, Switch } from 'react-router-dom';
import SubscriberFeed from "./components/SubscriberFeed";
import Login from './components/Login';

function App() {
  const [token, setToken] = useState();

  if (!token) {
    return <Login setToken={setToken} />
  }

  return(
    <div className="App wrapper">
      <h1 className="App-header">
        JWT-Storage-Tutorial Application
      </h1>
      <BrowserRouter>
        <Switch>
          <Route path="/subscriber-feed">
            <SubscriberFeed />
          </Route>
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

首先，你从 React 包中导入 useState 钩子。

您还将创建一个名为新令牌状态变量，以存储登录过程中获取的令牌信息。在步骤5中，您将通过使用浏览器存储来改进此设置，以持久化身份验证状态。在步骤7中，您将进一步加强持久化方法，通过使用HTTP-only cookie安全地存储身份验证状态。

你还要导入Login组件，如果token的值为假值，则显示登录页面。if语句声明，如果token为假值，则要求用户登录，如果他们没有通过身份验证。你将setToken函数作为prop传递给Login组件。

保存并关闭文件。

然后，刷新你的应用程序页面以加载新建的登录页面。由于目前尚未实现设置令牌的功能，应用程序只会显示登录页面。

在这个步骤中，您更新了您的应用程序，添加了一个登录页面和一个私密组件，这个组件在用户登录之前将受到未授权用户的保护。

接下来，您将使用NodeJS创建一个新的后端应用程序，并创建一个新的登录路由，在您的前端应用程序上调用身份验证令牌。

第四步 – 创建一个令牌API

在这一步中，您将为前一步设置的前端React应用程序创建一个Node服务器作为后端。您将使用Node服务器创建并提供一个API，该API在前端用户通过验证后返回一个身份验证令牌。在本步骤结束时，您的应用程序将具有一个工作的登录页面，仅在成功验证后才可用的私有资源以及通过API调用进行身份验证的后端服务器应用程序。

你将使用Express框架构建服务器，并使用cors包为所有路由启用跨域资源共享。这样，你就可以在没有CORS错误的情况下测试和开发你的应用程序。

创建并移动到一个名为后端的文件夹，用于存放你的Node项目。

mkdir /app/jwt-storage-tutorial/back-end
cd /app/jwt-storage-tutorial/back-end

在新的目录中，初始化节点项目。

npm init -y

init命令告诉npm命令行工具在运行该命令的目录中创建一个新的Node项目。-y标志使用交互式命令行工具在创建新项目时，对所有初始化问题使用默认值。以下是使用-y标志运行init命令的输出：

Output
Wrote to /home/nodejs/jwt-storage-tutorial/back-end/package.json:

{
  "name": "back-end",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

接下来，将express和cors模块安装在后端项目目录中。

npm install express cors

以下输出的某种变体将出现在终端上。

Output
added 59 packages, and audited 60 packages in 3s

7 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

新建一个index.js文件。

nano index.js

将以下代码添加到导入express模块并通过调用express()方法以及将结果存储在名为app的变量中来初始化一个新的Express应用程序的行。

const express = require('express');
const app = express();

接下来，使用高亮显示的代码行将 CORS 添加为应用程序的中间件。

const express = require('express');
const cors = require('cors');

const app = express();

app.use(cors());

你需要导入cors模块，然后使用use方法将其添加到app对象中。

然后将突出显示的行添加到定义处理程序的/login路径，以向登录的用户返回一个令牌。

const express = require('express');
const cors = require('cors');

const app = express();

app.use(cors());

app.use('/login', (req, res) => {
    res.send({
      token: "This is a secret token"
    });
});

你可以使用app.use()方法来为路由定义一个请求处理程序。这个路由将允许你从刚刚构建的前端应用中发送用户的用户名和密码进行认证。作为回应，你将提供用户的身份验证令牌，以便用户可以进行经过认证的后端应用调用。

app.use方法的首个参数是应用程序接受请求的路由。第二个参数是一个回调函数，详细说明如何处理应用程序接收到的请求。回调函数有两个参数：一个req参数包含请求数据，一个res参数包含响应数据。

最后，使用app.listen函数将服务器运行在8080端口上，并添加高亮的行代码。

const express = require('express');
const cors = require('cors');

const app = express();

app.use(cors());

app.use('/login', (req, res) => {
    res.send({
      token: "This is a secret token"
    });
});

app.listen(8080, () => console.log(`API is active on http://localhost:8080`));

保存并关闭文件。

要使用PM2运行您的后端应用程序，请创建一个新的backend/ecosystem.config.js文件。

nano ecosystem.config.js

将以下配置代码添加到新创建的后端 / ecosystem.config.js 文件中：

module.exports = {
  apps: [
    {
      name: 'back-end',
      cwd: '/app/jwt-storage-tutorial/back-end',
      script: 'node',
      args: 'index.js',
      watch: ['index.js']
    },
  ],
};

PM2将使用与前端应用类似的配置参数来管理后端应用。

当你在配置文件中将观察（watch）参数设置为每次对文件进行更改时自动重新加载应用程序。观察参数是一个有用的开发功能，它在代码更改时会在浏览器中更新结果。对于前端应用程序，你不需要观察参数，因为你使用了具有默认自动重新加载功能的react-scripts运行它。然而，你的后端应用程序将使用node运行时，它没有这个默认功能。

保存并关闭文件。

现在你可以使用pm2运行后端应用程序。

pm2 start ecosystem.config.js

你的输出将会是以下内容的某种变化：

Output
[PM2][WARN] Applications back-end not running, starting...
[PM2] App [back-end] launched (1 instances)
┌────┬────────────────────┬──────────┬──────┬───────────┬──────────┬──────────┐
│ id │ name               │ mode     │ ↺    │ status    │ cpu      │ memory   │
├────┼────────────────────┼──────────┼──────┼───────────┼──────────┼──────────┤
│ 2  │ back-end           │ fork     │ 0    │ online    │ 0%       │ 24.0mb   │
│ 0  │ front-end          │ fork     │ 9    │ online    │ 0%       │ 47.2mb   │
└────┴────────────────────┴──────────┴──────┴───────────┴──────────┴──────────┘

你将使用curl来评估你新创建的API端点是否正确地返回一个身份验证令牌。

curl localhost:8080/login

你应该看到下面的输出结果。

Output
{"token":"This is a secret token"}

现在你知道你的服务器登录路径按预期返回了令牌。

然后，您将修改前端登录组件以使用API。导航至相应的前端文件夹。

cd ..
cd front-end/src/components/

打开前端的Login.js文件。

nano Login.js

添加了突出显示的行：

import React, { useRef } from 'react';

export default () => {
  const emailRef = useRef();
  const passwordRef = useRef();

  return(
    <div className='login-wrapper'>
      <h1>Login</h1>
      <form>
        <label>
          <p>Username</p>
          <input type="text" ref={emailRef} />
        </label>
        <label>
          <p>Password</p>
          <input type="password" ref={passwordRef} />
        </label>
        <div>
          <button type="submit">Submit</button>
        </div>
      </form>
    </div>
  );
}           

你可以使用useRef钩子来跟踪电子邮件和密码输入字段的值。当在与useRef钩子绑定的输入字段中输入时，输入的值将在引用中更新，然后在按下提交按钮时将其发送到后端。

接下来，添加高亮显示的代码行以创建handleSubmit回调函数，以处理表单中按下提交按钮的情况。

import React, { useRef } from 'react';

async function loginUser(credentials) {
  return fetch('http://localhost:8080/login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(credentials)
  }).then(data => data.json())
}

export default ({ setToken }) => {
  const emailRef = useRef();
  const passwordRef = useRef();

  const handleSubmit = async (e) => {
    e.preventDefault();
    const token = await loginUser({
        username: emailRef.current.value,
        password: passwordRef.current.value
    })
    setToken(token)
  }

  return(
    <div className='login-wrapper'>
      <h1>Login</h1>
      <form onSubmit={handleSubmit}>
        <label>
          <p>Username</p>
          <input type="text" ref={emailRef} />
        </label>
        <label>
          <p>Password</p>
          <input type="password" ref={passwordRef} />
        </label>
        <div>
          <button type="submit">Submit</button>
        </div>
      </form>
    </div>
  );
}

在handleSubmit处理程序函数内部，您调用loginUser助手函数来向之前创建的API的登录路由发出fetch请求。在handleSubmit函数中对传入的事件调用preventDefault函数意味着不执行提交按钮的默认刷新功能，因此您的应用程序可以调用登录端点并处理用户登录所需的步骤。它还使用作为属性传递给Login组件的setter来设置token状态变量的值。

完成后保存并关闭文件。

当您在浏览器中检查 Web 应用程序时，您现在可以使用任意的用户名和密码进行登录。点击提交按钮，将被重定向到一个已登录的页面。如果您刷新页面，您的 React 应用程序将丢失令牌，并且您将被注销。

在接下来的步骤中，您将使用浏览器存储机制来保存在前端应用程序中收到的令牌。

步骤5 — 使用浏览器存储来储存令牌

如果用户能够在浏览器会话和页面刷新之间保持登录状态，将有助于提高用户体验。在这个步骤中，您将使用Window.localStorage属性来存储认证令牌，以实现持久的用户会话，即使用户关闭浏览器或刷新网页也不会丢失。对于现代Web应用程序而言，持续的用户会话可以减少应用程序处理的网络流量，因为用户不需要频繁使用相同网站的登录凭据。

浏览器存储包括两种不同但相似的存储类型：本地存储和会话存储。简而言之，会话存储在标签会话间保留数据，而本地存储在标签和浏览器会话间保留数据。要使用浏览器存储存储您的令牌，您将使用本地存储。

打开你的前端应用的App.js文件。

nano /app/jwt-storage-tutorial/front-end/src/App.js

开始整合浏览器存储时，请添加下面突出显示的代码行，其中定义了两个辅助函数（setToken 和 getToken），并使用新实现的函数来获取 token 变量：

import logo from './logo.svg';
import './App.css';

import { useState } from 'react'

import { BrowserRouter, Route, Switch } from 'react-router-dom';
import SubscriberFeed from "./components/SubscriberFeed";
import Login from './components/Login';

function setToken(userToken) {
  localStorage.setItem('token', JSON.stringify(userToken));
  window.location.reload(false)
}

function getToken() {
  const tokenString = localStorage.getItem('token');
  const userToken = JSON.parse(tokenString);
  return userToken?.token
}

function App() {
  let token = getToken()

  if (!token) {
    return <Login setToken={setToken} />
  }

  return(
    <div className="App wrapper">
      <h1 className="App-header">
        JWT-Storage-Tutorial Application
      </h1>
      <BrowserRouter>
        <Switch>
          <Route path="/subscriber-feed">
            <SubscriberFeed />
          </Route>
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;  

您创建两个辅助函数：setToken和getToken。在setToken函数内部，您使用localStorage的setItem函数将用户输入参数userToken映射到名为token的键。您还将使用window.location的reload函数刷新页面，以便您的应用程序可以在浏览器存储中找到新设置的token，并重新渲染应用程序。

在getToken内部，你将使用localStorage的getItem函数来检查是否存在token键的任何值，然后将其返回。你将替换App()函数中的定义变量，以使用getToken函数。

每次用户访问您的网站时，前端将检查浏览器存储中是否存在身份验证令牌，并尝试使用已存在的令牌验证用户，而不是要求他们登录。

保存并关闭文件，然后刷新应用程序。您应该能够现在登录应用程序，刷新网页，而无需再次登录。

在这一步骤中，您使用浏览器存储实现了令牌持久化。您将在下一部分中利用基于浏览器存储的令牌认证系统。

第六步 – 利用XSS攻击窃取浏览器存储

在这一步中，您将对当前应用程序执行一次分阶段的跨站脚本攻击（也称为XSS攻击），该攻击将展示在使用浏览器存储来持久保存密钥信息时存在的安全漏洞。这种攻击将以URL链接的形式呈现，当被点击时，会将受害者引导到您的网络应用程序，并向应用程序注入经过精心设计的代码。这种注入可能会诱使用户与之互动，从而允许恶意代理人窃取受害者浏览器上本地存储的内容。

跨站脚本攻击是现代最常见的网络攻击之一。攻击者通常将恶意脚本注入浏览器，以在可信环境中实现代码执行。攻击者经常利用网络钓鱼技术，通过与恶意构造的链接（如垃圾邮件中的链接）进行交互，诱使用户牺牲其浏览器存储的内容。

XSS攻击对于试图窃取毫无防备的受害者浏览器存储内容的攻击者来说特别感兴趣，因为与该域关联的任何文档上运行的JavaScript代码完全可以访问该域的浏览器存储。如果攻击者能够在用户浏览器上执行特定网页文档的JavaScript代码，则可以窃取用户浏览器存储（包括本地和会话）中与该文档相关联的网域的内容。

为了教学目的，你会有意地让你的应用程序容易受到跨站脚本攻击，通过创建一个名为XSSHelper的组件，可以通过URL查询参数注入代码进入其中。然后，你将通过构建一个恶意的URL来利用这个漏洞。当用户在浏览器中导航到该URL并点击被注入到网页中的可疑链接时，该恶意的URL将访问并暴露已登录用户本地存储中的内容。

在前端应用程序的组件目录中打开一个名为XSSHelper.js的新组件。

nano /app/jwt-storage-tutorial/front-end/src/components/XSSHelper.js

将以下代码添加到新文件中。

import React from 'react';
import { useLocation } from 'react-router-dom';

export default (props) => {
  const search = useLocation().search;
  const code = new URLSearchParams(search).get('code');


  return(
    <h2>XSS Helper Active</h2>
  );
}

您创建了一个新的功能组件，该组件导入了useLocation钩子，并通过useLocation钩子的search属性访问了代码查询参数。您返回一个包含消息的<h2>标签，以说明XSSHelper组件是活动的。

URLSearchParams这个JavaScript函数提供了一些辅助方法，比如用于与搜索字符串进行交互的获取器。

现在将着重标记的行添加到代码中，以引入并使用 useEffect 钩子来记录查询参数的值。

import React, { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

export default (props) => {
  const search = useLocation().search;
  const code = new URLSearchParams(search).get('code');

  useEffect(() => {
    console.log(code)
  })

  return(
    <h2>XSS Helper Active</h2>
  );
}

保存并关闭文件。

接下来，当用户导航到你的应用程序的 xss-helper 路由时，你将修改你的 App.js 文件以返回组件。

打开App.js文件。

nano /app/jwt-storage-tutorial/front-end/src/App.js

将下面的代码添加到import部分，将XSSHelper组件作为一个路由添加进去：

import logo from './logo.svg';
import './App.css';

import { useState } from 'react'

import { BrowserRouter, Route, Switch } from 'react-router-dom';
import SubscriberFeed from "./components/SubscriberFeed";
import Login from './components/Login';
import XSSHelper from './components/XSSHelper'

function setToken(userToken) {
  localStorage.setItem('token', JSON.stringify(userToken));
  window.location.reload(false)
}

function getToken() {
  const tokenString = localStorage.getItem('token');
  const userToken = JSON.parse(tokenString);
  return userToken?.token
}

function App() {
  let token = getToken()

  if (!token) {
    return <Login setToken={setToken} />
  }

  return(
    <div className="App wrapper">
      <h1 className="App-header">
        JWT-Storage-Tutorial Application
      </h1>
      <BrowserRouter>
        <Switch>
          <Route path="/subscriber-feed">
            <SubscriberFeed />
          </Route>
          <Route path="/xss-helper">
            <XSSHelper />
          </Route>
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;  

保存并关闭文件。

请在浏览器中导航至localhost:3000/xss-helper?code=’在此处插入代码’。确保您已登录该应用程序，否则您将无法访问XSSHelper组件。

点击左键并按下“检查”按钮。然后导航到控制台部分。在控制台日志中，你会看到“在此处插入代码”。

你现在知道了你可以将URL查询参数传递给你的组件。

接下来，您将使用dangerouslySetInnerHTML属性在网页文档上设置传递到组件中的查询参数的值。该组件会将代码URL查询参数的值注入到网页上的一个div组件中。

再次打开XSSHelper文件。

nano XSSHelper.js

添加以下线条：

import React, {useEffect} from 'react';
import { useLocation } from 'react-router-dom';

export default (props) => {
  const search = useLocation().search;
  const code = new URLSearchParams(search).get('code');

  useEffect(() => {
    console.log(code)
  })

  return(
    <>
      <h2>XSS Helper Active</h2>
      <div dangerouslySetInnerHTML={{__html: code}} />
    </>
  );
}

为了避免在使用React片段时产生多个碎片化的JSX返回结果（从语法上来说是非法的），你可以把要返回的元素用空的JSX标签（<> … </>）包裹起来。

保存并关闭文件。

现在你可以将恶意构建的代码注入到你的组件中，在网页上执行代码。

你知道将发送到xss-helper路由的代码查询参数的值将直接嵌入到你的应用程序文档中。你可以将代码查询参数的值设置为一个带有<a>标签的链接，使用href属性将自定义的JavaScript代码直接传递到浏览器。

在浏览器中输入以下URL进行导航：

localhost:3000/xss-helper?code=<a href="javascript:alert(`You have been pwned`);">Click Me!</a>

在上述URL中，您可以创建一个查询参数的XSS载荷，以一个名为“点击我！” 的链接形式显示在网页上。当用户点击链接时，链接会告诉浏览器执行您编写的JavaScript代码。该代码使用alert函数创建一个弹出窗口，显示消息“您已被黑客入侵”。

接下来，在您的浏览器中输入以下网址：

localhost:3000/xss-helper?code=<a href="javascript:alert(`Your token object is ${localStorage.getItem('token')}. It has been sent to a malicious server >:)`);">Click Me!</a>

对于这个页面来说，通过URL查询参数脚本注入，攻击者可以访问浏览器存储内容，并使用JavaScript代码读取localStorage中的令牌值。

只有在登录应用程序后，令牌才会存在，这样您恶意构建的URL才能显示本地存储中存储的令牌。当您点击网页上的”点我！”链接时，您将收到一个弹出消息，表示您的令牌已被窃取。

在这一步中，您使用了众多攻击向量之一来实现代码执行。恶意攻击者利用一个毫不知情的用户的认证令牌，可以冒充用户进入您的网络应用程序，以访问特权站点资源。通过这些测试，您现在知道将诸如认证令牌之类的秘密信息存储在浏览器存储中是一种不安全的做法。

接下来，您将使用一种替代方法来存储机密信息，该方法将无法被运行在文档上的脚本访问，并且对于这种类型的跨站脚本攻击是免疫的。

第七步 – 使用仅限HTTP的Cookie来减轻浏览器存储XSS漏洞的风险。

在这个步骤中，您将使用仅限HTTP的Cookie来减轻在之前的步骤中发现和利用的XSS漏洞。

HTTP cookies是存储在浏览器中的键值对形式的信息片段。它们经常用于跟踪、个性化或会话管理。

JavaScript无法通过Document.cookie属性访问HTTP-only Cookie。 这样可以防止通过恶意代码注入进行的XSS攻击，以窃取用户信息。 您可以使用Set-Cookie头在服务器端为经过身份验证的客户端设置Cookie，在客户端对服务器的每个请求中都可用，然后服务器可以使用它来检查用户的身份验证状态。 您将使用Express中的cookie-parser中间件来处理此操作，而不是设置头文件。

为了实现基于安全的HTTP-only cookie的令牌存储，您需要更新以下文件：

• The back-end index.js file will be modified to implement the login route so that it sets a cookie upon successful authentication. The back-end will also need two new routes: one for checking the authentication status of a user and one for logging out a user.
• The front-end Login.js and App.js files will be modified to use the new routes from the back-end.

这些修改将在你的客户端和服务器代码中实现登录、注销和身份验证状态功能。

移动到后端目录并安装cookie-parser软件包，该软件包允许您在Express应用程序中设置和读取cookie。

cd /app/jwt-storage-tutorial/back-end
npm install cookie-parser

您将看到以下输出的一种变体：

Output
...
added 2 packages, and audited 62 packages in 1s

7 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities...

接下来，在你的后端应用程序中打开index.js文件。

nano /app/jwt-storage-tutorial/back-end/index.js

将以下突出显示的代码添加到app中，使用require方法导入新安装的cookie-parser包，并将其作为中间件使用：

const express = require('express');
const cors = require('cors');

const cookieParser = require('cookie-parser')

const app = express();

app.use(cors());
app.use(cookieParser())

app.post('/login', (req, res) => {
    res.send({
      token: "This is a secret token"
    });
});

app.listen(8080, () => console.log('API active on http://localhost:8080'));

你还需要配置CORS中间件以绕过开发目的的CORS限制。在同一个文件中，添加如下标明的代码行：

const express = require('express');
const cors = require('cors');

const cookieParser = require('cookie-parser')

const app = express();

let corsOptions = {
  origin: 'http://localhost:3000',
  credentials: true,
}

app.use(cors(corsOptions));
app.use(cookieParser())

app.post('/login', (req, res) => {
    res.send({
      token: "This is a secret token"
    });
});

app.listen(8080, () => console.log('API active on http://localhost:8080'));

你可以在corsOptions对象的origin选项下设置Access-Control-Allow-Origin CORS头部。这个origin选项应该设置为你的前端发送API请求的域名。你还需要将credentials参数设置为true，告诉前端在每个API请求中发送授权令牌的cookie。origin选项的值指定了接受来自哪些域的访问控制数据，比如cookie，用于后端处理。

最后，将corsOptions的配置对象传递给cors中间件对象。

接下来，您将使用cookie-parser中间件在路由处理程序的响应对象上提供的cookie()方法设置用户的cookie令牌。将app.use(‘/login’, (req, res)部分中的行替换为突出显示的行：

const express = require('express');
const cors = require('cors');

const cookieParser = require('cookie-parser')

const app = express();

let corsOptions = {
  origin: 'http://localhost:3000',
  credentials: true,
}

app.use(cors(corsOptions));
app.use(cookieParser())

app.use('/login', (req, res) => {
    res.cookie("token", "this is a secret token", {
      httpOnly: true,
      maxAge: 1000 * 60 * 60 * 24 * 14, // 14 Day Age,
      domain: "localhost",
      sameSite: 'Lax',
    }).send({
      authenticated: true,
      message: "Authentication Successful."});
});

app.listen(8080, () => console.log('API active on http://localhost:8080'));

在上面的代码块中，您使用键为token，值为this is a secret token来设置了一个cookie。httpOnly配置选项设置了httpOnly属性，以便该cookie对文档上运行的JavaScript不可访问。

您设置了maxAge属性，使得cookie在14天后过期。14天后，cookie将会过期，浏览器将需要一个新的身份验证cookie。因此，用户需要使用他们的用户名和密码再次登录。

为了确保客户端浏览器不因跨域资源共享（CORS）或其他安全协议问题而拒绝接受您的Cookie，需要设置sameSite和domain属性。

既然你已经有了登录的路径，你现在需要一个退出的路径。请添加以下突出显示的代码来设置退出的方法：

const express = require('express');
const cors = require('cors');

const cookieParser = require('cookie-parser')

const app = express();

let corsOptions = {
  origin: 'http://localhost:3000',
  credentials: true,
}

app.use(cors(corsOptions));
app.use(cookieParser())

app.use('/login', (req, res) => {
    res.cookie("token", "this is a secret token", {
      httpOnly: true,
      maxAge: 1000 * 60 * 60 * 24 * 14, // 14 Day Age,
      domain: "localhost",
      sameSite: 'Lax',
    }).send({
      authenticated: true,
      message: "Authentication Successful."});
});

app.use('/logout', (req, res) => {
  res.cookie("token", null, {
    httpOnly: true,
    maxAge: 1000 * 60 * 60 * 24 * 14, // 14 Day Age,
    domain: "localhost",
    sameSite: 'Lax',
  }).send({
    authenticated: false,
    message: "Logout Successful."
  });
});

app.listen(8080, () => console.log('API active on http://localhost:8080'));

退出方法类似于登录路由。退出方法将通过将令牌 cookie 设置为 null 来删除用户存储的令牌。然后，它会通知用户已成功退出登录。

最后，添加上面标出的代码行，实现一个认证状态路由，让用户客户端可以检查用户是否已登录并允许访问私有资源。

const express = require('express');
const cors = require('cors');

const cookieParser = require('cookie-parser')

const app = express();

let corsOptions = {
  origin: 'http://localhost:3000',
  credentials: true,
}

app.use(cors(corsOptions));
app.use(cookieParser())

app.use('/login', (req, res) => {
    res.cookie("token", "this is a secret token", {
      httpOnly: true,
      maxAge: 1000 * 60 * 60 * 24 * 14, // 14 Day Age,
      domain: "localhost",
      sameSite: 'Lax',
    }).send({
      authenticated: true,
      message: "Authentication Successful."});
});

app.use('/logout', (req, res) => {
  res.cookie("token", null, {
    httpOnly: true,
    maxAge: 1000 * 60 * 60 * 24 * 14, // 14 Day Age,
    domain: "localhost",
    sameSite: 'Lax',
  }).send({
    authenticated: false,
    message: "Logout Successful."
  });
});

app.use('/auth-status', (req, res) => {
  console.log(req.cookies)

  if (req.cookies?.token === "this is a secret token") {
    res.send({isAuthenticated: true})
  } else {
    res.send({isAuthenticated: false})
  }
})

app.listen(8080, () => console.log('API active on http://localhost:8080'));

您的 auth-status 路由会检查是否存在与用户身份验证令牌的预期值匹配的令牌 cookie。然后，它会回应一个布尔值来指示用户是否已经通过身份验证。

当完成时，请保存并关闭文件。您已在后端进行了必要的更改，以使您的前端能够通过后端API跟踪用户的认证状态。

接下来，您将进行必要的前端更改，以实现基于HTTP的仅Cookie存储的令牌功能。

前往前端目录并打开Login.js文件。

cd ..
cd front-end/src/components/
nano Login.js

请将高亮的行添加到您的登录组件中的loginUser函数中进行修改：

...

async function loginUser(credentials) {
  return fetch('http://localhost:8080/login', {
    method: 'POST',
    credentials: 'include',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(credentials)
  }).then(data => data.json())
}

...            

你可以将你的fetch请求的credentials header设置为“include”，这样就会告诉loginUser函数在发送到已在后端修改过的登录路径的API调用时，发送任何可能设置为cookie的凭据。

接下来，您将从登录组件中移除setToken输入属性以及将其在handleSubmit回调末尾的使用，因为您不再将令牌保留在内存中。

在handlesubmit函数结束时，您还需要触发一次刷新，以便在单击登录按钮后刷新应用程序，并通过客户端应用程序识别新设置的令牌cookie。添加以下突出显示的行：

...
  const handleSubmit = async (e) => {
    e.preventDefault();
    const token = await loginUser({
        username: emailRef.current.value,
        password: passwordRef.current.value
    })
    window.location.reload(false);
  }
...

你的Login.js文件现在应该看起来像这样：

import React, { useRef } from 'react';

async function loginUser(credentials) {
  return fetch('http://localhost:8080/login', {
    method: 'POST',
    credentials: 'include',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(credentials)
  }).then(data => data.json())
}

export default () => {
  const emailRef = useRef();
  const passwordRef = useRef();

  const handleSubmit = async (e) => {
    e.preventDefault();
    const token = await loginUser({
        username: emailRef.current.value,
        password: passwordRef.current.value
    })
    window.location.reload(false);
  }

  return(
    <div className='login-wrapper'>
      <h1>Login</h1>
      <form onSubmit={handleSubmit}>
        <label>
          <p>Username</p>
          <input type="text" ref={emailRef} />
        </label>
        <label>
          <p>Password</p>
          <input type="password" ref={passwordRef} />
        </label>
        <div>
          <button type="submit">Submit</button>
        </div>
      </form>
    </div>
  );
}

保存并关闭文件。

由于您不再将身份验证令牌保存在内存中，因此当您需要确定用户是否应该登录或访问私有资产时，无法检查是否存在身份验证令牌。

为了进行这些更改，请打开你的前端App.js文件。

cd ..
nano App.js

从React包中导入useState hook，并初始化一个新的经过身份验证的状态变量，以及用于反映用户认证状态的setter：

import logo from './logo.svg';
import './App.css';

import { useState } from 'react'

...

function App() {
  let [authenticated, setAuthenticated] = useState(false);

  if (!token) {
    return <Login setToken={setToken} />
  }

  return(
    <div className="App wrapper">
      <h1 className="App-header">
        JWT-Storage-Tutorial Application
      </h1>
      <BrowserRouter>
        <Switch>
          <Route path="/subscriber-feed">
            <SubscriberFeed />
          </Route>
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

useState钩子将通过向后端API发送请求来检查用户的身份验证状态，该API能够判断前端客户端是否持有有效的身份验证令牌作为cookie。

接下来，删除setToken和getToken函数，token变量以及登录组件的条件渲染部分。然后，使用下面的突出显示的代码行创建两个新函数，分别命名为getAuthStatus和isAuthenticated。

import logo from './logo.svg';
import './App.css';

import { useState } from 'react'

import { BrowserRouter, Route, Switch } from 'react-router-dom';
import SubscriberFeed from "./components/SubscriberFeed";
import Login from './components/Login';

function App() {
  let [authenticated, setAuthenticated] = useState(false);

  async function getAuthStatus() {
    return fetch('http://localhost:8080/auth-status', {
      method: 'GET',
      credentials: 'include',
      headers: {
        'Content-Type': 'application/json'
      },
    }).then(data => data.json())
  }

  async function isAuthenticated() {
    const authStatus = await getAuthStatus();
    setAuthenticated(authStatus.isAuthenticated);
  }

  return(
    <div className="App wrapper">
      <h1 className="App-header">
        JWT-Storage-Tutorial Application
      </h1>
      <BrowserRouter>
        <Switch>
          <Route path="/subscriber-feed">
            <SubscriberFeed />
          </Route>
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;    

getAuthStatus函数将向后端应用程序的auth-status路由发出GET请求，以获取用户的身份验证状态，具体取决于用户是否使用有效的身份验证令牌cookie发送请求。

通过将凭据选项的值设置为包括，fetch函数将发送浏览器为用户客户端可能存储的任何凭据，如cookies。isAuthenticated函数将调用getAuthStatus函数，并将您的应用程序的认证状态设置为反映用户认证状态的布尔值。

接下来，您将使用下面标记的行导入useEffect钩子。

import logo from './logo.svg';
import './App.css';

import { useState, useEffect } from 'react'

import { BrowserRouter, Route, Switch } from 'react-router-dom';
import SubscriberFeed from "./components/SubscriberFeed";
import Login from './components/Login';

function App() {
  let [authenticated, setAuthenticated] = useState(false);

  async function getAuthStatus() {
    return fetch('http://localhost:8080/auth-status', {
      method: 'GET',
      credentials: 'include',
      headers: {
        'Content-Type': 'application/json'
      },
    }).then(data => data.json())
  }

  async function isAuthenticated() {
    const authStatus = await getAuthStatus();
    setAuthenticated(authStatus.isAuthenticated)
  }

  useEffect(() => {
    isAuthenticated();
  }, [])

...

这个修改将在useEffect hook中调用登录路由来检查身份验证状态。在useEffect hook中包含一个空的依赖数组可以帮助避免应用程序中的内存泄漏。

在应用主页上有一个条件渲染登录组件的方式，只需要添加下面突出的代码行：

...

function App() {
  let [authenticated, setAuthenticated] = useState(false);
  let [loading, setLoading] = useState(true)

  async function getAuthStatus() {
    await setLoading(true);
    return fetch('http://localhost:8080/auth-status', {
      method: 'GET',
      credentials: 'include',
      headers: {
        'Content-Type': 'application/json'
      },
    }).then(data => data.json())
  }

  async function isAuthenticated() {
    const authStatus = await getAuthStatus();
    await setAuthenticated(authStatus.isAuthenticated);
    await setLoading(false)
  }

  useEffect(() => {
    isAuthenticated();
  }, [])

  return (
    <>
      {!loading && (
        <>
          {!authenticated && <Login />}

          {authenticated && (
            <div className="App wrapper">
              <h1 className="App-header">
                JWT-Storage-Tutorial Application
              </h1>
              <BrowserRouter>
                <Switch>
                  <Route path="/subscriber-feed">
                    <SubscriberFeed />
                  </Route>
                  <Route path="/xss-helper">
                    <XSSHelper />
                  </Route>
                </Switch>
              </BrowserRouter>
            </div>
          )}
        </>
      )}
    </>
  );
}

export default App;

如果认证的变量设置为false，你的应用将渲染登录组件。否则，应用的主页和其所有的路由，包括私有页面，将会渲染。

你添加了一个新的加载状态变量，以避免在完成到你的后端应用程序的认证状态路由的调用之前渲染任何内容。因为认证状态变量最初为false，客户端会假定用户尚未登录，直到认证状态路由的API调用完成并更新认证状态变量。

接下来，你将创建一个logoutUser函数，在后端API上调用你的登出路由。将以下行添加到文件中：

import logo from './logo.svg';
import './App.css';

import { useState, useEffect } from 'react';

import { BrowserRouter, Route, Switch } from 'react-router-dom';
import SubscriberFeed from "./components/SubscriberFeed";
import Login from './components/Login';
import XSSHelper from './components/XSSHelper'

function App() {
  let [authenticated, setAuthenticated] = useState(false);
  let [loading, setLoading] = useState(true)

  async function getAuthStatus() {
    await setLoading(true);
    return fetch('http://localhost:8080/auth-status', {
      method: 'GET',
      credentials: 'include',
      headers: {
        'Content-Type': 'application/json'
      },
    }).then(data => data.json())
  }

  async function isAuthenticated() {
    const authStatus = await getAuthStatus();
    await setAuthenticated(authStatus.isAuthenticated);
    await setLoading(false);
  }

  async function logoutUser() {
    await fetch('http://localhost:8080/logout', {
      method: 'POST',
      credentials: 'include',
      headers: {
        'Content-Type': 'application/json'
      },
    })
    isAuthenticated();
  }

  useEffect(() => {
    isAuthenticated();
  }, [])

  return (
    <>
      {!loading && (
        <>
          {!authenticated && <Login />}

          {authenticated && (
            <div className="App wrapper">
              <h1 className="App-header">
                JWT-Storage-Tutorial Application
              </h1>
              <button onClick={logoutUser}>Logout</button>
              <BrowserRouter>
                <Switch>
                  <Route path="/subscriber-feed">
                    <SubscriberFeed />
                  </Route>
                  <Route path="/xss-helper">
                    <XSSHelper />
                  </Route>
                </Switch>
              </BrowserRouter>
            </div>
          )}
        </>
      )}
    </>
  );
}

export default App;

你将会创建一个“登出”按钮来登出用户，将其onClick属性设置为一个回调函数，该函数会调用后端API上的登出路线。该路线将会通过设置一个set-cookie头来将客户端的令牌cookie设置为null，从而有效地将您的前端应用程序的身份验证状态设为虚假值。

在退出回调函数结束时，你还需要调用isAuthenticated函数，通过将authenticated状态变量设置为false来更新应用程序的状态，以反映用户的未认证状态。

完成后保存并关闭文件。

现在你可以测试基于 HTTP-only Cookie 的令牌存储系统。刷新网页应用程序以实施刚刚所做的修改。

然后，清除浏览器存储中的内容，以删除任何残留的令牌。接下来，请导航到与第四步中恶意制作的相同的 URL，以查看攻击者是否仍然可以通过注入的 JavaScript 来窃取您的令牌。

localhost:3000/xss-helper?code=<a href="javascript:alert(`Your token object is ${localStorage.getItem('token')}. It has been sent to a malicious server >:)`);">Click Me!</a>

您可能需要重新登录您的网站以查看XSS Helper激活线。在点击名为“点击我！”的链接后，您应该看到以下弹窗，提示“您的令牌对象为null”。

注入的JavaScript无法找到令牌对象，因此弹出窗口显示空值。关闭弹出消息。

你现在可以通过点击“注销”按钮来退出应用。

在这个步骤中，你通过从使用浏览器存储进行身份验证令牌持久化切换为使用仅限HTTP的Cookie来提高了应用程序的安全性。

结论

在本教程中，您使用Docker容器创建了一个具有用户登录功能的React和Node网页应用程序。您实施了一个使用易受攻击的令牌存储方法的身份验证系统，以测试您网站的安全性。然后，您使用反射式XSS攻击有效载荷利用了这种方法，从而使您能够评估使用浏览器存储身份验证Cookie时存在的漏洞。最后，您通过设置一个使用仅HTTP的Cookie而不是浏览器存储来存储身份验证令牌的身份验证系统，来减轻初始实现中的XSS漏洞。现在，您拥有一个基于HTTP-only Cookie的前端和后端应用程序，具有身份验证令牌系统。

为了提升应用程序认证过程的安全性和易用性，你可以整合第三方认证工具，比如PassportJS或者像DigitalOcean的OAuth API这样的OAuth API。关于OAuth框架的更多信息，请参考《OAuth 2简介》。