前端面经每日一题day01

最近看面试题总是会三天打鱼两天晒网,所以希望通过外部手段约束自己,我现在每天学习的内容发布,一方面给自己增加外部压力,另一方面显化自己的学习成果,防止陷入感动。

我面经的复习题是网址 前端常见面试题总结 – 大厂面试每日一题

浏览器的唯一标识

前端开发中,为什么要获得浏览器的唯一标识?

  1. 用户跟踪与分析。(跟踪用户在网站的行为,进行数据分析,用户画像构建)
  2. 提供个性化体验。(比如推荐系统,定制化广告)
  3. 安全性与身份验证。(唯一标识辅助身份验证,如检测潜在的欺诈行为)
  4. 跨设备同步。(用户在不同设备访问同一服务,将这些设备的用户会话同步起来)

补充:前端开发中,欺诈行为就是:利用技术手段,通过前端页面对用户,数据,或系统进行不正当的访问,篡改或利用的行为,如跨站脚本攻击XSS,点击劫持,会话劫持,恶意软件或广告等。

前端开发中,怎么获得浏览器的唯一标识?

  1. navigator.userAgent 返回字符串,描述了浏览器的用户代理信息。

包含了浏览器和操作系统的信息,但是不唯一,因为不同用户的浏览器和操作系统配置一样。

console.log(navigator.userAgetn)
//Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36 SLBrowser/9.0.5.9101 SLBChan/11 SLBVPV/64-bit
  1. localstoragecookies 用户浏览器存储一个唯一标识(UUID),用户访问时候读取。

但是如果用户清除浏览器缓存或在不同浏览器访问则不能追踪到同一用户。

  1. canvas指纹

原因:因为不同显卡绘制canvas时渲染 参数,抗锯齿等算法不同,因此绘制成图片数据的CRC校验也不一样,因此更具canvas可以获取浏览器指纹信息。

原理:(1)绘制canvas,获取base64dataurl。(2)对dataurl字符串进行md5摘要计算,浏览器唯一标识。

补充:MD5摘要算法是广泛使用的哈希函数。它能够将任意长度的消息加密成一个固定长度(128位即16字节)的散列值(32位的十六进制字符串)。特点:压缩性(任意长度消息生成固定长度),易计算性(原数据计算出md5摘要值容易),抗修改性(对输入数据微小修改,md5摘要值大改变),弱抗碰撞性(存在两个不同入数据同一碰撞值,安全性较高的场合不推荐使用)

