docs: update week1 guide docs (#14)

Cnily03 · web-flow · commit 8c4e4be6d691 · 2024-09-23T04:21:33.000+08:00
diff --git a/docs/guide/2024/index.md b/docs/guide/2024/index.md
@@ -89,7 +89,11 @@ NewStar CTF 2024 是由来自 13 所高校的战队联合发起的新生入门
 
 ### 协办单位<Text class='desc-text' fontSize='16px' fontWeight='500' content='（以下排名不分先后）' />
 
+- 中国矿业大学计算机科学与技术学院
+- 中国矿业大学信息化建设与管理处
+- 中国矿业大学开源协会
 - 中国矿业大学计算机学院科学技术协会
+- 东北大学秦皇岛分校网络空间安全创新实验室
 - 东北大学秦皇岛分校计算机与通信工程学院
 - 浙江师范大学网络安全协会
 - 浙江师范大学高等数学协会
diff --git a/docs/guide/2024/week1.md b/docs/guide/2024/week1.md
@@ -0,0 +1,84 @@
+---
+titleTemplate: ':title | 参考文档 - NewStar CTF 2024'
+---
+<script setup>
+import Container from '@/components/docs/Container.vue'
+</script>
+
+# Week 1
+
+本周的题目相对基础，主要通过考查的形式敦促大家配置基本环境、熟悉基础知识，为后续的题目做好准备。
+
+如果你在做题时遇到了一些困难，可以阅读这里的内容，或许能够给你一些启发。
+
+## Pwn
+
+本周的 Pwn 考查一些工具的基本使用，可以阅读 [Pwn 环境配置](/learn/configure-pwn)，并熟悉其中提到的工具。
+
+对于快速入门和解题样例，可以阅读 [Pwn 二进制安全 - 快速入门](/learn/pwn)。
+
+## Web
+
+### Pangbai 过家家（1）
+
+<Container type='info'>
+
+在做本题前，建议先完成题目：**Week1/Web/headach3**
+
+</Container>
+
+浏览器的开发者工具是个好东西，浏览器插件 HackBar 也是个好东西，另外你可能需要 BurpSuite、Yakit、curl 等发送 HTTP 请求的工具。
+
+<Container type='tip'>
+
+有关 Web 前端包括相关 Web 标准在内的知识，[MDN](https://developer.mozilla.org/zh-CN/) 非常齐全且易懂。
+
+</Container>
+
+这题考察的是 HTTP 报文的内容，你可能需要先了解这些内容：
+
+- 什么是 Method、Header、请求体、响应体、状态码
+- Cookie 是什么？他有什么作用和特性？
+- User-Agent 的作用是什么？格式又是怎样的？
+
+Header 中有各种各样的 Content-Type，每一种 Content-Type 所要求的请求体的格式可能是不一样的，你也需要了解其不同。
+
+另外，Header 中的某些字段也用于「防盗链」，服务器检查请求来自哪里，如果不在白名单内就不给返回或返回其它内容，所以有时候在其他网站引用像 QQ 空间的图片会看到类似「图片无法显示」的内容。
+
+JWT 在网页中经常用于存放一个数据<span data-desc>（例如你的登录凭据等）</span>，并被签名。只有知道签名所用到的 secret 值，才能够签名和验证签名正不正确。对于 JWT，分享一个好网站：[JWT.IO](https://jwt.io/).
+
+<Container type='quote'>
+
+Level 6 有什么用，还不是被神之右手所打败
+
+</Container>
+
+### 谢谢皮蛋🥚
+
+<Container type='info'>
+
+本题所需要的前期知识储备较多，如果你从未了解和接触过数据库和 SQL 语句，你可能需要花费一定的时间快速了解并尝试。
+
+</Container>
+
+本题考察的是 SQL 注入的知识点。
+
+做本题前你需要去了解一下这些内容：
+
+- 什么是数据库，什么是 MySQL
+- 一些 SQL 语法，如最常用的 SELECT 这些
+- SQL 注入的原理
+
+找一些 SQL 注入的技巧，比如最简单的引号，联合注入需要的 `UNION`、`ORDER BY` 等。
+
+当你实现 SQL 注入后，一般我们需要进行信息搜集，看看当前数据库名称是什么，有哪些表，表里面有哪些列，表里面一共有多少个元素，等等。
+
+你可以尝试自己搭建环境来熟悉 MySQL 和 SQL 语句。
+
+## Misc
+
+### WhereIsFlag
+
+题目考查的是一些基本的 Linux 命令和知识，你可以先自己通过 WSL 等虚拟机中自行练习 Linux 使用技能。
+
+题目中仅是模拟 Linux 命令，并不完全和你的 Linux 终端有一样效果。
diff --git a/docs/guide/2024/week1/web.md b/docs/guide/2024/week1/web.md
diff --git a/docs/learn/configure-pwn.md b/docs/learn/configure-pwn.md
@@ -9,12 +9,12 @@ titleTemplate: ':title | 快速入门 - NewStar CTF'
 ## 获取 IDE
 
 ::: tip
-一般只获取一个 IDE 即可，Pycharm 是专为 Python 开发的 IDE，VSCode 是通用的 IDE，可用于多种语言。
+一般只获取一个 IDE 即可，PyCharm 是专为 Python 开发的 IDE，VSCode 是通用的 IDE，可用于多种语言。
 :::
 
 点击左下角菜单按钮，搜索 Software，进入 Ubuntu 软件商店。
 
-若需安装 VSCode，则搜索「VSCode」下载即可。若需安装 Pycharm，搜索「Pycharm」，下载 Community 版本。
+若需安装 VSCode，则搜索「VSCode」下载即可。若需安装 PyCharm，搜索「PyCharm」，下载 Community 版本。
 
 ## 配置 root 密码
 
diff --git a/docs/learn/pwn.md b/docs/learn/pwn.md
@@ -12,12 +12,9 @@ import 'element-plus/es/components/tag/style/css'
 
 ## 0xFF. Pwn 是干什么的？好吃🐎？
 
-<Container type='tip'>
-Pwn 是一个黑客语法的俚语词，是指攻破设备或者系统。发音类似「砰」，对黑客而言，这就是成功实施黑客攻击的声音——「砰」的一声，被「黑」的电脑或手机就被你操纵了。
-<div style="display: inline-block; width: 100%; text-align: right;">——百度百科</div>
-</Container>
+Pwn 是由 own 引申而来的，它表示玩家处于胜利的优势。在黑客语法的俚语中，Pwn 是指攻破设备或者系统，发音类似「砰」。对黑客而言，利用一些漏洞成功实施黑客攻击，获取到服务器的权限并操纵，那么，This server just got pwned！
 
-Pwn 需要的不仅是基本的 C 语言、汇编语言以及逆向功底，还有程序运行相关的知识。
+Pwn 需要的不仅是基本的 C 语言、汇编语言以及逆向功底，还有程序运行相关的知识。因此，你也可以选择先在逆向（Reverse）方向深造，当有一定了解后再来学习 Pwn 便会轻便许多。
 
 ## 0x00. 解决 Pwn 题目的基本流程
 
@@ -43,7 +40,7 @@ Pwn 需要的不仅是基本的 C 语言、汇编语言以及逆向功底，还
 下载传送门：[IDA Pro 8.3](https://down.52pojie.cn/Tools/Disassemblers/IDA_Pro_v8.3_Portable.zip)
 :::
 
-对于 Pwn 环境搭建，可参考文章：[Pwn 22.04 环境搭建保姆级教程](https://blog.csdn.net/j284886202/article/details/134931709)。
+对于 Pwn 环境搭建，可参考 [Pwn 环境搭建](/learn/configure-pwn)，或 [Pwn 22.04 环境搭建保姆级教程](https://blog.csdn.net/j284886202/article/details/134931709)。
 
 除此之外还建议在 Ubuntu 装个趁手的代码编辑器，如 [VSCode](https://code.visualstudio.com/).
 
@@ -58,35 +55,39 @@ Pwn 需要的不仅是基本的 C 语言、汇编语言以及逆向功底，还
 
 首先前置知识有基础的 C 语言、汇编、ELF 程序的加载运行知识。
 
-前置 C 语言知识：
+**前置 C 语言知识：**
 
 - 程序结构、基础语法
-- 数据类型、变量、常量 以及 变量作用域
-- 运算符
+- 数据类型、变量、常量以及变量作用域
 - `if` `switch` 分支语句、`for` `while` `do while` 循环
 - 函数和变量生命周期
-- 数组与指针、函数指针
-- 字符串
-- 结构体
+- 数组、字符串、结构体
+- 指针、函数指针
+- 指针的运算、解指针操作，以及与数组、字符串等常见类型的关系
+- 基本类型<span data-desc>（如 `int` `long long` `char` 和指针等）</span>的类型大小
 - 输入输出
 - 文件读写
 - 强制类型转换
+- 一个字段在结构体中的偏移
+- 常见不安全函数的特性<span data-desc>（如 `scanf` `gets` `read` `memcpy` 等）</span>
+- 堆栈<span data-desc>（指的是程序运行中的堆和栈）</span>等底层数据结构
 
-前置汇编知识：
+**前置汇编知识：**
 
 - 寄存器
-- x64 汇编基础语法
+- x86_64 汇编的阅读和简单的编写
+- 其他架构<span data-desc>（如 Arm、Risc-v）</span>汇编的阅读能力
 - 内存寻址
 - 函数调用以及栈帧变化
 - 中断
 
-ELF 相关知识：
+**ELF 相关知识：**
 
 - ELF 文件的结构：ELF每个段的作用、保护等
 - 程序的加载、动态链接、静态链接
-- ELF 程序的保护（Canary、PIE、RELRO、NX）
+- ELF 程序的保护<span data-desc>（如 Canary、PIE、RELRO、NX）</span>
 
-Pwn 知识：
+**Pwn 知识：**
 
 - ret2text/ret2backdoor
 - 整数溢出
@@ -103,7 +104,7 @@ Pwn 知识：
 
 ## 0x03. Pwn 基础
 
-### x64 汇编部分
+### x86_64 汇编部分
 
 #### 寄存器
 
diff --git a/docs/learn/qa.md b/docs/learn/qa.md
@@ -14,7 +14,26 @@ import QACard from '@/components/docs/QACard.vue'
 刚入门，我该怎么学？
 </template>
 <template v-slot:answer>
-先看看入门低门槛题目熟悉一下，然后选择一个自己喜欢的方向，随后细看这个方向需要的一些基础。大多数仅作了解即可，题目遇到了再细看。
+
+先看看入门低门槛题目<span data-desc>（参见 [写在前面](/learn/)）</span>熟悉一下，然后选择一个自己喜欢的方向，随后细看这个方向需要的一些基础。大多数仅作了解即可，题目遇到了再细看。
+</template>
+</QACard>
+
+<QACard>
+<template v-slot:question>
+不是计算机或信息（网络）安全的专业，可以学吗？
+</template>
+<template v-slot:answer>
+可以的。难度是会有一点的。但安全的领域很广泛，其中涉及的知识也并不只有计算机相关专业能发挥优势，并且对于大多数计算机专业的同学来说，CTF 也是比较新的形式。
+</template>
+</QACard>
+
+<QACard>
+<template v-slot:question>
+很吃专业能力吗？
+</template>
+<template v-slot:answer>
+是，但又不完全是。专业能力是必要的，但不是唯一的，大多数人都是从零基础逐渐培养的。且诸如密码学、信息搜集、社会工程学等，解题和应急响应时需要的技巧和心理素质等，这些能力有时比专业知识更重要，它们无法从网络和教材中习得，只能在长期实践中逐渐培养。
 </template>
 </QACard>
 
@@ -50,6 +69,7 @@ import QACard from '@/components/docs/QACard.vue'
 怎么选方向？
 </template>
 <template v-slot:answer>
+
 看自己喜好。下面这些建议可供参考：
 
 - Crypto：密码学，对数学感兴趣、有 OI/ACM 基础的同学相对容易入门
diff --git a/theme-config.yml b/theme-config.yml
@@ -54,11 +54,10 @@ sidebar:
   '/guide/2024/':
     - text: 赛事信息
       link: /guide/2024/
-    - text: Week 1
-      collapsed: false
+    - text: 解题参考
       items:
-        - text: Web
-          link: /guide/2024/week1/web
+        - text: Week 1
+          link: /guide/2024/week1
 
   '/wp/2024/':
     - text: Week 1
diff --git a/theme/components/docs/Container.vue b/theme/components/docs/Container.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 withDefaults(
     defineProps<{
-        type: "info" | "tip" | "warning" | "danger";
+        type: "info" | "tip" | "warning" | "danger" | "quote";
         title?: string;
     }>(),
     {
diff --git a/theme/components/docs/QACard.vue b/theme/components/docs/QACard.vue
@@ -7,22 +7,43 @@ import { ElCard } from "element-plus";
     <p>
         <ElCard class="qa-card" shadow="never">
             <template #header>
-                <div class="card-header"><span class="front-text">Q</span><slot name="question" /></div>
+                <div class="qa-question"><slot name="question" /></div>
             </template>
-            <span class="front-text">A</span><slot name="answer" />
+            <div class="qa-answer"><slot name="answer" /></div>
         </ElCard>
     </p>
 </template>
 
+<style lang="scss">
+.qa-card {
+    p,
+    ul {
+        margin-bottom: 0;
+        &:first-child {
+            margin-top: 0;
+        }
+    }
+}
+</style>
+
 <style lang="scss" scoped>
 .qa-card {
     --el-card-padding: 15px;
 }
-.front-text {
+.qa-question::before,
+.qa-answer::before {
     font-size: 1.5em;
     font-weight: bold;
     float: left;
     margin-right: 10px;
     line-height: 1;
 }
+
+.qa-question::before {
+    content: "Q";
+}
+
+.qa-answer::before {
+    content: "A";
+}
 </style>
diff --git a/theme/styles/custom-block.scss b/theme/styles/custom-block.scss
@@ -54,6 +54,14 @@
         @include paragraph;
         @include code-color(var(--block-danger), var(--block-bg-danger));
     }
+
+    &.quote {
+        @include basic-block;
+        background-color: var(--block-bg-quote);
+        border-left: 5px solid var(--block-quote);
+        @include paragraph;
+        @include code-color(var(--block-quote), var(--block-bg-quote));
+    }
 }
 
 .vp-doc .custom-block {
@@ -67,19 +75,23 @@
     --block-info: #409eff;
     --block-warning: #e6a23c;
     --block-danger: #f56c6c;
+    --block-quote: #747d8c;
     --block-bg-tip: #{rgba(#67c23a, 0.1)};
     --block-bg-info: #{rgba(#409eff, 0.1)};
     --block-bg-warning: #{rgba(#e6a23c, 0.1)};
     --block-bg-danger: #{rgba(#f56c6c, 0.1)};
+    --block-bg-quote: #{rgba(#747d8c, 0.1)};
 }
 
 .dark {
     --block-tip: #67c23a;
     --block-info: #409eff;
     --block-warning: #e6a23c;
     --block-danger: #f56c6c;
+    --block-quote: #747d8c;
     --block-bg-tip: #{rgba(#67c23a, 0.1)};
     --block-bg-info: #{rgba(#409eff, 0.1)};
     --block-bg-warning: #{rgba(#e6a23c, 0.1)};
     --block-bg-danger: #{rgba(#f56c6c, 0.1)};
+    --block-bg-quote: #{rgba(#747d8c, 0.1)};
 }
diff --git a/theme/tweak.scss b/theme/tweak.scss
@@ -4,3 +4,7 @@
 .el-message__content {
     line-height: 1.5;
 }
+
+.vp-doc :not(pre) > code {
+    line-height: 1;
+}

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`<script setup lang="ts">`
`2`	`2`	`withDefaults(`
`3`	`3`	`defineProps<{`
`4`		`- type: "info" \| "tip" \| "warning" \| "danger";`
	`4`	`+ type: "info" \| "tip" \| "warning" \| "danger" \| "quote";`
`5`	`5`	`title?: string;`
`6`	`6`	`}>(),`
`7`	`7`	`{`