# browserfingerprint **Repository Path**: weiyani/browserfingerprint ## Basic Information - **Project Name**: browserfingerprint - **Description**: 基于FastAPI的浏览器指纹采集分析平台 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-01-18 - **Last Updated**: 2025-03-14 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ## 项目介绍 [该网站](http://121.199.20.176/)能够方便快捷地查询到自己的浏览器指纹，向用户科普浏览器指纹的具体概念以及增强用户对浏览器指纹的重视程度。 # 设计文档 ## 文档标题页的设计 图片+中英文项目标题 版本信息表格 ## 目录 ## 引言 1. 编写目的 * 将更便捷的网站登录需求转换为浏览器指纹与账号关联的设计；逐步开发强壮的浏览器指纹识别系统；使设计适合于实施环境，包括程序系统的基本处理流程，程序系统的组织结构、模块划分、功能分配、接口设计、运行设计、数据结构设计和安全性设计等，为程序的详细设计奠定基础。 此文档预期的读者为软件设计人员。 2. 背景 * 问题描述 * 随着人们对互联网的需求增加，传统的密码登录已无法满足大众。 * cookie等账号密码储存方式的易泄露性也在日渐提高。 * 一个用户多台设备登录的关联性。 * 一台设备多个用户的区分。 3. 术语定义 - 浏览器指纹 - 用户标识符 - TODO: 术语列表。 4. 参考资料 ## 总体设计 * 系统整体设计 系统初始代码于Kali Linux系统下完成，服务器端代码由Python编写，完成后端提取HTTP属性的功能，并在后续工作中将提取到的指纹传至前端界面进行展示。前端界面由HTML原始文件完成基本布局，使用Javascript脚本完成提取展示JavaScript属性功能然后CSS实现界面的美化。用户浏览器主要有用户接口、浏览器引擎、Javascript解释器等部分组成。当用户想要访问网站时，会先通过用户接口在浏览器内输入其想要访问的网站地址，本次毕业设计中用户只需要访问本网站的公网ip地址即可进行访问。浏览器引擎将会进一步调用渲染引擎，对用户输入的地址进行预解析，然后向网站服务器端发送网页请求。网站服务器在接收到用户的请求之后，对获取到的HTTP头信息进行分析，完成之后向用户返回包含Javascript脚本的页面，即用户的浏览器界面显示这个界面。用户浏览器收到页面后，将调用Javascript解释器执行此页面里脚本内容，获取HTTP头属性，并将JavaScript属性信息回传至服务器。服务器接收到回传消息之后，从中提取出用户的JavaScript属性信息。 ### 简述 ### 需求分析 * 基本工具需求 TODO: 工具列表 * 基本要素需求 * 网页视觉设计与审美需求 * 图片设计 1）图片要素运用图片是设计与制作网页必不可少的部分,图片的运用能够给人更加直观的信息，图片的要求与页面的内容有关，在相关图片的制作过程中还是下了一定的功夫，希望能吸引网民的眼球，能够起到很好的宣传广告效应，再加上图片可以利用Photoshop修改和制作因而更能够设计出较好的网页。 TODO: 项目落实，网页添加图片。 * 网站设计 本作品设计实现浏览器指纹检测系统, 利用检测到的指纹数据对已有的登录系统进行改进， 在供用户查询自己浏览器指纹的同时， 对收集到的浏览器指纹数据进行分析， 使用户能够更方便快捷地查询到自己的浏览器指纹。 * 特殊需求 * 指纹数据获取 * 有哪些指纹(参考论文) * 登录系统 标识符的增加 * 运行环境 环境依赖 项目运行需要 **Python** 环境 在项目运行前，需要通过 **pip** 安装 **Flask** 和 **dict_to_db**： ``` pip install Flask pip install dict_to_db ``` ### 系统体系结构 * 网站结构 * 指纹获取 指纹数据获取 基于增量式聚类算法的指纹识别算法,在浏览器指纹属性发生变化情况下仍能进行身份认证,并根据结果更新数据库.并在系统空闲时更新指纹数据的聚类中心机制和识别失败后的二次验证机制,进一步提高身份认证的可靠性和有效性。是将一些提取到的浏览器指纹属性里具有辨识度的属性，通过数据处理得出一个值，即浏览器指纹。浏览器指纹是指仅通过浏览器的各种信息，如CPU核心数、显卡信息、系统字体、屏幕分辨率、浏览器插件等组合成的一个字符串，就能近乎绝对定位一个用户，就算使用浏览器的隐私窗口模式，也无法避免。 这是一个被动的识别方式，主要是从服务器端出发，让用户手上的浏览器进行一系列任务，然后再返回一些浏览器特性，经过一些处理后，就会形成一个人特有的浏览器指纹，具体环节如图1。也就是说，理论上你访问了某一个网站，那么这个网站就能识别到你，虽然不知道你是谁，但你有一个唯一的指纹，将来无论是广告投放、精准推送、安全防范，还是其他一些关于隐私的事情，都非常方便。 * 登录流程 基于浏览器指纹的登录实现形式(基本流程) 1. 对第一次登录的用户进行用户名的设置，并与当下的浏览器指纹进行关联。 2. 对当前打开网页的用户进行浏览器指纹的识别，与服务器已有的进行匹配并输出个人用户名（类比与个人标识符，但个人标识符具有隐私性，不同于用户名的展露在外的公开信息）。 3. 多人登录一个设备怎么区分，一人登录多个设备仍需重复关联:可选择输入用户名（等同于用户标识符），以此区别一台设备的多个账号。 * 假定和约束 ### 服务器端设计 * Web应用框架选择 设计系统就要有一个完整的前后端框架，常用的Web框架主要有： Express： Node.js 的一个MVC开发框架，支持jade等多种模板，是Node.js上最流行的Web开发框架。 Django：由Python写成的开源的Web应用框架。采用了MVC的软件设计模式。 Meteor：新型的JavaScript框架，用于WebApp应用程序开发。 Symfony：一款基于MVC架构的PHP开源框架，基于PHP5开发。 Flask：一个轻量级的、高扩展性的Web应用“微”框架。 在以上介绍的以及等等其他的一些Web应用框架中，由于系统需要大量的用户来进行数据收集，所以选择的编程语言要有较强的可移植性，以及最终系统呈现的效果是网站的形式，所以决定选择使用Python语言进行开发的Flask框架。 * Flask框架简介: Flask是一个基于Python编写并且依赖于Jinja2模板引擎和Werkzeug WSGI 服务的一个轻量级Web应用框架，用来支持动态网站、网络应用程序及网络服务的开发。其使用最简单的核心，并允许使用者通过Flask-extension扩展各种功能，以满足Web应用开发中的所有需求。 WSGI即Web Server Gateway Interface(WEB服务网关接口)，定义了用python编写的web app与web server之间接口格式。 Flask框架使用MTV的模式： M：Models，模型层，主要负责业务对象和数据库对象。 T：Templates，模板层，用于处理用户要显示的内容，如把html界面展示给用户。 V：Views，视图层，负责业务逻辑，处理与用户交互的部分内容（处理用户的请求并给出响应），并在适当的时候调用M和T。 整体框架运行流程如下： 在浏览器页面发送请求访问URL URL匹配到相应的视图函数 视图函数根据业务逻辑去Models中取数据，而Models则是在数据库中取数据 Models从数据库中取得数据后，将数据返回给视图函数 视图函数将数据返回并渲染到前端Template模板，最终呈现在浏览器上 * Flask模板渲染 什么是模板： 模板是一个包含所要响应的文本的文件，一般是html文件，模板中允许使用"占位变量"来呈现动态的内容，"占位变量"最终会被实际的值所替换，模板最终也会被解析成响应的文本，这一过程就称为"渲染"。 Flask配备了Jinja2 模板引擎，可以直接使用render_template()方法来渲染模板，只需要将模板名和作为关键字的参数传入模板的变量。 默认模板目录 默认情况下，Flask会在程序文件夹中的templates子文件夹中寻找渲染模板。所以，如果应用的是一个模块，这个templates文件夹应该与模块同级；如果应用的是一个包，那么这个文件夹应该作为包的子目录。 * 文件存储 由于要对每个用户的数据进行一个整体的存储，所以需要将每个用户的数据单独存储起来，于是，用到了文件存储这个形式。利用当前系统的时间戳作为文件名，由于时间戳一般是不会相同的，那么每个用户的就会拥有自己的一个文件来单独存储自己指纹数据，不会混淆起来。 ### 系统界面 * 网站页面规划 该网站通过导航栏的设立，分为“首页”、“我的指纹”、“浏览器指纹”、“指纹属性”、“问题反馈”、“数据分析”。在首页可以看到网站二维码，以及“查看我的浏览器指纹”按钮。下面可以看到什么是浏览器指纹、查看各种浏览器属性、问题请反馈、数据分析情况等按钮，对用户进行初步科普。在“我的指纹”导航栏下，可以看到用户浏览器指纹的相似比。此页面的下方，网站以列表的形式展现了用户浏览器指纹的属性。在“浏览器指纹”这一导航栏的下方，设立了二级导航栏，从总体上概述了浏览器指纹的各种属性，而“指纹属性”这一导航栏的下方，是更为详细的浏览器指纹属性的介绍，方便用户全方位了解该网站所收集的指纹属性。在“用户反馈”这一导航栏的页面，给用户提供了具体可以反馈问题为我们的渠道。最后，在“数据分析”这一页面，设计了饼状图，直观的反映了数据统计情况，在页面左上方，可以进行日期的筛选，满足用户多元化的需求。同时可以看到该网站系统数据总量与当前查询数据总量，真正做到了公开透明。 * 网站分块功能 * 一、首页 首页有一个整体的所有功能展示，有一个网站的二维码，用户除了通过输入网站的公网ip访问网站以外，还可以通过扫描网站二维码访问网站。 * 二、指纹属性的查找 界面顶端的“我的指纹”和主要按钮“查看我的浏览器指纹”都用来跳转到查看指纹属性的界面。我们在浏览器上访问网站，点开后，就能看到自己的浏览器指纹。 * 三、浏览器指纹界面 浏览器指纹界面主要对浏览器属性进行了一些基本的介绍，具体有：什么是浏览器指纹、怎么收集浏览器指纹、指纹是怎么被利用的、指纹属性是怎么进行数据处理的。界面中有一个检索功能，方便用户能够快速跳转到自己想要查看的内容。设置有一个检索功能，用户可以直接通过点击想要查看的词条跳转到词条具体内容部分。 * 四、访问提醒 网站的主要功能是收集用户的浏览器指纹，并将获得的数据储存在服务端，可以在服务端直接查看用户的指纹属性。浏览器指纹的获取必然会涉及用户隐私，因此主页在明显位置设立了访问提醒，告诉用户该网站将收集其浏览器指纹>。 * 五、指纹属性界面 指纹属性界面列出了一些能够提取的重要指纹属性以及其简单的信息描述，以表格的形式呈现，使用户能够更快地查询到自己想要快速了解的指纹属性。 * 六、用户反馈 用户反馈界面用来给用户即时地反馈访问过程中遇到的任何问题，可以是界面显示的错误也可以是发现浏览器指纹的提取有错误。 * 七、数据分析 结果数据分析界面首先有一个用户选择查看范围的时间按钮。用户可以选择自己查看的数据范围，可以查看今天的数据，也可以查看三天之内、该星期之内以及所有时间的数据分析结果。用户点击选择自己想要查看的时间的数据分析之后>，服务器端将会计算出对应时间内的实时数据分析结果。然后将数据发送到前端界面，进一步通过饼图的形式进行可视化展示。 * 界面的美化 改进界面配色，在一些图标和按钮的交互上做改进 TODO ### 指纹收集模块设计 主要通过用户浏览器获取的浏览器属性配置信息和浏览器通信协议的字段特征信息等，用于识别目的。将一些提取到的浏览器指纹属性里具有辨识度的属性，通过数据处理得出一个值，即浏览器指纹。 因为我们的实验使用的是一种新的系统指纹技术：通过将文本和图像以及WebGL 场景渲染到一个 HTML5 的 canvas 标签上，检查生成的像素来作为指纹的检测指标。这种指纹很容易获取并且对用户透明，不同的系统不同的浏览器不同的硬件等都会产生不同的输出，这样我们的指纹自然也是不同的。即使是很简单的测试也会得出不同的结果。这种结果是高熵的，对于我们的指纹检测也是有极大的意义仅通过浏览器的各种信息，如CPU核心数、显卡信息、系统字体、屏幕分辨率、浏览器插件等组合成的一个字符串，就能近乎绝对定位一个用户，就算使用浏览器的隐私窗口模式，也无法避免。 主要是从服务器端出发，让用户手上的浏览器进行一系列任务，然后再返回一些浏览器特性，经过一些处理后，就会形成一个人特有的浏览器指纹。提取到浏览器之后，这些数据多为特殊类型属性，比如服务器端提取到的headers信息为EnvironHeaders类型，那么在进行后续的数据处理之前，首先要将将获取的各个属性转化为字符串类型。 主要从两个方面进行提取： * 1）HTTP属性的提取： 对于HTTP属性利用Flask框架下的request对象来提取客户端发送给服务器的数据。首先要在flask模块里导入request对象，然后进行指纹提取。 我们提取到的指纹数据的类型大多为很长的 base64 编码类型字符串，那么对这些数据进行分析显然是不合适的，所以这时我们就要对数据进行处理。因为指纹研究的目的就是根据指纹的特殊的值识别用户。所以将已有的字符串类型的属性进行 hash，映射成简短的数值，方便我们进行数据的对比。 * Flask 框架 Flask 是目前非常流行的 web 框架，它的运行的基本模式如下： 1）当客户端想要获取资源时，会通过浏览器发起 HTTP 请求，访问 URL。 2）服务器会把来自客户端所有的请求交给 Flask 实例处理。 3）程序实例做路由分发。（路由一般通过程序实例的装饰器实现。 4）程序根据 URL 请求找到对应的视图函数并调用该函数。 5）视图函数根据逻辑去 Models 取数据，Models 则会去数据库中取数据返回。 6）视图函数将数据传到前端 HTML 模板，将响应数据返回给浏览器，并显示在页面上。 * Flask 路由 一个 web 的网页会有不同的路径对应不同的功能，路由就是建立了请求的url和对应处理函数的一个映射关系。Flask 中的路由我们称之为注册路由。使用的是装饰器 app.route()来注册路由，如代码 4-1 所示。它的核心路由逻辑是werkzeug，它的主要功能有：添加路由规则（map.add）、将路由表绑定到环境（map.bind）、匹配 url（urls.match）。正常能匹配到的情况下返回 value,如果没有找到就报 404 错误。 * 2）：JavaScrip指纹属性：对于JavaScript属性，JavaScript语言提供了Browser 对象来获取浏览器相关的各种信息。 ## 详细设计 ### 首页 * 在页面顶端放置一个浅蓝色圆角矩形框，从左到右依次放置了六个可点击交互的中文字段，分别为“首页”、“我的指纹”、“浏览器指纹”、“指纹属性”、“问题反馈”和“数据分析”： 1. “首页”：该可交互中文字段旨在引导用户点击此字段使网页主动跳转到“首页”这个网站网页界面。 2. “我的指纹”：该可交互中文字段旨在引导用户点击此字段使网页主动跳转到“我的指纹”这个网站网页界面。 3. “浏览器指纹”：该可交互中文字段旨在引导用户点击此字段使网页主动跳转到“浏览器指纹”这个网站网页界面。 4. “指纹属性”：该可交互中文字段旨在引导用户点击此字段使网页主动跳转到“指纹属性”这个网站网页界面。 5. “问题反馈”：该可交互中文字段旨在引导用户点击此字段使网页主动跳转到“问题反馈”这个网站网页界面。 6. “数据分析”：该可交互中文字段旨在引导用户点击此字段使网页主动跳转到“数据分析”这个网站网页界面。 * 在浅蓝色圆角矩形框的正下方放上了这个界面的标题“了解您的浏览器指纹”。 * 在标题的左下方放置一个二维码供手机扫描并登入这个网站。 * 二维码的右边的上半部分放上了对本网站的简介：“该网站用于查看自己的浏览器指纹，旨在收集更多的浏览器指纹数据，帮助研究开发提供数据以设计更好的防御系统！” * 在对网站简介的正下方设置了一个“查看我的浏览器指纹”的按钮，用于指引用户点击并触发网站的后台程序，使网站可以收集用户的浏览器指纹并进行分析以便于后面页面的内容呈现。 * 在“查看我的浏览器指纹”这个按钮的下方还有一段文字提示用户：“如果您点击这个按钮，本网站将收集您的浏览器指纹。” * 在整个界面的下半部分设计了四个依次从上往下排列的文本框（且这四个文本框均用浅蓝色圆角矩形框作为底部背景）并在其中带上了与之相关的链接，使它能够拥有跳转功能： 1. “如果你想知道什么是浏览器指纹请点击这里”：在“这里”二字上设计了链接并且以下划线和区别于普通字体的颜色使用户得知这是一段可以交互的文字，同时此链接是指向我们设计的一个关于浏览器指纹介绍的一个网页界面。 2. “查看各种浏览器属性这里”：在“这里”二字上设计了链接并且以下划线和区别于普通字体的颜色使用户得知这是一段可以交互的文字，同时此链接是指向我们设计的一个关于对用户自己的各种浏览器属性详细解说的集成页面。 3. “如果您有任何问题请反馈这里”：在“这里”二字上设计了链接并且以下划线和区别于普通字体的颜色使用户得知这是一段可以交互的文字，同时此链接是指向我们设计的一个为大家提供专门的问题反馈页面。 4. “查看当前数据分析情况这里”：在“这里”二字上设计了链接并且以下划线和区别于普通字体的颜色使用户得知这是一段可以交互的文字，同时此链接是指向我们设计的一个关于现有的服务器数据库里的所有浏览器指纹的相关数据分析的结果呈现界面。 ### “我的指纹” * 在页面顶端放置一个浅蓝色圆角矩形框，从左到右依次放置了六个可点击交互的中文字段，分别为“首页”、“我的指纹”、“浏览器指纹”、“指纹属性”、“问题反馈”和“数据分析”： 1. “首页”：该可交互中文字段旨在引导用户点击此字段使网页主动跳转到“首页”这个网站网页界面。 2. “我的指纹”：该可交互中文字段旨在引导用户点击此字段使网页主动跳转到“我的指纹”这个网站网页界面。 3. “浏览器指纹”：该可交互中文字段旨在引导用户点击此字段使网页主动跳转到“浏览器指纹”这个网站网页界面。 4. “指纹属性”：该可交互中文字段旨在引导用户点击此字段使网页主动跳转到“指纹属性”这个网站网页界面。 5. “问题反馈”：该可交互中文字段旨在引导用户点击此字段使网页主动跳转到“问题反馈”这个网站网页界面。 6. “数据分析”：该可交互中文字段旨在引导用户点击此字段使网页主动跳转到“数据分析”这个网站网页界面。 * 在浅蓝色圆角矩形框的正下方放上了这个界面的标题“我的浏览器指纹”。 * 在标题的左下方有一句文字“我是独特的吗？”。 * 在上一句文字的下方有一段对上一句文字的回答：“您在当前n（n为当前数据库中所有数据的总和）个数据中是独特的!您当前的浏览器指纹数据为xxxxx（xxxxx为浏览器指纹的具体数据经过哈希处理后得出的一串数字，当前长度仅供参考）!” * 在这一段文字的下方，还有一句“您与当前n（n为当前数据库中与当前用户相同的浏览器指纹数目）个数据相等，相似比为 p%（p由具体数据得出）”。 * 在上一句文字的下方有一个以浅蓝色圆角矩形框为底的一段文字“我的浏浏览器指纹属性”。 * 在第二个浅蓝色圆角矩形框的下面是第一个表格，该表格囊括了用户的浏览器指纹的HTTP属性，如“Host”、“Connection”等。 * 在第一个表格的下面是第二个表格，该表格囊括了用户的浏览器指纹的Javascript属性，如“APPName”、“APPVersion”等。 * 在第二个表格的下面是第三个表格，该表格囊括了用户的浏览器所安装的插件列表，如“PDF Viewer”、“Chrome PDF Viewer”等。 * 在第三个表格的下面是第四个表格，该表格囊括了用户的浏览器指纹的canvas属性，如“textBaseline”、“text_Arial”等。 * 在第四个表格的下面是第五个表格，该表格囊括了用户的浏览器指纹的webgl属性，如“webgl_vendor”、“webgl_renderer”等。 * 在第五个表格的下面是第六个表格，该表格囊括了用户的浏览器指纹的webgl补充属性，如“alpha bits”、“blue bits”等。 ### “浏览器指纹” * 浏览器指纹界面先建立了一个检索表，对浏览器指纹属性进行了一些基本的介绍，检索内容有：什么是浏览器指纹、怎么收集浏览器指纹、指纹是怎么被利用的、指纹属性是怎么进行数据处理的、Canvas指纹、WebGl指纹、WebRTC指纹。 通过检索表，用户可以快速跳转到自己想查看的内容。 1.点击 “什么是浏览器指纹” ，跳转后用户可看到两块内容，第一块介绍浏览器指纹含义，第二块是本网站主要收集的浏览器指纹属性，如: the Host header the Connection header the Upgrade-Insecure-Requests header the Accept header the Accept encoding header the Accept language header the APP name the APP version the Browser language the User agent the Platform the Screen height the Screen width the System language 2.点击 “怎么收集浏览器指纹” ，用户可以了解到收集浏览器指纹数据是不需要安装任何形式的cookie的，特定浏览器进行指纹操作对于用户来说是无状态的和透明的。同时展示了我们网站是如何收集浏览器指纹数据的：从连接启动，用户代理和接受标头自动发送到网站；通过JavaScript允许访问许多浏览器填充的功能，例如安装在用户设备上的插件； 同时如果安装了Flash插件，它的富编程接口（API）提供了对许多特定于系统的属性的访问：操作系统的确切版本、字体列表、屏幕分辨率、时区；还能通过显示HTML5画布元素，由于设备之间的图像呈现略有不同，因此可以收集硬件或软件配置上的小差异，可以检测到最小的像素差，这叫做画布指纹。 3.点击 “指纹是怎么被利用的” ，用户可以了解到像所有的追踪技术一样，浏览器指纹技术是一把双刃剑。通过检查登录到特定站点的用户是否可能是合法用户，指纹可以以建设性的方式用于打击欺诈或凭证劫持。但同时指纹也可以以更可疑的方式使用，以便在用户不知情的情况下跨网站跟踪用户，并收集有关其习惯和品味的信息。指纹甚至可以以破坏性的方式使用：如果攻击者知道特定设备上安装了哪些软件模块（特定浏览器版本、插件等），他们就可以针对这些特定模块或模块组合进行攻击。 4.点击 “指纹属性是如何进行数据处理的” ，我们在获取到所有HTTP协议报文头特征信息之后，将所有的字段信息组成一个字符串。利用BKDR散列技术将所有字段信息映射为一个数值，以该数值作为用户浏览器的唯一标识码。当用户再次访问网站服务器时，服务器通过比较两次探测得到的浏览器指纹散列值是否相同，就可以判断两个浏览器是否相同，实现浏览器指纹识别的目的。 5.点击 “Canvas 指纹” ，Canvas 指纹是高级指纹中较为典型的一种。Canvas（画布）是 HTML5 中一种动态绘图的标签，可以使用其生成甚至处理高级图片。 6.点击 “WebGl指纹” ，我们阐述了WebGl指纹的主要含义，其与 Canvas 指纹有一定的相似之处，基本上是相同的原理，只不过这里会将画好的 3D 图像内容和 WebGL 的某些属性值绑定在一起。通过哈希处理，会取得一个缩减过的信息量却又保留了信息差的的字符串作为 WebGL 指纹。通过 HTMLCanvasElement 元素可以获取到 WebGL 信息，通过 WebGL 可以获取到用户的硬件信息。 点击 “WebRTC指纹” ，WebRTC（网页实时通信，Web Real Time Communication），是可以让浏览器有音视频实时通信的能力，它提供了三个主要的 API 来让JS可以实时获取和 交换音视频数据，MediaStream、RTCPeerConnection 和 RTCDataChannel。因为如果要使用WebRTC获得通信能力，用户的真实IP就得暴露出来（NAT 穿透），所以 RTCPeerConnection 就提供了这样的API，直接使用JS就可以拿到用户的IP地址。同时用户的内网IP地址在大多数情况下不会改变，所以也是可以用来当做用户指纹的其中一个因子。 ### “指纹属性” * 在页面顶端放置一个浅蓝色圆角矩形框，从左到右依次放置了六个可点击交互的中文字段，分别为“首页”、“我的指纹”、“浏览器指纹”、“指纹属性”、“问题反馈”和“数据分析”： 1. “首页”：该可交互中文字段旨在引导用户点击此字段使网页主动跳转到“首页”这个网站网页界面。 2. “我的指纹”：该可交互中文字段旨在引导用户点击此字段使网页主动跳转到“我的指纹”这个网站网页界面。 3. “浏览器指纹”：该可交互中文字段旨在引导用户点击此字段使网页主动跳转到“浏览器指纹”这个网站网页界面。 4. “指纹属性”：该可交互中文字段旨在引导用户点击此字段使网页主动跳转到“指纹属性”这个网站网页界面。 5. “问题反馈”：该可交互中文字段旨在引导用户点击此字段使网页主动跳转到“问题反馈”这个网站网页界面。 6. “数据分析”：该可交互中文字段旨在引导用户点击此字段使网页主动跳转到“数据分析”这个网站网页界面。 * 在浅蓝色圆角矩形框的正下方放上了两个表格都是关于“可获取的浏览器属性配置信息”：如“浏览器基本属性”、“系统基本属性”等。 ### “问题反馈” * 在页面顶端放置一个浅蓝色圆角矩形框，从左到右依次放置了六个可点击交互的中文字段，分别为“首页”、“我的指纹”、“浏览器指纹”、“指纹属性”、“问题反馈”和“数据分析”： 1. “首页”：该可交互中文字段旨在引导用户点击此字段使网页主动跳转到“首页”这个网站网页界面。 2. “我的指纹”：该可交互中文字段旨在引导用户点击此字段使网页主动跳转到“我的指纹”这个网站网页界面。 3. “浏览器指纹”：该可交互中文字段旨在引导用户点击此字段使网页主动跳转到“浏览器指纹”这个网站网页界面。 4. “指纹属性”：该可交互中文字段旨在引导用户点击此字段使网页主动跳转到“指纹属性”这个网站网页界面。 5. “问题反馈”：该可交互中文字段旨在引导用户点击此字段使网页主动跳转到“问题反馈”这个网站网页界面。 6. “数据分析”：该可交互中文字段旨在引导用户点击此字段使网页主动跳转到“数据分析”这个网站网页界面。 * 在浅蓝色圆角矩形框的正下方设置了用户提交反馈的可输入文本框。 ### “数据分析” * 在页面顶端放置一个浅蓝色圆角矩形框，从左到右依次放置了六个可点击交互的中文字段，分别为“首页”、“我的指纹”、“浏览器指纹”、“指纹属性”、“问题反馈”和“数据分析”： 1. “首页”：该可交互中文字段旨在引导用户点击此字段使网页主动跳转到“首页”这个网站网页界面。 2. “我的指纹”：该可交互中文字段旨在引导用户点击此字段使网页主动跳转到“我的指纹”这个网站网页界面。 3. “浏览器指纹”：该可交互中文字段旨在引导用户点击此字段使网页主动跳转到“浏览器指纹”这个网站网页界面。 4. “指纹属性”：该可交互中文字段旨在引导用户点击此字段使网页主动跳转到“指纹属性”这个网站网页界面。 5. “问题反馈”：该可交互中文字段旨在引导用户点击此字段使网页主动跳转到“问题反馈”这个网站网页界面。 6. “数据分析”：该可交互中文字段旨在引导用户点击此字段使网页主动跳转到“数据分析”这个网站网页界面。 * 在浅蓝色圆角矩形框的正下方放上了本界面的标题“数据分析”。 ## 项目目录结构 ├─README.md ├─test.py //主程序 ├─DATA.db //数据库 ├─.vscode ├─templates //前端页面 └─static //指纹数据及javascript函数 ### 功能模块分析与设计 ### 接口设计 ### 系统数据结构设计 ## 已实现的功能 ### 功能1 收集并分析使用者的浏览器指纹 ### 功能2 对收集到的数据进行结构的分析同时给出一定的数据图，如饼状图等 ### ... ## 还需实现的功能 有什么建议的话可以写到这里 ### 导航栏的完善