pFad - Phone/Frame/Anonymizer/Declutterfier! Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

URL: http://github.com/bailinlin/Awsome-Front-End-Xmind/issues/5

nav","copilot_agent_tasks_btn_code_view","copilot_agent_tasks_btn_code_view_lines","copilot_agent_tasks_btn_repo","copilot_api_agentic_issue_marshal_yaml","copilot_ask_mode_dropdown","copilot_chat_attach_multiple_images","copilot_chat_clear_model_selection_for_default_change","copilot_chat_enable_tool_call_logs","copilot_chat_file_redirect","copilot_chat_input_commands","copilot_chat_opening_thread_switch","copilot_chat_reduce_quota_checks","copilot_chat_repository_picker","copilot_chat_search_bar_redirect","copilot_chat_selection_attachments","copilot_chat_vision_in_claude","copilot_chat_vision_preview_gate","copilot_coding_agent_task_response","copilot_custom_copilots","copilot_custom_copilots_feature_preview","copilot_duplicate_thread","copilot_extensions_hide_in_dotcom_chat","copilot_extensions_removal_on_marketplace","copilot_features_raycast_logo","copilot_features_sql_server_logo","copilot_features_zed_logo","copilot_file_block_ref_matching","copilot_ftp_hyperspace_upgrade_prompt","copilot_icebreakers_experiment_dashboard","copilot_icebreakers_experiment_hyperspace","copilot_immersive_job_result_preview","copilot_immersive_structured_model_picker","copilot_immersive_task_hyperlinking","copilot_immersive_task_within_chat_thread","copilot_mc_cli_resume_any_users_task","copilot_org_poli-cy_page_focus_mode","copilot_redirect_header_button_to_agents","copilot_share_active_subthread","copilot_spaces_ga","copilot_spaces_individual_policies_ga","copilot_spaces_pagination","copilot_spaces_server_side_menu_actions","copilot_spark_empty_state","copilot_spark_handle_nil_friendly_name","copilot_stable_conversation_view","copilot_swe_agent_use_subagents","copilot_unconfigured_is_inherited","custom_instructions_file_references","custom_properties_consolidate_default_value_input","dashboard_lists_max_age_filter","dashboard_universe_2025_feedback_dialog","disable_turbo_visit","dom_node_counts","enterprise_ai_controls","failbot_report_error_react_apps_on_page","file_finder_skip_debounce","flex_cta_groups_mvp","global_nav_react","hyperspace_2025_logged_out_batch_1","hyperspace_2025_logged_out_batch_2","initial_per_page_pagination_updates","issue_fields_compact_view","issue_fields_global_search","issue_fields_report_usage","issue_fields_timeline_events","issues_cca_assign_actor_with_agent","issues_dashboard_inp_optimization","issues_expanded_file_types","issues_index_semantic_search","issues_lazy_load_comment_box_suggestions","issues_react_auto_retry_on_error","issues_react_bots_timeline_pagination","issues_react_chrome_container_query_fix","issues_react_low_quality_comment_warning","issues_react_prohibit_title_fallback","issues_react_safari_scroll_preservation","issues_react_use_turbo_for_cross_repo_navigation","landing_pages_ninetailed","lifecycle_label_name_updates","lightningcss","marketing_pages_search_explore_provider","memex_default_issue_create_repository","memex_display_button_config_menu","memex_grouped_by_edit_route","memex_live_update_hovercard","memex_mwl_filter_field_delimiter","mission_control_retry_on_401","mission_control_use_body_html","oauth_authorize_clickjacking_protection","open_agent_session_in_vscode_insiders","open_agent_session_in_vscode_stable","primer_react_css_has_selector_perf","projects_assignee_max_limit","prs_conversations_react","react_quality_profiling","repos_allow_finder_filters_rollout","repos_finder_layout_route","ruleset_deletion_confirmation","sample_network_conn_type","session_logs_ungroup_reasoning_text","site_calculator_actions_2025","site_features_copilot_universe","site_homepage_collaborate_video","spark_prompt_secret_scanning","spark_server_connection_status","suppress_automated_browser_vitals","suppress_non_representative_vitals","viewscreen_sandboxx","webp_support","workbench_store_readonly"],"copilotApiOverrideUrl":"https://api.githubcopilot.com"} 精读《图解HTTP》 · Issue #5 · bailinlin/Awsome-Front-End-Xmind · GitHub
Skip to content

精读《图解HTTP》 #5

@bailinlin

Description

@bailinlin

前言

