【愚公系列】《Web应用安全》005-Visual Studio Code编辑器的使用

💎【行业认证·权威头衔】

✔ 华为云天团核心成员:特约编辑/云享专家/开发者专家/产品云测专家

✔ 开发者社区全满贯:CSDN博客&商业化双料专家/阿里云签约作者/腾讯云内容共创官/掘金&亚马逊&51CTO顶级博主

✔ 技术生态共建先锋:横跨鸿蒙、云计算、AI等前沿领域的技术布道者

🏆【荣誉殿堂】

🎖 连续三年蝉联"华为云十佳博主"(2022-2024)

🎖 双冠加冕CSDN"年度博客之星TOP2"(2022&2023)

🎖 十余个技术社区年度杰出贡献奖得主

📚【知识宝库】

覆盖全栈技术矩阵:

◾ 编程语言:.NET/Java/Python/Go/Node...

◾ 移动生态:HarmonyOS/iOS/Android/小程序

◾ 前沿领域:物联网/网络安全/大数据/AI/元宇宙

◾ 游戏开发:Unity3D引擎深度解析

文章目录


🚀一、Visual Studio Code 编辑器的使用

🔎1.任务概述

通过本次任务,读者将掌握 Visual Studio Code 编辑器的基本使用,包括安装中文插件、配置 Python 运行环境、运行 Python 代码等操作。

🔎2.任务分析

Visual Studio Code 本身有提供 Python 的运行环境,但 Visual Studio Code 的插件十分丰富,可以通过安装插件的方式来配置中文环境和 Python 运行环境。

🔎3.相关知识

Visual Studio Code(简称 VS Code)是由微软推出的一款免费且开源的轻量级代码编辑器。它具备对几乎所有主流编程语言的高亮显示、智能代码补全、自定义热键等特性。此外,VS Code 还支持插件扩展,用户可通过安装拓展来运行其他语言,如 C、C++、Python、Java 和 PHP 等。VS Code 的软件跨平台功能支持 Windows、macOS 和 Linux 操作系统。

🔎4.工作任务

打开 Windows 攻击机,在攻击机桌面中双击图标打开 Visual Studio Code。首次打开 VS Code 时,VS Code 欢迎页面的右下角会出现一个安装中文语言包的提示,如图 4-13 所示,单击该提示右上角的叉号进行关闭。

🦋1. 安装中文插件

安装后的 VS Code 默认是英文版的,可以通过安装插件,将其设置成中文版。先安装插件。打开 VS Code 后,单击左侧的扩展 ,然后在搜索框中输入 "Language Packs",选择中文(简体) ,然后单击 "Install" 按钮安装中文语言包,如图 4-14 所示。

安装成功后,右下角会出现一个弹窗,询问是否需要重启 VS Code,单击 "Restart" 按钮即可重启,重启 VS Code 之后,可以看到页面已经变为中文显示,如图 4-15 所示。

🦋2. 配置 Python 环境

第一步,安装 Python 插件。 打开 VS Code 后,单击左侧的扩展 ,然后在搜索框中输入 "python",选择 Python ,然后单击 "安装" 按钮安装 Python 插件,如图 4-16 所示。

安装成功后,单击左侧的扩展可以看到新增了许多与 Python 相关的已安装插件,如图 4-17 所示。

第二步,配置 VS Code 环境变量。 单击顶部菜单栏的 "文件" → "首选项" ,单击右上角的 "打开设置(JSON)" ,打开配置文件 settings.json,如图 4-18 所示。

在配置文件中输入以下内容,然后按下 Ctrl+S 组合键进行保存。

json 复制代码
{
    "python.defaultInterpreterPath": "C:\\Users\\Administrator\\AppData\\Local\\Programs\\Python\\Python310\\python3.exe",
    "python.linting.flake8Enabled": true,
    "python.formatting.provider": "yapf",
    "python.linting.pylintEnabled": false,
    "python.linting.flake8Args": ["--max-line-length=248"]
}

其中 python.defaultInterpreterPath 是 Python 3 的安装路径,可在系统环境变量中查看。

第三步,创建项目并配置工作区。 在桌面新建一个名为 "pythonWork" 的文件夹,单击顶部菜单栏的 "文件" → "打开文件夹" ,然后选择桌面的 pythonWork 文件夹。在弹窗中选择 "是,我信任此作者" 信任文件夹并启用所有功能。单击左侧菜单栏的资源管理器 ,选择 pythonWork 工作区并新建一个名为 vsTest.py 的文件,单击该文件并在右侧的文件栏中输入以下内容:

python 复制代码
import sys

# 获取Python版本信息
print(sys.version)

# 输出hello python字符串
print("hello python")

测试代码如图 4-20 所示。

创建完成后,单击右上角的三角符号运行 Python 代码,运行结果会在终端显示。

可以看到 Python 的版本。如果首次运行不成功,那么重新配置 VS Code 环境变量即可。

🔎5.归纳总结

