【前端面试】Http篇

1. HTTPS 概念

  • 加密(Encryption)
    • 防止数据被截获
  • 数据完整性(Data Integrity)
    • 防止数据篡改
  • 身份验证(Authentication)
    • 验证网站的真实性

2. HTTPS 与 HTTP 的区别

  • HTTP 是明文传输,HTTPS 是加密传输
  • HTTP 使用 80 端口,HTTPS 使用 443 端口
  • HTTPS 加密会导致传输稍慢

3. HTTPS 防止的安全威胁

  • 中间人攻击(MITM)
    • 加密避免数据被拦截和篡改
  • 窃听(Eavesdropping)
    • 通过加密防止数据被监听
  • 篡改(Data Tampering)
    • 确保数据在传输过程中不被篡改
  • 假冒网站(Phishing)
    • 证书验证防止访问假冒网站

4. 安全相关话题

  • 前端数据加密
    • 使用 Web Crypto API 加密用户数据
  • XSS(跨站脚本攻击)
    • 输入验证
    • HTML 转义
    • Content Security Policy (CSP)
  • CSRF(跨站请求伪造)
    • 同源策略(Same-Origin Policy)
    • CSRF Token
  • HTTP 安全头(HTTP Headers)
    • Strict-Transport-Security (HSTS)
    • X-Content-Type-Options
    • X-Frame-Options
    • Content-Security-Policy (CSP)
  • 身份验证与授权
    • OAuth
    • JWT(JSON Web Token)

5. 安全存储和传输

  • 密码存储
    • 哈希(bcrypt)
  • 数据加密存储
    • 对称加密和非对称加密

6. HTTP 版本区别(1.0, 2.0, 3.0)

  • HTTP 1.0
    • 请求/响应模型:每个请求都需要建立一个连接
    • 没有管道化和多路复用
    • 缺乏性能优化
  • HTTP 2.0
    • 引入了多路复用,可以在一个连接上同时处理多个请求
    • 数据帧和流的概念,提高了性能
    • 压缩请求和响应头,减少延迟
  • HTTP 3.0
    • 基于 QUIC 协议(UDP),进一步减少延迟
    • 解决了 HTTP 2.0 在高延迟和丢包情况下的性能问题
    • 更好的安全性,内置 TLS 1.3

7. 强缓存与弱缓存

  • 强缓存
    • 浏览器会直接使用缓存的内容,不发请求到服务器
    • 基于 Cache-ControlExpires 头部控制
    • 例如:Cache-Control: max-age=3600
  • 弱缓存
    • 浏览器会先发请求到服务器,检查资源是否变化,如果没有变化则使用缓存
    • 基于 ETagLast-Modified 头部控制
    • 例如:If-None-Match: "etag-value"

8. 相关面试问题及答案

Q1: HTTPS 和 HTTP 的区别是什么?

  • HTTP 是明文传输,HTTPS 在 HTTP 上加入了 SSL/TLS 加密协议,确保数据传输的机密性、完整性和身份验证。HTTPS 使用 443 端口,而 HTTP 使用 80 端口。

Q2: HTTPS 如何防止中间人攻击?

  • HTTPS 使用 SSL/TLS 加密传输,防止了第三方拦截、篡改数据。在通信过程中,双方会验证彼此的身份(通过证书),并通过加密保护数据内容。

Q3: 如何防止 XSS 和 CSRF 攻击?

  • XSS:输入验证、HTML 转义、使用 Content Security Policy (CSP) 防止恶意脚本注入。
  • CSRF :使用 CSRF Token 、双重提交 Cookie 或者通过 SameSite 属性限制跨站请求。

Q4: 如何配置浏览器安全性头部?

  • Strict-Transport-Security (HSTS):要求浏览器仅通过 HTTPS 连接。
  • X-Content-Type-Options:防止浏览器根据内容推测 MIME 类型。
  • X-Frame-Options:防止网页被嵌入在 iframe 中,减少点击劫持攻击。
  • Content-Security-Policy (CSP):限制浏览器加载的内容类型,防止 XSS 攻击。

Q5: 前端如何保护用户的敏感信息?

  • 使用 HTTPS 加密传输数据。
  • 在客户端存储时对敏感数据进行加密。
  • 使用 HTTP Only 和 Secure 属性来保护 Cookie。
  • 定期更新和管理认证 token,使用 JWT 进行身份验证。

Q6: HTTP 1.0 和 HTTP 2.0 有哪些主要区别?

  • HTTP 1.0 使用每个请求一个连接,而 HTTP 2.0 引入了多路复用技术,允许在一个连接上同时发送多个请求和响应,从而减少延迟和提高性能。

Q7: 什么是强缓存和弱缓存,如何配置?

  • 强缓存 :在资源有效期内,浏览器不会向服务器发送请求,直接使用缓存。
    • 配置:Cache-Control: max-age=3600
  • 弱缓存 :浏览器会检查缓存是否过期,如果过期则向服务器请求新的资源。
    • 配置:ETagLast-Modified

Q8: 如何避免 CSRF 攻击?

  • 使用 CSRF Token:为每个请求生成唯一的 Token,服务器验证 Token 来确保请求来自合法的用户。
  • 使用 SameSite Cookie 属性:限制第三方网站发送跨站请求。
相关推荐
杨荧11 分钟前
【开源免费】基于Vue和SpringBoot的图书进销存管理系统(附论文)
前端·javascript·vue.js·spring boot·spring cloud·java-ee·开源
:mnong17 分钟前
从EXCEL表格到WEB TABLE的实践
前端
○陈25 分钟前
js面试题|[2024-12-10]
java·前端·javascript
安冬的码畜日常1 小时前
【D3.js in Action 3 精译_044】5.1 饼图和环形图的创建(四):数据标签的添加
前端·javascript·信息可视化·数据可视化·d3.js·d3环形图·d3饼图
程序猿进阶1 小时前
可视化逻辑表达式编辑器
java·spring boot·后端·面试·性能优化·架构·编辑器
常常不爱学习1 小时前
CSS元素宽高特点、类型转化、显式和隐藏(display)
前端·javascript·css
图扑软件1 小时前
火电厂可视化助力提升运维效率
大数据·前端·javascript·人工智能·数字孪生·可视化·火电厂
m0_748238421 小时前
【Vue3】前端使用 FFmpeg.wasm 完成用户视频录制,并对视频进行压缩处理
前端·ffmpeg·wasm
java156550579701 小时前
前端 mp4 视频改成 m3u8 流模式
前端·音视频
Json_181790144801 小时前
API接口示例:电商商品评论数据
服务器·前端·数据库