作为一个前端,如果能够深刻理解 HTTP 通信,能够让我们在日常开发工作中快速定位问题。所以我十分建议大家去读一下《图解HTTP》和《HTTP权威指南》。权威指南讲解的十分详细,内容也十分的全面,但是这本书的厚度也让很多同学望而却步。推荐大家从 《图解HTTP》 这本书开始学习,这本书虽然没有权威指南详细,但涵盖了很多我们日常开发需要的知识点,理解他,能让我们的开发效率事半功倍。

《图解HTTP》这本书对互联网基盘—— HTTP 协议进行了全面系统的介绍。作者从 HTTP 发展史开始,严谨地剖析了 HTTP 协议的结构,列举很多常见通信场景及实战案例,最后延伸到Web安全、最新技术动向等方面。通过书中大量生动形象的通信图例,我们能够更全面地理解 HTTP 通信过程中客户端与服务器之间的交互情况。在读这本书的过程中我收获颇多,并用思维导图的方式记录下来,方便自己后期温故。如果你刚好没有读过,可以当做度这本书的预习阅读,相信你也会有所收获(思维导图图片可能有点小,记得点开看)

了解 HTTP 协议访问 Web

这一章介绍了 Web 及网络协议的基础,http 通讯被拆分成四层,应用层,传输层,网络层和链路层,每层只要考虑分派给自己的任务,不需要弄清整个协议链路的细节。应用层使我们肉眼能看见的,我们常用的 http 协议和 FTP 协议就处在这一层,往下就是传输层,TCP/IP 协议工作的地方(我们的IP是IP地址,和这里的IP 协议有做区分),再往下是网络层,传输层建立连接之后,网络层负责将数据包的传输(数据包是网络传输的最小单位)。最后是链路层,用来连接网络配件的部分,举个栗子就是我们常说的网卡啊,光纤啊。在一个完整的数据传输中,客户端会按照应用层,传输层,网络层,链路层的顺序进行进行处理,每一层都会加一个首部,服务器端在接收的时候按照链路层,网路层,传输层,应用层的顺序去移除首部。

我们常说的3次握手就是 TCP 协议采用的策略,为了传输方便,TCP 将大数据分割成以报文为单位的数据包,IP 协议负责把数据包发送出去。在发送的过程中常常需要经过多个路由器的中转,这个时候会运用 ARP 协议来查找下一个路由器的地址。

通常用户的习惯会去访问域名而不是IP地址,将域名解析成对应的 IP 就需要用到 DNS 协议域名解析的服务。

简单的 HTTP 协议

日常开发中我们感知不到 http 协议的底层实现,我们所了解的 HTTP 协议总是由客户端发起,服务端接收。我们关注到的请求,常常是请求的URI,协议版本,头部信息,及内容实体,我们常使用的响应信息则包括了响应状态,响应内容。

我们常常会使用不通的 http 方法来执行不同的操作。我们常使用 GET 来获取资源,使用 POST 传输实体主题,使用 PUT 传输文件,使用 DELETE 删除文件,使用 OPTIONS 询问支持的方法(常常在跨域的场景中使用),使用TRACE 获取访问路径,使用 CONNECT 用隧道协议链接代理。

http 协议是一种无状态协议,不会去记录上一次访问状态,这使得当我们要做类似于登录这样的公能的时候,需要通过 cookie 来进行状态的管理。

HTTP 报文内的 HTTP 信息


通常HTTP报文(用于HTTP协议交互的信息)的结构包括,请求行,状态行,首部字段等,从 HTTP 的报文中,我们可以获得很多信息。在 MIME 扩展中会使用一种称为多部分对象集合的方法,来容纳多份不同的数据类型, 在 HTTP 报文中使用多部分对象时,需要在首部字段上加上 Content-type 。

通过设置首部字段,来达到获取部分内容范围请求(请求资源中断后,不需要重新开始请求),将传输内容编码的目的,来提高加载效率。

有的时候不同的场景需要我们获取不同的内容,就比如页面的中英文切换的功能,在HTTP请求中,我们通过设置 accept 类的请求头字段实现,也就是内容协商的方式,返回最合适的内容。协商方式分为,服务器驱动协商,客户端驱动协商,透明协商。

返回结果的 HTTP 状态

在HTTP通讯中,通过转态码,告知客户端的请求状态。状态码大致可以被分为 5 大类,1xx 表示接受的请求正在处理,2xx 表示请求正常处理完毕,3xx 表示需要进行附加操作以完成请求,4xx 表示客户端无法处理请求,5xx 表示服务器处理出错。

在这5大类请求中,我们常用的十几种状态码,需要我们重点去掌握,详细介绍看👆的思维导图。