在本任务中,读者能够掌握 VS Code 安装中文插件和配置 Python 环境的方法,支持对代码进行断点调试。VS Code 的插件库十分丰富,也可以通过安装插件的方式安装 Java 或 C++ 的开发环境,读者可以按需进行安装。

🔎6.提高拓展

当使用 Python 编写 Web 漏洞相关的 PoC 或 EXP 时,经常会使用到 Python 的第三方库 Requests,Requests 主要用来发送 HTTP 请求。Requests 是在 urllib 的基础上开发而来的,但 Requests 比 urllib 更简洁,在 Windows 攻击机的终端中使用以下命令可以进行安装:

bash 复制代码
pip3 install requests

接下来,通过一个实例来学习 Requests 的基础用法。

第一步 ,打开 Windows 攻击机,在攻击机桌面中双击图标打开 phpStudy,并启动 Apache 服务。在成功启动 Apache 服务后,在网站的目录下创建一个名为 httpMethod.php 的文件,并写入以下内容:

php 复制代码
<html>
<head>
<meta charset="utf-8">
<title>httpMethod</title>
</head>
<body>
<form method="post">
名字: <input type="text" name="name">
<input type="submit" value="提交">
</form>
</body>
</html>
<?php
if ($_SERVER['REQUEST_METHOD'] === 'GET') {
    echo 'This is GET Method';
} elseif ($_SERVER['REQUEST_METHOD'] === 'POST') {
    echo 'This is POST Method';
} else {
    echo 'This is others Method';
}
?>

其中,$_SERVER 是一个包含头信息(header)、路径(path)和脚本位置(script locations)等信息的数组,可以通过获取 $_SERVER 中的 REQUEST_METHOD 来判断 HTTP 请求的方法。

第二步 ,测试 httpMethod.php 文件。在攻击机的 Firefox 浏览器中访问 httpMethod.php 文件,可以看到页面显示 "This is GET Method" ,如图 4-22 所示。这说明当前浏览器是使用 GET 方法从服务器中获取数据的,即获取 httpMethod.php 网页文件。

在输入框内输入任意字符,如输入 test 字符,然后单击 "提交" 按钮,可以看到页面显示 "This is POST Method" ,如图 4-23 所示。POST 方法用于向服务器发送所需要处理的数据。至此,httpMethod.php 文件能够正常判断 HTTP 的请求方法。接下来使用 Requests 库来模拟 HTTP 请求。

第三步 ,编写 Python 代码,使用 Requests 库来模拟 HTTP 的 GET 请求。使用 VS Code 新建一个 get.py 文件,并写入以下内容:

python 复制代码
import requests

url = 'http://127.0.0.1/httpMethod.php'
response = requests.get(url)

# 调用响应对象text属性,获取文本信息
print(response.text)

运行 get.py 文件,运行结果如图 4-24 所示。

获取文本信息显示 "This is GET Method",与通过浏览器访问网页所获得的信息一致,这说明使用 Requests 库成功发起了 HTTP 的 GET 请求。

第四步 ,编写 Python 代码,使用 Requests 库来模拟 HTTP 的 POST 请求。使用 VS Code 新建一个 post.py 文件,并写入以下内容:

python 复制代码
import requests

# 请求体的字典
data = {'name': 'lan'}

url = 'http://127.0.0.1/httpMethod.php'

# 向指定URL发送POST请求
response = requests.post(url, data=data)

# 以字符串形式打印网页源码
print(response.text)

运行 post.py 文件,运行结果如图 4-25 所示。

获取到的文本信息为 "This is POST Method",与通过浏览器发起 POST 请求所获得的信息一致,这说明成功使用 Requests 库发起 HTTP 的 POST 请求。

相关推荐
古养摩登原始人25 分钟前
脑机接口合规最新发展:从政策到实践,构建安全可控的技术生态
人工智能·安全
非凡ghost33 分钟前
AI修图不“造假“,摄影师的出片效率加速器
服务器·前端·人工智能·电脑
2601_9516152034 分钟前
网页设计模板源码 web前端模板网页源码下载
前端
mmsx34 分钟前
osmdroid 地图实战 03|地图的"分层世界":离线方案、图层模型与 Overlay 体系
android·前端
郭邯1 小时前
从零到一:我用 AI 写了个复利计算器,顺便治好了我的"公式恐惧症"
前端
Pointer Pursuit1 小时前
C++11特性(二)
前端·c++·算法
天道kabuto1 小时前
Vue3 升级踩坑:子组件 click 事件为什么会触发两次?
前端
Nayana1 小时前
《Web 到 HarmonyOS》-- Ability、Stage、模块化与路由导航
前端
Multipath7121 小时前
乾元通基于原生UDP时隙感知的多链路聚合方案
网络·网络协议·5g·安全·udp·智能路由器·实时音视频
ShineWinsu2 小时前
对于 Vue 3:从为什么学 Vue,到声明式渲染与数据响应式的解析
前端·javascript·vue.js