浏览器前端向后端提供服务

WEB后端向浏览器前端提供服务是最常见的场景,前端向后端的接口发起GET或者POST请求,后端收到请求后执行服务器端任务进行处理,完成后向前端发送响应。
那浏览器前端向后端提供服务是什么鬼?
说来话长,长话短说。我在人脸识别场景用了开源的face-api.js。它其实有浏览器端的完整模块,但是我觉得人脸识别在实际场景中应用,全部在前端做识别不太安全,因为浏览器侧未必完全安全可控,可以考虑人脸登记注册时前端将照片和用户绑定信息发到后端,后端识别出描述信息保存,识别阶段,浏览器调用摄像头识别出人脸描述信息,发往后端,在后端进行匹配验证,这样会更安全可靠一些。但是出现了一个状况,后端依赖库中有部分依赖不翻墙是下不下来。。。于是我想了一个变通的办法,人脸匹配在一个“可信前端”上执行,后端向它传输必要数据,它执行匹配判断,然后向后端传回匹配结果。思路有了,那怎么实现呢?
解决方案就是websocket,它支持双向通信。服务器上启动websocket server后,可信客户端上浏览器访问建立websocket连接,可以通过网络访问权限和服务器对请求源IP的识别来限制仅该浏览器端可以与服务器建立websocket连接。websocket的请求响应机制跟http的请求响应机制略有不同,将用户请求的响应放在websocket的消息接收处理中了。
简单示例如下:

const express = require('express');
const app = express();
var wsServer = require('express-ws')(app)
const stringRandom = require("string-random");var ress=[];app.use('/', express.static('./'));app.ws('/ws', (ws,req)=>{console.log(req.ip);ws.send(JSON.stringify({"msg":"websocket connected!"}));ws.on('message', msg => {jmsg=JSON.parse(msg);if (jmsg.type=="answer") {let res1=ress.find(item=>(item.ref==jmsg.res))res1["res"].json(JSON.stringify({"code":200,"msg":jmsg.msg}));}else console.log(msg);})
});app.post('/inq', express.json(),(req, res) => {const question = req.body.question;let refcode=stringRandom(32, { letters: 'ABCDEF' });ress.push({"ref":refcode,"res":res});Array.from(wsServer.getWss().clients)[0].send(JSON.stringify({"type":"ask","msg":question,"res":refcode}));
});app.listen(3000, () => { console.log(`express后端查询websocket demo启动`); })

浏览器地址栏输入http://localhost:3000/trust.html

<!DOCTYPE html>
<html>
<head>
<title>websocket前端充当查询服务器</title>
<meta charset="utf-8">
<script src="jquery-3.6.1.min.js"></script>
</head>
<body>
<script>var ws = new WebSocket("http://localhost:3000/ws");ws.onmessage = event => {let jvar=JSON.parse(event.data);console.log(`收到查询: ${jvar.msg}`) if (jvar.type=="ask") {ws.send(JSON.stringify({"type":"answer","res":jvar.res,"msg":"yes"}))}
}
</script>
</body>
</html>

Postwoman里POST请求http://localhost:3000/inq
在这里插入图片描述

该例子简单,html的js里处理消息type为"ask"的段内增加些代码就可满足更复杂的计算逻辑处理了,比如上面提到的人脸匹配,消息传入里question可以是一个object,比如包含待识别的人脸描述符,和已注册的人脸描述特征等。
这种变通的前后端模式既规避了纯前端方案的安全问题,又绕开了后端依赖模块缺失的问题,虽然比较另类,但是能解决问题就好。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LlamaIndex中的Tools工具概念和使用

概念 拥有适当的工具抽象是构建数据代理的核心。定义一组 Tools 类似于定义任何 API 接口&#xff0c;不同之处在于这些工具供代理使用&#xff0c;而不是供人工使用。我们允许用户定义 Tool 和 ToolSpec&#xff08;工具规格说明&#xff09;&#xff0c;其中包含一系列后台功…

