Web_白帽子

敬请T期待 Lv3
  2024-01-25 22:12:08 2024-01-25 22:12:08 Created   2024-09-11 21:51:59 2024-09-11 21:51:59 Updated      1.8k Words  7 Mins  

Web基础介绍

知识点罗列：

  • URL概念、结构格式
  • HTTP报文结构
  • cookie含义
  • Set-cookie含义
  • Referer的作用
  • 状态码301和302的含义
  • Location的含义

URL

统一资源定位符（Uniform Resource Locator）

作用：定位服务器资源

URL格式：schemna://host[:post#]/path/…/[?query-string][#anchor]

schemna 底层协议(例如：http,https,ftp…)

host 服务器的域名或IP地址

:post 服务器的端口，HTTP默认端口是80(可省略)，其他端口需要指明

/path/…/ 访问资源的路径

？query-string 发送给http服务器的数据

[#anchor] 锚

HTTP

超文本传输协议（Hyper Text Transfer Protocol）

作用：Web通信时使用的协议

  1. HTTP报文

    HTTP报文是用于HTTP协议交互的信息，HTTP报文本身是由多行数据构成的字符串文本。客户端的HTTP报文叫做请求报文，服务器端的HTTP报文叫做响应报文。

  2. HTTP报文结构

    http报文结构

    报文首部是客户端或服务器端需处理的请求或响应的内容及属性， 可以传递额外的重要信息。报文首部包括请求行和请求头部。

    空行

    报文主体主要包含应被发送的数据。通常，不一定有报文主体。

  3. HTTP请求报文结构

    HTTP请求报文结构

    GET和POST的区别：

    （1）get是从服务器上获取数据（即下载），post是向服务器传送数据（即上传）。
    （2）生成方式不同：
    Get：URL输入；超连接；Form表单中method属性为get；Form表单中method为空。
    Post只有一种：Form表单中method为Post。
    （3）数据传送方式：Get传递的请求数据按照key-value的方式放在URL后面，在网址中可以直接看到，使用?分割URL和传输数据，传输的参数之间以&相连，如：login.action?name=user&password=123。所以安全性差。
    POST方法会把请求的参数放到请求头部和空格下面的请求数据字段就是请求正文（请求体）中以&分隔各个字段，请求行不包含参数，URL中不会额外附带参数。所以安全性高。
    （3）发送数据大小的限制：通常GET请求可以用于获取轻量级的数据，而POST请求的内容数据量比较庞大些。
    Get：1~2KB。get方法提交数据的大小直接影响到了URL的长度，但HTTP协议规范中其实是没有对URL限制长度的，限制URL长度的是客户端或服务器的支持的不同所影响。
    Post：没有要求。post方式HTTP协议规范中也没有限定，起限制作用的是服务器的处理程序的能力。
    （4）提交数据的安全：POST比GET方式的安全性要高。Get安全性差，Post安全性高。
    通过GET提交数据，用户名和密码将明文出现在URL上，如果登录页面有浏览器缓存，或者其他人查看浏览器的历史记录，那么就可以拿到用户的账号和密码了。安全性将会很差。

  4. HTTP响应报文结构

    HTTP响应报文结构

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

参考文章

原文链接：https://blog.csdn.net/qq_35887546/article/details/104216286

HTTP请求的方式

–GET

–POST

–HEAD 与GET请求类似，不同在于与服务器只返回HTTP头部信息，没有页面内容

–PUT 上传指定URL的描述

–DELETE 删除指定资源

–OPTIONS 返回服务器支持的HTTP方法

cookie:相当于用户的凭证，类似与用户的通行证，很重要。

set-cookie:服务器要求浏览器设置cookie

Referer

Referer的作用：

–告知服务器该请求的来源（浏览器自动加上）

–统计流量

–判断来源合法性：防止盗链，防止CSRF漏洞

Location

Location：跳转到地址

响应报文状态码

响应报文状态码

3：完成此请求必须进一步处理**

301——删除请求数据

302——在其他地址发现了请求数据

详细状态码：https://blog.csdn.net/qq_35887546/article/details/104216807

前端开发基础知识

知识点罗列：

​ –JavaScript

​ –DOM

​ –BOM

javaScript

javaScript运行位置：

  • HTML的
  • HTML的事件属性中
  • 浏览器中的JavaScript控制台中的Console中

DOM

DOM本质：链接Web页面和编程语言

JavaScript + DOM：访问和操作HTML文档的标准方法

获取一个HTML元素内容

  • tep1：获取元素

    1
    document.getElementById()//获取元素

  • tep2：获取元素的内容

    1
    .innerHTML//获取元素的内容

  • tep3：显示获取信息

    1
    alert(document.getElementById("id").innerHTML)

  • alert()方法在JavaScript中表示弹出一个警告框，可以用来展示信息

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
   <head>
      <title>Kinwempity</title>
   </head>
   <body>
       <P id="intro">
          Hello!敬请T期待
       </P>
      <script>
       x=document.getElementById("intro");
       alert('id为intro元素的文本是：'+x.innerHTML);  
       </script>
  </body>
</html>

修改一个HTML元素

  • tep1：获取元素

    1
    document.getElementById()

  • tep2：获取元素内容

    1
    .innerHTML

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
   <head>
      <title>Kinwempity</title>
   </head>
   <body>
       <P id="intro">
          Hello!敬请T期待
       </P>
      <script>
       x=document.getElementById("intro");
       x.innerHTML='HELLO WORLD!'; 
       </script>
  </body>
</html>

将元素该为框架iframe框架

1
document.getElementById("id").innerHTML="<ifream src='https://kingwempity.github.io/'></ifream>"

动态创建HTML内容

1
document.write(Date());//向页面中写入当前时间
1
document.write("<ifrema src='https://kingwempity.github.io/'></ifrema>")//向页面中写入框架

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
 <head>
     <title>kinwempity</title>
 </head>
 <body>
     <P id="intro">
         Hello!敬请T期待
     </P>
     <script>
     	function changetext(id)
         {
             id.innerHTML="Kingwempity@敬请T期待";//点击后变化的内容
         }
     </script>
     <h1 onclick="changetext(this)">
         点我会发生变化o_o哦！
     </h1>
 </body>
</html>

BOM

BOM:浏览器对象模型(Browser Object Model)

让浏览器来警告用户:

警告弹窗alert()

确认弹窗confirm()

提示弹窗prompt()

以上弹窗常用于简单的调试和信息展示。例如XSS漏洞测试

获取用户cookie（通常为浏览器发给用户客户端的一小段文本信息）

常见场景：

用户输入用户名和密码成功登录网站后，网站会生成一个cookie给用户，当作用户凭证

cookie一般在控制台的network或Application中可以查看

  • 获取Cookie

    1
    document.cookie//获取cookie

  • 修改写入Cookie

    1
    doucment.cookie="写入值"#值的形式key=value

  • 显示cookie

    1
    alert(document.cookie)

获取浏览器屏幕信息

1
(window.)screen

获取/控制用户页面的URL

1
2
3
window.location.href//获取当前页面url
window.location//获取当前页面url
window.location.href="https://kingwempity.github.io/"//控制当前页面url

获取访问者浏览器信息

1
(window.)navigator

操作浏览器窗口

1
2
window.open("https://kingwempity.github.io/")//打开页面
window.close("https://kingwempity.github.io/")//关闭页面

敬请T期待！

  • Title: Web_白帽子
  • Author: 敬请T期待
  • Created at : 2024-01-25 22:12:08
  • Updated at : 2024-09-11 21:51:59
  • Link: https://kingwempity.github.io/2024/01/25/Web-白帽子/
  • License: This work is licensed under CC BY-NC-SA 4.0.
Comments
On this page
Web_白帽子
  1. 1. Web基础介绍
    1. 1.1. URL
    2. 1.2. HTTP
    3. 1.3. cookie
    4. 1.4. Referer
    5. 1.5. Location
    6. 1.6. 响应报文状态码
  2. 2. 前端开发基础知识
    1. 2.1. javaScript
    2. 2.2. DOM
    3. 2.3. BOM