前端知识点汇总—面试看这一篇就够了 (7)

日期：2021-06-06 栏目：程序人生浏览：次

功能检测包括确定浏览器是否支持某段代码，以及是否运行不同的代码（取决于它是否执行），以便浏览器始终能够正常运行代码功能，而不会在某些浏览器中出现崩溃和错误。例如：

if ('geolocation' in navigator) { // 可以使用 navigator.geolocation } else { // 处理 navigator.geolocation 功能缺失 }

Modernizr是处理功能检测的优秀工具。

功能推断（feature inference）

功能推断与功能检测一样，会对功能可用性进行检查，但是在判断通过后，还会使用其他功能，因为它假设其他功能也可用，例如：

if (document.getElementsByTagName) { element = document.getElementById(id); }

非常不推荐这种方式。功能检测更能保证万无一失。

UA 字符串

这是一个浏览器报告的字符串，它允许网络协议对等方（network protocol peers）识别请求用户代理的应用类型、操作系统、应用供应商和应用版本。它可以通过navigator.userAgent访问。然而，这个字符串很难解析并且很可能存在欺骗性。例如，Chrome 会同时作为 Chrome 和 Safari 进行报告。因此，要检测 Safari，除了检查 Safari 字符串，还要检查是否存在 Chrome 字符串。不要使用这种方式。
考虑到历史原因及现代浏览器中用户代理字符串(userAgent)的使用方式，通过用户代理字符串来检测特定的浏览器并不是一件轻松的事情。所以使用用户代理检测是最后的选择。
用户代理检测一般适用以下的情形：

不能直接准确的使用功能检测。

同一款浏览器在不同平台下具备不同的能力。这个时候可能就有必要确定浏览器位于哪个平台。

为了跟踪分析等目的需要知道特定的浏览器。

浏览器版本检测方式

可以使用navigator.userAgent。

JS同源策略(same-origin policy)

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

下表给出了相对同源检测的示例:

URL 结果原因
成功只有路径不同
成功只有路径不同
https://store.company.com/secure.html 失败不同协议 ( https和http )
:81/dir/etc.html 失败不同端口 ( 80是默认的)
失败不同域名 ( news和store )

https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy

跨标签页通讯

不同标签页间的通讯，本质原理就是去运用一些可以共享的中间介质，因此比较常用的有以下方法:

通过父页面window.open()和子页面postMessage

异步下，通过 window.open('about: blank') 和 tab.location.href = '*'

设置同域下共享的localStorage与监听window.onstorage

重复写入相同的值无法触发

会受到浏览器隐身模式等的限制

设置共享cookie与不断轮询脏检查(setInterval)

借助服务端或者中间层实现

跨域的解决方案

按实际使用量排序(个人理解)：

CORS 跨域

nginx反向代理

WebSockets

JSONP 只支持GET请求

hash + iframe 只支持GET请求

postMessage 只支持GET请求

document.domain

https://lidaguang1989.github.io/2016/09/cors/

浏览器数据本地存储方法（localStroage、sessionStroage、cookie、indexedDB）

目前常见的存储方式为以下三种：

web存储 (locaStorage和seesionStorage)

IndexedDB

前端知识点汇总—面试看这一篇就够了

在H5出现之前，数据都是存储在cookie中的。为了解决cookie的局限性引入了Web存储，indexedDB用于客户端存储大量结构化数据(包括, 文件/ blobs)。

共同点：都是保存在浏览器端、且同源的
区别：

Cookie localStorage sessionStorage indexedDB
容量大小 4kb左右 5M左右 5M左右无限容量
过期时间只在设置的过期时间之前一直有效，
即使窗口或者浏览器关闭始终有效当前浏览器窗口关闭前有效始终有效
存储方式浏览器和服务器间来回传递本地保存本地保存本地保存
作用域在同源窗口中共享在同源窗口中共享在同源窗口并且同一窗口中共享在同源窗口中共享
Web安全举例

XSS(跨站脚本攻击)几种形式，防范手段，过滤哪些字符

csrf(跨站请求伪造)原理，实现，防范手段

sql注入

命令行注入

DDoS(Distributed Denial of Service) 又叫分布式拒绝服务

流量劫持
DNS劫持
HTTP劫持

服务器漏洞

https://juejin.im/entry/5a559dd36fb9a01c9e45d896

状态码

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status

Web Worker

转载注明出处：https://www.heiqu.com/wpxszg.html

前端知识点汇总—面试看这一篇就够了 (7)

相关推荐