微信步数C++

题目&#xff1a; 样例解释&#xff1a; 【样例 #1 解释】 从 (1,1) 出发将走 2 步&#xff0c;从 (1,2) 出发将走 4 步&#xff0c;从 (1,3) 出发将走 4 步。 从 (2,1) 出发将走 2 步&#xff0c;从 (2,2) 出发将走 3 步&#xff0c;从 (2,3) 出发将走 3 步。 从 (3,1) 出发将…

图论day55|深度优先搜索理论基础、98. 所有可达路径(卡码网)

图论day55|深度优先搜索理论基础、98. 所有可达路径(卡码网&#xff09; 思维导图汇总深度优先搜索理论基础98.所有可达路径(卡码网)1.邻接矩阵法2.邻接表法 思维导图汇总 深度优先搜索理论基础 深度优先搜索&#xff08;dfs&#xff09;与广度优先搜索&#xff08;bfs&#xf…

QSerialPort 串口通信示例

之前使用过MFC写过串口通信的示例&#xff0c;今年学了Qt&#xff0c;特意使用Qt写了串口通信的示例&#xff0c;发现比MFC要容易一些&#xff0c; MFC串口示例如下&#xff1a; Qt示例如下&#xff1a; Qt这个做的很简单&#xff0c;主要还是想验证一下api&#xff0c; 核心…

鸿蒙HarmonyOS之选择相册文件(照片/视频)方法

一、新建文件工具类FileUtil.ets 包含&#xff1a;选择照片方法、获取文件类型方法、去除后缀、获取后缀方法 import { BusinessError, request } from kit.BasicServicesKit; import photoAccessHelper from ohos.file.photoAccessHelper; import bundleManager from ohos.b…

Python中对象obj类型确定最pythonic的方式——isinstance()函数

python中确定对象obj的类型&#xff0c;isinstance函数最是优雅&#xff0c;type、issubclass等函数也可以&#xff0c;但终究“曲折”。 (笔记模板由python脚本于2024年10月07日 19:42:38创建&#xff0c;本篇笔记适合喜欢python的coder翻阅) 【学习的细节是欢悦的历程】 Pyth…

算法专题四: 前缀和

目录 1. 前缀和2. 二维前缀和3. 寻找数组的中心下标4. 除自身以外数组的乘积5. 和为k的子数组6. 和可被K整除的子数组7. 连续数组8. 矩阵区域和 博客主页:酷酷学!!! 感谢关注~ 1. 前缀和 算法思路: 根据题意, 创建一个前缀和数组, dp[i] dp[i -1] arr[i], 再使用前缀和数组,…

排查和解决JVM OOM实战

JVM OOM介绍 Java内存区域布局 下面的分析中都是基于JDK 8开始的。关于JMM不过多介绍每个区域的作用。OOM不单只会发生在堆内存&#xff0c;也可能是因为元空间或直接内存泄漏导致OOM&#xff0c;此时在OOM的详细信息中会有不同体现。 Java OOM的类别 java.lang.OutOfMemory…

王者农药更新版

一、启动文件配置 二、GPIO使用 2.1基本步骤 1.配置GPIO&#xff0c;所以RCC开启APB2时钟 2.GPIO初始化&#xff08;结构体&#xff09; 3.给GPIO引脚设置高/低电平&#xff08;WriteBit&#xff09; 2.2Led循环点亮&#xff08;GPIO输出&#xff09; 1.RCC开启APB2时钟。…

HarmonyOS/OpenHarmony 自定义弹窗页面级层级控制解决方案

关键词&#xff1a;CuntomDialog自定义弹窗、SubWindow子窗口、页面级、弹窗层级控制、鸿蒙、弹窗展示层级异常 问题存在API版本&#xff1a;API10 - API12&#xff08;该问题已反馈&#xff0c;期望后续官方能增加页面级控制能力&#xff09; 在正常的鸿蒙app开发过程中&…

零散的知识

1.物化 在SQL中&#xff0c;物化&#xff08;Materialization&#xff09;是指将查询结果保存为物理数据结构以供后续使用的过程。这与普通的视图或查询不同&#xff0c;物化视图会存储查询的结果&#xff0c;而不是每次查询时都动态地重新计算数据。 ①物化视图 物化视图是一…

STM32 HAL 内部FLASH傻瓜式教程 各种型号单片机都适用主要解决网上例程HAL库无法写入问题

1、简介 本文主要针对网上例程FLASH无法写入问题,傻瓜式操作。 2、BSP_Flash.c #include "BSP_Flash.h" uint32_t FlashData; uint32_t Flashaddr = 0x08020000; static uint8_t stmflash_get_error_status(void) {uint32_t res;res = FLASH->SR;if (res &…

TIM(Timer)定时器的原理

一、介绍 硬件定时器的工作原理基于时钟信号源提供稳定的时钟信号作为计时器的基准。计数器从预设值开始计数&#xff0c;每当时钟信号到达时计数器递增。当计数器达到预设值时&#xff0c;定时器会触发一个中断信号通知中断控制器处理相应的中断服务程序。在中断服务程序中&a…

LeetCode讲解篇之239. 滑动窗口最大值

文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 我们维护一个长度为k的窗口&#xff0c;然后窗口从数组最左边一直移动到最右边&#xff0c;记录过程中窗口中的最大值&#xff0c;就是答案 我们每次查询长度为k的窗口最大值是什么时间复杂度是O(k)的&#xff0…

千益畅行,旅游创业新模式的创新与发展

旅游创业的时代背景与旅游卡的崛起&#xff0c;在当今快节奏的时代&#xff0c;旅行成为人们生活中的重要部分&#xff0c;随着科技发展和市场需求的变化&#xff0c;旅游创业项目中的旅游卡应运而生。 其中&#xff0c;“千益畅行” 旅游卡作为新兴力量&#xff0c;在共享经济…

XHTML 简介

XHTML 简介 XHTML,即“可扩展超文本标记语言”(eXtensible HyperText Markup Language),是一种基于XML的标记语言,旨在取代HTML作为网页内容的标准格式。XHTML由万维网联盟(W3C)开发,旨在实现HTML向XML的过渡,提供更严格、更清晰的语法规则。本文将详细介绍XHTML的历…

rust中async/await的使用

在Rust中,async/await 用于编写异步代码。它允许您以同步的方式编写异步代码,使得异步操作更易于理解和编写。 安装依赖: cargo add futures cargo add async-std 使用示例: 示例1: use async_std::task::block_on;fn main() {block_on(hello()); }async fn hello() …

`git fetch` 检查更新

git fetch 是 Git 中的一个命令&#xff0c;主要用于从远程仓库获取最新的更新&#xff0c;但不会自动将这些更新合并到你的本地分支。它的主要作用是让你可以查看远程仓库的最新变化&#xff0c;而不改变你当前正在工作的代码。 1. 获取远程更新 git fetch 会从远程仓库下载…

【移动端】Viewport 视口

1. 什么是 Viewport&#xff08;视口&#xff09;&#xff1f; Viewport&#xff08;视口&#xff09;是指浏览器中用户可见的那部分网页内容的区域&#xff0c;简单来说&#xff0c;它是用户当前看到的网页的“窗口”区域。在不同的设备上&#xff0c;Viewport 的大小会有所不…

【SVN】一文读懂Subversion(SVN)

SVN 一、SVN简介1. 概念1.1 repository&#xff08;源代码库&#xff09;1.2 Checkout&#xff08;提取&#xff09;1.3 Commit&#xff08;提交&#xff09;1.4 Update (更新) 2. SVN的主要功能2.1 目录版本控制2.2 真实的版本历史2.3 自动提交2.4 纳入版本控管的元数据2.5 选…