云计算百科
云计算领域专业知识百科平台

How Websites Work 网站如何运作

官方视频链接

https://www.youtube.com/watch?v=iWoiwFRLV4I

Task1 How websites work 网站如何工作

图片版

文字版

By the end of this room, you'll know how websites are created and will be introduced to some basic security issues. 在本课结束时,你将了解网站是如何创建的,并将被介绍一些基本的安全问题。

When you visit a website, your browser (like Safari or Google Chrome) makes a request to a web server asking for information about the page you're visiting. It will respond with data that your browser uses to show you the page; a web server is just a dedicated computer somewhere else in the world that handles your requests. 当你访问一个网站时,你的浏览器 (如 Safari 或 Google Chrome) 会向 Web 服务器发出请求,询问关于你正在访问的页面的信息。它会以你的浏览器用来向你显示页面的数据作为响应;Web 服务器只是世界上其他地方的一台专用计算机,负责处理你的请求。

There are two major components that make up a website: 网站主要由两个组成部分构成:

  • Front End (Client-Side) – the way your browser renders a website. 前端 (客户端)—— 浏览器呈现网站的方式。
  • Back End (Server-Side) – a server that processes your request and returns a response. 后端 (Server-Side)—— 处理你的请求并返回响应的服务器。
  • There are many other processes involved in your browser making a request to a web server, but for now, you just need to understand that you make a request to a server, and it responds with data your browser uses to render information to you. 浏览器向 Web 服务器发出请求还涉及许多其他过程,但目前,你只需要理解你向服务器发出了请求,服务器会用浏览器用于向你呈现信息的数据进行响应。

    问题

    答案

    Task2 HTML

    图片版

    文字版

    Websites are primarily created using: 网站主要是通过以下方式创建的:

    • HTML, to build websites and define their structure HTML, 用于构建网站并定义其结构
    • CSS, to make websites look pretty by adding styling options CSS, 通过添加样式选项使网站看起来漂亮
    • JavaScript, implement complex features on pages using interactivity JavaScript, 使用交互性在页面上实现复杂的功能

    HyperText Markup Language (HTML) is the language websites are written in. Elements (also known as tags) are the building blocks of HTML pages and tells the browser how to display content. The code snippet below shows a simple HTML document, the structure of which is the same for every website: 超文本标记语言 (HTML) 是用于编写网站的语言。元素 (也称为标签) 是 HTML 页面的构建块,告诉浏览器如何显示内容。下面的代码片段显示了一个简单的 HTML 文档,其结构对于每个网站都是相同的:

    The HTML structure (as shown in the screenshot) has the following components: HTML 结构 (如截图所示) 包含以下组件:

    • The <!DOCTYPE html> defines that the page is a HTML5 document. This helps with standardisation across different browsers and tells the browser to use HTML5 to interpret the page. <!DOCTYPE html> 将页面定义为 HTML5 文档。这有助于在不同浏览器之间实现标准化,并告诉浏览器使用 HTML5 来解释页面。
    • The <html> element is the root element of the HTML page – all other elements come after this element. <html> 元素是 HTML 页面的根元素 —— 所有其他元素都位于该元素之后。
    • The <head> element contains information about the page (such as the page title) <head> 元素包含有关页面的信息 (如页面标题)
    • The <body> element defines the HTML document's body; only content inside of the body is shown in the browser. <body> 元素定义 HTML 文档的主体;浏览器只显示主体内部的内容。
    • The <h1> element defines a large heading <h1> 元素定义一个大标题
    • The <p> element defines a paragraph <p> 元素定义一个段落
    • There are many other elements (tags) used for different purposes. For example, there are tags for buttons (<button>), images (<img>), lists, and much more. 还有许多其他元素 (标签) 用于不同的目的。例如,有用于按钮 (<button>)、图像 (<img>)、列表等的标签。

    Tags can contain attributes such as the class attribute which can be used to style an element (e.g. make the tag a different color) <p class="bold-text">, or the src attribute which is used on images to specify the location of an image: <img src="img/cat.jpg">.An element can have multiple attributes each with its own unique purpose, e.g., <p attribute1="value1" attribute2="value2">. 标签可以包含属性,例如用于样式化元素的 class 属性 (例如,使标签具有不同的颜色)<p class=“粗体文本”>, 或用于图像的 src 属性来指定图像的位置:<img src=“img/cat.jpg”>。元素可以具有多个属性,每个属性都有其独特的用途,例如,<p attribute1=“value1” attribute2=“value2”>。

    Elements can also have an id attribute (<p id="example">), which is unique to the element. Unlike the class attribute, where multiple elements can use the same class, an element must have different id's to identify them uniquely. Element id's are used for styling and to identify it by JavaScript. 元素也可以有一个 id 属性 (<p id=“example”>), 这个属性对元素来说是唯一的。与 class 属性不同,在 class 属性中,多个元素可以使用相同的类,而元素必须有不同的 id 才能唯一标识它们。元素的 id 用于样式设计和 JavaScript 标识。

    You can view the HTML of any website by right-clicking and selecting "View Page Source" (Chrome) / "Show Page Source" (Safari). 您可以通过右键单击并选择 “查看页面源代码”(Chrome)/“显示页面源代码”(Safari) 来查看任何网站的 HTML。

    问题

    答案
    问题一

    点击一下那个view site

    就行

    问题二

    改完之

    答案就是图片里面的 HTMLHERO

    问题三

    <img src='img/dog-1.png'>

    Task3 JavaScript

    图片版

    文字版

    JavaScript (JS) is one of the most popular coding languages in the world and allows pages to become interactive. HTML is used to create the website structure and content, while JavaScript is used to control the functionality of web pages – without JavaScript, a page would not have interactive elements and would always be static. JS can dynamically update the page in real-time, giving functionality to change the style of a button when a particular event on the page occurs (such as when a user clicks a button) or to display moving animations. JavaScript (JS) 是世界上最流行的编程语言之一,它允许页面变得具有交互性。HTML 用于创建网站结构和内容,而 JavaScript 用于控制 Web 页面的功能 —— 如果没有 JavaScript, 页面将没有交互元素,并且始终是静态的。JS 可以实时动态更新页面,当页面上发生特定事件时 (例如,当用户点击按钮时), 可以更改按钮的样式,或显示动画。

    JavaScript is added within the page source code and can be either loaded within <script> tags or can be included remotely with the src attribute: <script src="/location/of/javascript_file.js"></script> JavaScript 被添加到页面源代码中,可以在 <script> 标签中加载,也可以通过 src 属性远程包含:<script src="/location/of/javascript_file.js"></script>

    The following JavaScript code finds a HTML element on the page with the id of "demo" and changes the element's contents to "Hack the Planet" : document.getElementById("demo").innerHTML = "Hack the Planet"; 以下 JavaScript 代码在页面上找到一个 ID 为 “demo” 的 HTML 元素,并将该元素的内容更改为 “Hack the Planet”:document.getElementById ("demo").innerHTML =“Hack the Planet”;

    HTML elements can also have events, such as "onclick" or "onhover" that execute JavaScript when the event occurs. The following code changes the text of the element with the demo ID to Button Clicked: <button onclick='document.getElementById("demo").innerHTML = "Button Clicked";'>Click Me!</button> – onclick events can also be defined inside the JavaScript script tags, and not on elements directly. HTML 元素也可以包含事件,例如 “onclick” 或 “onhover”, 这些事件在事件发生时执行 JavaScript。以下代码将具有 demo ID 的元素文本更改为 “Button Clicked”:<button οnclick=‘document.getElementById ("demo").innerHTML=“Button Clicked”;‘>Click Me!</button>——onclick 事件也可以在 JavaScript 脚本标签中定义,而不是直接在元素上定义。

    问题

    答案

    Task4 Sensitive Data Exposure 敏感数据暴露

    图片版

    文字版

    Sensitive Data Exposure occurs when a website doesn't properly protect (or remove) sensitive clear-text information to the end-user; usually found in a site's frontend source code. 当网站未能适当地保护 (或删除) 敏感的明文信息给最终用户时,就会发生敏感数据泄露;这些信息通常存在于网站的前端源代码中。

    We now know that websites are built using many HTML elements (tags), all of which we can see simply by "viewing the page source". A website developer may have forgotten to remove login credentials, hidden links to private parts of the website or other sensitive data shown in HTML or JavaScript. 我们现在知道网站是使用许多 HTML 元素 (标签) 构建的,所有这些元素都可以通过简单的 “查看页面源代码” 来查看。网站开发人员可能忘记删除登录凭据、指向网站私有部分的隐藏链接,或者 HTML 或 JavaScript 中显示的其他敏感数据。

    Sensitive information can be potentially leveraged to further an attacker's access within different parts of a web application. For example, there could be HTML comments with temporary login credentials, and if you viewed the page's source code and found this, you could use these credentials to log in elsewhere on the application (or worse, used to access other backend components of the site). 敏感信息可能被用于进一步利用攻击者对 Web 应用程序不同部分的访问。例如,可能会出现带有临时登录凭据的 HTML 注释,如果你查看页面的源代码并发现这一点,你可以使用这些凭据在应用程序的其他地方登录 (或者更糟,用于访问网站的其他后端组件)。

    Whenever you're assessing a web application for security issues, one of the first things you should do is review the page source code to see if you can find any exposed login credentials or hidden links. 每当你评估 Web 应用程序的安全问题时,首先要做的事情之一就是检查页面源代码,看看是否能找到任何暴露的登录凭据或隐藏的链接

    问题
    答案

    Task5 HTML Injection HTML 注入

    图片版

    文字版

    HTML Injection is a vulnerability that occurs when unfiltered user input is displayed on the page. If a website fails to sanitise user input (filter any "malicious" text that a user inputs into a website), and that input is used on the page, an attacker can inject HTML code into a vulnerable website. HTML 注入是一种漏洞,当页面上显示未经过滤的用户输入时,就会发生这种情况。如果网站未能清理用户输入 (过滤用户输入到网站的任何 “恶意” 文本), 并且该输入在页面上被使用,攻击者就可以向易受攻击的网站注入 HTML 代码。

    Input sanitisation is very important in keeping a website secure, as information a user inputs into a website is often used in other frontend and backend functionality. A vulnerability you'll explore in another lab is database injection, where you can manipulate a database lookup query to log in as another user by controlling the input that's directly used in the query – but for now, let's focus on HTML injection (which is client-side). 输入清理对于保持网站安全非常重要,因为用户输入网站的信息通常用于其他前端和后端功能。你将在另一个实验室中探讨的一个漏洞是数据库注入,在那里,你可以通过控制查询中直接使用的输入来操作数据库查询查询,以另一个用户的身份登录 —— 但现在,让我们集中关注 HTML 注入 (这是客户端的功能)。

    When a user has control of how their input is displayed, they can submit HTML (or JavaScript) code, and the browser will use it on the page, allowing the user to control the page's appearance and functionality. 当用户可以控制其输入的显示方式时,他们可以提交 HTML (或 JavaScript) 代码,浏览器将在页面上使用该代码,从而允许用户控制页面的外观和功能。

    The image above shows how a form outputs text to the page. Whatever the user inputs into the "What's your name" field is passed to a JavaScript function and output to the page, which means if the user adds their own HTML or JavaScript in the field, it's used in the sayHi function and is added to the page – this means you can add your own HTML (such as a <h1> tag) and it will output your input as pure HTML. 上图显示了表单如何将文本输出到页面。无论用户在 “What is your name” 字段中输入什么,都会传递给 JavaScript 函数并输出到页面。这意味着,如果用户在该字段中添加了自己的 HTML 或 JavaScript, 它将被 sayHi 函数使用并添加到页面中 —— 这意味着你可以添加自己的 HTML (例如 < h1> 标签), 它会将你的输入输出为纯 HTML。

    The general rule is never to trust user input. To prevent malicious input, the website developer should sanitise everything the user enters before using it in the JavaScript function; in this case, the developer could remove any HTML tags. 一般规则是永远不要信任用户输入。为了防止恶意输入,网站开发人员应该在 JavaScript 函数中使用用户输入的所有内容之前进行清理;在这种情况下,开发人员可以删除任何 HTML 标签。

    问题

    答案

    <a href='http://hacker.com'>

    理解和补充

    文件签名识别表

    文件格式

    常用后缀

    文件头 (Hex)

    文件尾 (Hex)

    说明

    JPEG

    .jpg/.jpeg

    FF D8 FF

    FF D9

    图像压缩标准

    PNG

    .png

    89 50 4E 47

    00 00 00 00 49 45 4E 44 AE 42 60 82

    无损位图格式

    BMP

    .bmp

    42 4D (BM)

    无固定文件尾

    Windows 位图格式

    GIF

    .gif

    47 49 46 38 (GIF8)

    3B

    动图格式

    XML

    .xml

    3C 3F 78 6D 6C (<?xml)

    无固定文件尾

    结构化数据标记语言

    HTML

    .html/.htm

    3C 21 44 4F 43 或 68 74 6D 6C

    无固定文件尾

    超文本标记语言

    MS Office

    .doc/.xls

    D0 CF 11 E0

    FD FF FF FF (FAT文件尾)

    旧版Office二进制格式

    MS Access

    .mdb

    53 74 61 6E 64 61 72 64 20 4A

    无固定文件尾

    Access数据库格式

    PDF

    .pdf

    25 50 44 46 2D 31 2E

    25 25 45 4F 46 (%%EOF)

    跨平台文档格式

    ZIP

    .zip

    50 4B 03 04

    50 4B 05 06

    压缩文件格式

    RAR

    .rar

    52 61 72 21 1A 07 00

    C4 3D 7B 00

    WinRAR压缩格式

    WAV

    .wav

    52 49 46 46 xx xx xx xx 57 41 56 45

    无固定文件尾

    音频波形格式

    AVI

    .avi

    52 49 46 46 xx xx xx xx 41 56 49 20

    无固定文件尾

    音视频容器格式

    TIFF

    .tif/.tiff

    49 49 2A 00 或 4D 4D 00 2A

    00 00 00 00

    高质量图像格式

    文件头尾说明:

  • xx 表示可变长度字段
  • 部分格式通过 魔术数字(Magic Number) 而非文件尾识别
  • 压缩格式(ZIP/RAR)有明确的目录结束标记

  • 文件后缀专业解析

    1. 跨平台特性对比

    特性

    Windows

    Linux/macOS

    后缀依赖度

    高度依赖(隐藏已知扩展名)

    可选(主要靠MIME类型)

    修改后果

    导致关联程序错误

    不影响文件内容识别

    安全风险

    高危(如:virus.txt.exe)

    较低(需+x权限才可执行)

    默认处理

    根据后缀选择程序

    根据文件签名+MIME类型

    2. 文件识别优先级

    在数字取证中按以下顺序判断文件类型:

  • 文件头签名(最可靠,优先级最高)
  • 文件结构解析(如ZIP的目录结构)
  • MIME类型检测(HTTP传输标准)
  • 文件后缀名(最不可靠)

  • 文件签名实战应用

    1. 取证工具使用

    # 使用file命令识别真实类型(Linux/macOS)
    $ file -k suspicious.doc
    suspicious.doc: Microsoft Office 2007+ DOCX (Zip archive data)

    # 使用hexdump验证文件头
    $ hexdump -C -n 8 suspicious.doc
    00000000 50 4b 03 04 14 00 08 00 |PK……..|

    2. 恶意文件检测

    def detect_malicious(file_path):
    signatures = {
    "PE": b"MZ\\x90\\x00", # Windows可执行文件
    "ELF": b"\\x7fELF", # Linux可执行文件
    "Macro": b"D0 CF 11 E0" # 宏病毒常用
    }

    with open(file_path, "rb") as f:
    header = f.read(4)
    for name, sig in signatures.items():
    if header.startswith(sig):
    return f"危险! 检测到{name}签名"
    return "文件签名正常"

    3. 文件修复技巧

    当文件头损坏时:

  • 使用 hex编辑器 手动修复(如HxD)
  • 通过 已知结构 重建头信息
      • JPEG:补全 FF D8 FF E0 后接 JFIF
      • PNG:补全 89 50 4E 47 0D 0A 1A 0A

    赞(0)
    未经允许不得转载:网硕互联帮助中心 » How Websites Work 网站如何运作
    分享到: 更多 (0)

    评论 抢沙发

    评论前必须登录!