HTML面试题整理

2021-05-30  本文已影响0人  翔子丶

HTML5 新特性、语义化

新特性
语义化
区分 HTML 和 HTML5
DOCTYPE 作用

<!Doctype>声明位于文档中的最前面，处于<html>标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。

HTML5 离线缓存原理
处理 HTML5 离线储存资源

cookie，sessionStorage 和 localStorage 的区别

理解

Canvas 和 SVG 区别

使用 date-的好处

meta 标签

attribute 和 property 的区别是什么？

页面显示 HTML 过程

过程：构建 dom 树-->构建 render 树-->布局 render 树-->绘制 render 树

说一下强制缓存和协商缓存

缓存指在本地磁盘中对访问过的资源保存的副本文件

什么是预加载和懒加载

常见 web 安全及防护原理

cookie 面试题

由于 HTTP 是无状态协议，无状态指的是服务端对于客户端每次发送的请求都会认为是新的一个请求，上一次会话和下一次会话没有联系。但是很多场景需要直到上次会话和下一次会话的关系（比如登陆之后记住登陆状态），这时就引入和 cookie 和 session 体系。

cookie 时如何工作的

##### cookie 和 session 的区别

- 存储位置不同

  cookie 存储在客户浏览器上，而 session 数据保存在服务器上

- 存储大小不同

  一般单个 cookie 保存的数据不能超过 4 个，单个域名最多保存 20 个 cookie；session 则无大小和限制

##### cookie 属性

- Name：cookie 名
- Value：cookie 值
- Domain：cookie 的域名。如果设置.example.com，那么子域名 a.example.com 和 b.example.com，都可以使用.example.com 的 cookie，反之则不行
- Path：允许读取 cookie 的 url 路径，一般设置为/
- Expires：cookie 过期时间。不设置，则为 session 会话期，页面退出时 cookie 失效
- HttpOnly：设置为 true 时，只有 http 能读取，js 只能读取未设置 HttpOnly 的 cookie
- Secure：标记为 Secure 的 cookie，只有 https 的请求可以携带
- SameSite：限制第三方 url 是否可以携带 cookie
  - Strict：仅允许同站点请求的 cookie
  - Lax：允许部分第三方请求携带 cookie，即导航到目标网址的 get 请求，包括超链接，预加载和 get 表单三种形式发送 cookie
  - None：任意发送 cookie，需要设置 Secure，网站必须采用 https
- Priority：优先级

##### 操作 cookie，js 和服务端

当设置了 HttpOnly 为 true 时，只有 http 请求读取，不能被 js 读取，具体表现为 document.cookie 读取到的值不包含设置的 HttpOnly

js 操作 cookie 使用 document.cookie

- 读取
  document.cookie 读取到字符串，包含 cookie 的 name 和 value，需要解析
- 写入
  ```js
  document.cookie =
    'uid=123;expires=Mon Jan 04 2022 17:42:40 GMT;path=/;secure;'
  document.cookie =
    'uid=123;expires=Mon Jan 04 2022 17:42:40 GMT;path=/caikuai;domain=edu.360.cn;secure;samesite=lax'

一次只能写入一个 cookie

服务器端如何读写 cookie
查看浏览器是否打开 Cookie 功能
window.navigator.cookieEnabled // true
cookie 的共享策略是什么

domain 和 path 共同决定 cookie 可以被哪些 url 访问
访问一个 url 时，如果 url 的 host 和 domain 一致或者时 domain 的子域名，并且 url 的路径和 path 部分匹配，那么 cookie 才可以被获取

cookie 的编码
document.cookie =
  'uid=123;expires=Mon Jan 04 2022 17:42:40 GMT;path=/caikuai;domain=edu.360.cn;secure;samesite=lax'

cookie 一般包含等号、冒号、分号、空格、逗号、斜杠等特殊字符，需要对其进行编码，使用 encodeURIComponent/decodeURIComponent 操作

不使用 escape 和 encodeURI 的原因是，encodeURIComponent 可以将更多字符进行编码，比如‘/’

cookie 应对 xss 漏洞

xss 漏洞原理是：由于未对用户提交的表单数据或者 url 参数等数据做处理就显示在页面上，导致用户提交的内容在页面上被作为 html 解析执行

常规方案：对特殊字符进行滚处理，如对“<”或“>“进行转义

cookie 设置：对用用户利用 script 脚本采集 cookie 信息，可以将重要的 cookie 信息设置为 HttpOnly 来避免 cookie 被 js 采集

cookie 应对 csrf 攻击

跨站请求伪造原理：用户登陆 A 网站，然后因为某些原理访问 B 网站（比如跳转），B 网站直接发送一个 A 网站的请求进行一些危险操作，由于 A 网站处理登陆状态，就发生了 CSRF 攻击，核心是利用了 cookie 信息可以被跨站携带

常规方案：采用验证码或 token 等

cookie 设置：由于 CSRF 攻击核心是利用 cookie 信息可以被跨站携带，可以对核心 cookie 的 SameSite 设置为 Strict 或 Lax 来避免

不同浏览器共享 cookie 吗

不共享，是对立的 cookie

web 端 cookie 的设置和获取

//写cookie
function setCookie(name, value) {
  var Days = 30
  var exp = new Date()
  exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000)
  document.cookie = name + '=' + escape(value) + ';expires=' + exp.toGMTString()
}
//读取cookie
function getCookie(name) {
  var arr,
    reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)')
  if ((arr = document.cookie.match(reg))) {
    return unescape(arr[2])
  } else {
    return null
  }
}
//删除cookie
function delCookie(name) {
  var exp = new Date()
  exp.setTime(exp.getTime() - 1)
  var cval = getCookie(name)
  if (cval != null) {
    document.cookie = name + '=' + cval + ';expires=' + exp.toGMTString()
  }
}
上一篇 下一篇

猜你喜欢

热点阅读