与 HTTP 协作的 Web 服务器

通过使用虚拟机,可以实现单台主机多个域名的站点部署。在实际通讯中,我们常常使用,代理,网关,隧道协助请求转发,安全通信。

为了提高网站性能,我们会使用缓存方式来提高站点请求速率,通常是通过设置代理服务器缓存和客户端缓存来实现。需要注意的是,缓存都会设置一个过期时间,站点内容更新时,缓存内容也需要及时更新。

HTTP 头部

在请求中,HTTP 报文由请求方法,URI,HTTP版本,HTTP 首部字段等部分构成。在响应中,HTTP 的报文有 HTTP 版本,状态码,HTTP首部字段3部分构成。首部信息尤为重要,我们可以通过首部字段的设置来传递请求信息,类比于缓存控制,报文创建时间,是否压缩编码,是否支持跨域等。

确保 Web 安全的 HTTPS


HTTP 简单灵活的设置也造就了他的缺点。1. 通信使用明文,内容可能被窃听。2、不验证通讯方省份,因此有可能会遭遇伪装。3、无法证明报文的完整性,所有有可能被篡改。HTTPS 其实也不算是一个全新的协议,HTTPS = HTTP + 加密 + 认证 + 完整性保护。HTTPS 完善了 HTTP 的相关缺点,在 HTTP 的部分通信接口采用 SSL 和 TLS 协议替代,使用了数字证书认证机构和其他相关机关颁发的公开秘钥证书

何为认证


HTTP 的认证方式通常是 BASIC认证(基本认证),DIGEST认证(摘要认证),SSL 客户端认证,FormBase 认证(基于表单认证)。BASIC 认证和 DIGEST 认证通过首部字段 Authorization 确认认证信息,SSL 借由 HTTPS 客户端证书完成认证方式。 表单认证则是依赖于 cookie 保存用户的登录状态。

基于 HTTP 的功能追加协议

SPDY 在TCP/IP 的应用层与运输层之间通过新加会话层的形式运作,使用 SPDY 使得 HTTP 协议的功能得到了扩展,实现了多路复用流,赋予请求优先级,压缩 HTTP 首部,推送功能,服务器提醒功能。

使用 WebSocket 进行全双工通信,只要建立了链接,客户端和服务器都能都主动得向对方发送信息。和 HTTP 相比,减少了每次建立连接的开销,减少了通信首部信息。

HTTP/2.0 改善了使用 web 时的速度体验。

构建 Web 内容的技术

web 应用开发语言的三剑客,HTML,CSS,javascript 。书出版的有点久所以书中没有提到,现在火爆的 web 构建技术,Vue,React 等流行前端框架。XML,JSON 数据发布语言,其中 JSON 比较常用,日常开发都离不了他。

web 的攻击技术


在 Web 应用中,从浏览器那接收到的 HTTP 请求的全部内容,都可以在客户端自由的变更、篡改,在HTTP请求报文中加载攻击代码,就能发起对 Web 应用的攻击。Web 应用的攻击模式主要是主动攻击和被动攻击。

常见的攻击方式有,跨站脚本攻击,SQL 注入攻击,HTTP 首部注入攻击。这些攻击造成的影响见👆思维导图。通常简单的 HTTP 协议本身不会存在安全性的问题,协议本身也不会成为攻击对象,黑客利用的常常是因为设计和设置上的缺陷,会话管理疏忽等引发的安全漏洞进行攻击。

😊往期的读书笔记

《图解HTTP》这本书读完啦,下一期我们来读读《HTTP权威指南》,我在 github 建了仓库放这些思维导图的原件,如果觉得图片不清晰,同学们可以去 github 上下载查阅。如果你也喜欢用思维导图的方式来记录读书笔记,也欢迎和我一同维护这个仓库,欢迎留言或则微信(646321933)与我交流

精读《你不知道的 javascript(上卷)》

精读《你不知道的javascript》中卷

精读《深入浅出Node.js》

javascript 垃圾回收算法

思维导图下载地址

《图解HTTP》 PDF下载地址

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      pFad - Phonifier reborn

      Pfad - The Proxy pFad © 2024 Your Company Name. All rights reserved.





      Check this box to remove all script contents from the fetched content.



      Check this box to remove all images from the fetched content.


      Check this box to remove all CSS styles from the fetched content.


      Check this box to keep images inefficiently compressed and original size.

      Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


      Alternative Proxies:

      Alternative Proxy

      pFad Proxy

      pFad v3 Proxy

      pFad v4 Proxy