使用js-md5插件
import md5 from 'js-md5'
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
ctx.textBaseline = 'top'
ctx.font = "14px 'Arial'"
ctx.fillText("hello", 2, 2)
const finger=canvas.toDataURL()
const fingerprint=md5(finger)
可以使用fingerprintjs库
<script>const fpPromise = import('<https://openfpcdn.io/fingerprintjs/v4>').then(FingerprintJS => FingerprintJS.load())fpPromise.then(fp => fp.get()).then(result => {// This is the visitor identifier:const visitorId = result.visitorIdconsole.log(visitorId)})
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/36174.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

Chromium CDP 开发(五):注册自己的指令(中)

引言 在前一篇文章中&#xff0c;我们已经了解了 PDL&#xff08;Protocol Description Language&#xff09;的基本功能以及如何在其中声明 CDP&#xff08;Chrome DevTools Protocol&#xff09;指令和事件的具体内容。接下来&#xff0c;我们将深入探讨如何在实际开发中进行…

回溯算法解决全排列问题

1. 问题描述 定义&#xff1a;给定一个不含重复数字的数组 nums &#xff0c;返回其所有可能的全排列 。 示例&#xff1a; 输入数组 [1, 2, 3] 输出结果应该为&#xff1a; leetcode 地址 2. 代码实现 package com.ztq.algorithm.BackTrack;import java.util.List; impo…

金融行业 IT 实践|某信托公司:从虚拟化到容器平台的 VMware 替代与双活建设实践

随着“VMware 替代” 在金融行业的快速推进&#xff0c;不少金融用户的替代进程已逐渐从存储、虚拟化过渡到容器平台层面&#xff0c;实现更为全面的 VMware 国产化替代与架构升级。其中&#xff0c;某信托用户在使用 SmartX 超融合&#xff08;采用 VMware 虚拟化和 Tanzu 容器…

python学习——格式化字符串

在Python中&#xff0c;格式化字符串是一种将变量插入到字符串中的方法&#xff0c;使得字符串的构建更为灵活和方便。以下是一些常见的格式化字符串的方法&#xff1a; 文章目录 1. 使用百分号 % 格式化2. 使用 str.format() 方法3. 使用 f-string (格式化字符串字面量)格式说…

【上线文档】系统上线方案模板,计算机系统上线保障计划,系统运维信息系统运行保障方案,系统上线方案模板(Word原件)

一、项目背景和目标 二、项目需求分析 2.1 功能需求 2.2 非功能需求 三、系统设计 3.1 系统架构设计 3.2 数据库设计 3.3 接口设计 3.4 用户界面设计 四、系统开发 4.1 开发环境搭建 4.2 业务逻辑开发 4.3 数据库实现 4.4 接口实现 4.5 用户界面实现 五、系统测…

MySQL索引再认识

在最近的一次MySQL测试过程中&#xff0c;我的同事幺加明遇到了一些令人困惑的现象&#xff0c;这些现象超出了我们最初的预期。一直以来&#xff0c;我们在建立索引时&#xff0c;首要考虑的原则是在区分度大的字段上建立索引。然而&#xff0c;在实际测试中&#xff0c;我们发…

SQL靶场第一关

打开sql靶场 一.判断注入类型 在网址输入?id1&#xff0c;页面正常回显 我们在输入?id1,页面报错&#xff0c;说明存在sql注入 我们再输入?id1 and 11--&#xff0c;页面正常回显 我们在输入?id1 and 12--&#xff0c;页面没有回显 这里我们知道了是字符型注入 为什么是…

ollama运行qwen2.5-coder:7b

1.linux安装 curl -fsSL https://ollama.com/install.sh | sh ollama serve # 启动ollama ollama create # 从模型文件创建模型 ollama show # 显示模型信息 ollama run # 运行模型&#xff0c;会先自动下载模型 ollama pull # 从注册仓库中拉取模…

牛客——打印日期,日期累加(C++)

目录 1.日期累加 1.1题目描述 1.2思路 1.3 2.打印日期 2.1题目描述 2.2思路 2.3代码 1.日期累加 1.1题目描述 计算一个日期加上若干天后是什么日期。输入第一行表示样例个数m&#xff0c;接下来m行每行四个整数分别表示年月日和累加的天数。输出m行&#xff0c;每行按…

Stylus 浏览器扩展开发-Cursor AI辅助

项目起源 作为一个经常需要长时间盯着屏幕的开发者&#xff0c;我一直在寻找一个简单的方法来保护眼睛。最初的想法很简单&#xff1a;将网页背景色替换成护眼的豆沙绿。虽然市面上已经有类似的扩展&#xff0c;但我想要一个更加轻量且可定制的解决方案。 这个简单的需求逐渐…

AD20 原理图库和PCB库添加

一 点击右下角 二 点击Components 三 点击File-based Libraries Preferences 四 最后点击安装即可

微信小程序uni-app+vue3实现局部上下拉刷新和scroll-view动态高度计算

微信小程序uni-appvue3实现局部上下拉刷新和scroll-view动态高度计算 前言 在uni-appvue3项目开发中,经常需要实现列表的局部上下拉刷新功能。由于网上相关教程较少且比较零散,本文将详细介绍如何使用scroll-view组件实现这一功能,包括动态高度计算、下拉刷新、上拉加载等完整…

针对边缘计算优化LoRa的TinyML信道跳变管道

论文标题&#xff1a;Optimizing LoRa for Edge Computing with TinyML Pipeline for Channel Hopping&#xff08;针对边缘计算优化LoRa的TinyML信道跳变管道&#xff09; 作者信息&#xff1a;Marla Grunewald, Mounir Bensalem 和 Admela Jukan&#xff0c;来自德国布伦瑞克…

Linux-USB驱动实验

USB 是很常用的接口&#xff0c;目前大多数的设备都是 USB 接口的&#xff0c;比如鼠标、键盘、USB 摄像头等&#xff0c;我们在实际开发中也常常遇到 USB 接口的设备&#xff0c;本章我们就来学习一下如何使能 Linux内核自带的 USB 驱动。注意&#xff01;本章并不讲解具体的 …

操作系统文件管理相关习题2

文件管理的任务和功能文件管理 任务&#xff1a;对用户文件和系统文件进行组织管理&#xff0c;以方便用户使用&#xff0c;并保证文件的安全 功能&#xff1a;文件存储空间的管理&#xff0c;目录管理&#xff0c;文件读写管理和保护 目录管理 对目录管理的要求 实现按名存…

MYSQL - 索引详解

一 什么是索引&#xff1f; 实际上在上一篇介绍MYSQL的体系结构当中我们稍微提及了一点&#xff0c;在引擎层&#xff0c;我们提到不同的引擎对应的索引的实现方式&#xff0c;选择是不一样的。 简单理解&#xff0c;索引&#xff08;index&#xff09;其实就是一种帮助MYSQL高…

AI智能体Prompt预设词指令大全+GPTs应用使用

AI智能体使用指南 直接复制在AI工具助手中使用&#xff08;提问前&#xff09; 可前往SparkAi系统用户官网进行直接使用 SparkAI系统介绍文档&#xff1a;Docs 常见AI智能体GPTs应用大全在线使用 自定义添加制作AI智能体进行使用&#xff1a; 文章润色器 你是一位具有敏锐洞察…

el-tree树形结构拖拽层级错乱问题

背景: 项目中有个文件夹树形菜单,并且各级菜单中的子级元素是可以任意拖拽的,也就是树形结构拖拽修改分组。 问题分析&#xff1a; 出现拖拽层级错乱的问题&#xff0c;这通常意味着在进行节点拖拽操作后&#xff0c;树的层级关系没有正确地被维护。这可能是因为在更新节点位…

线程和进程(juc)

线程 一&#xff1a;概念辨析 1&#xff1a;线程与进程 进程&#xff1a; 1&#xff1a;程序由指令和数据组成&#xff0c;指令要执行&#xff0c;数据要读写&#xff0c;就需要将指令加载给cpu&#xff0c;把数据加载到内存&#xff0c;同时程序运行时还会使用磁盘&#x…

Java基础集合(Map)

存储特点 以键值对的形式存储, 一个元素由两个值组成 键(K-key): 无序, 无下标, 元素不可重复 值(V-value): 无序, 无下标, 元素可以重复 常用实现类 HashMap JDK1.2 底层哈希表实现 线程不安全, 效率高 LinkedHashMap JDK1.2 是HashMap的子类, 底层哈希表实现 线程不安全…