浅析对开源项目的前端部分进行静态代码分析

本文涉及的产品
智能开放搜索 OpenSearch行业算法版,1GB 20LCU 1个月
智能开放搜索 OpenSearch向量检索版,4核32GB 1个月
OpenSearch LLM智能问答版免费试用套餐,存储1GB首月+计算资源100CU
简介: 浅析对开源项目的前端部分进行静态代码分析

可能很多朋友会觉得,前端其实是没有必要进行静态代码分析的,殊不知,往往一些关键点会出现在前端代码中,比如前后端交换加密的算法,以及一些接口的使用方法。
分析的源项目地址:
ps:是一个利用知识图谱构建知识库的开源项目,领域知识的构建。

针对上一篇中的开源项目,这一篇我们开始分析其前端部分的代码。
在这里插入图片描述

前端部分的代码在studio/webui下,打开目录,我们可以看到这样一个结构:
在这里插入图片描述

抛开Dockerfile和webui.go这样的构建打包文件不谈,这就是一个前端项目的标准结构。

构建前端调式环境

首先,需要了解的一个点是,这样项目的API结构究竟是如何调用的,这类前端工程化的项目一般都会全局配置代码,所以需要找到全局配置的文件。
在这里插入图片描述

这里应该是对不同的url前缀调用不同的接口,这里就要使用到我们之前搭建的远程服务器。

从代码来看,这里区分了以下几种前缀:

prefix target description
/api/builder http://10.4.69.51 在注释里面有:http://10.2.174.230:6475
/api/studio http://10.4.69.51 http://10.2.174.230:6800
/api/engine http://10.4.69.51 http://10.2.174.230:6474

然后我们再翻看以下开源版本打开的docker情况:
在这里插入图片描述

发现刚好有注释中的几个端口,那么我们直接将该项目启动起来,target配置成我们在远端的地址。
同时上面的前缀也和我们的文档里面的描述一致
在这里插入图片描述

然后执行

yarn start

启动项目即可。
额,失败了。应该是改版了,还是改成只配置一个相同的。成功。
在这里插入图片描述

在这里插入图片描述

我们现在就构建起了整个前端调试的环境,即:前端使用本地,调用远程服务器端口。

分析前端结构

在这里插入图片描述

首先,assets是资源目录,里面包含了各类静态资源。
components是组件目录,页面即组件,组件是嵌套的。
download是要下载的文件,不过我认为这个部分其实可以放在后端,以接口的形式将下载流传给前端,否则每一次更新文件,都得重新拉取镜像,打包(考虑镜像成本)。
enums是一些枚举值;
hooks是拦截统一处理,以前在写web漏洞扫描器的时候,使用无头浏览器就需要对页面进行hook,注入相关的函数收集信息。
locales,我的理解应该是对后端字段的翻译,因为项目有中文和英文两种模式,而在这两种模式下对于同一个字段的不同描述是不同的,那么这里做的就是这个事儿。
pages,界面业务逻辑大多写在这个位置。
reduxConfig,redux组件的配置,redux我感觉有点像一个大缓存,里面根据组件+某些算法来生成键,进而维护组件的状态和动态属性。
services,统一维护调用的接口;
utils,一些工具类和方法。

获取URL

在进行繁杂的前端调试之前,也可以进行以下步骤,因为有接口文档,
但是大量的开源项目其实是没有接口文档的,那么我们就应该掌握分析接口的能力。

从上面的分析我们可以得到,services目录下的就是统一维护的接口。那么我们需要利用熟悉的语言编写解析程序,对代码进行结构化分析和关键信息提取。我这里就使用JAVA:

public class ReactProjectHandler {
   
   

    public static Pattern pathPattern = Pattern.compile("`\\$(?<url>[\\/0-9a-zA-Z_]+)`");


    public static void handleApiTs() {
   
   
        String baseBuilder = "/api/builder/v1";
        String baseEngine = "/api/engine/v1";
        String baseStudio = "/api/studio/v1";
        String fileName = "D:\\个人\\anydata\\kweaver\\studio\\webui\\src\\services\\api.ts";
        List<String> a = FileUtils.getListKeyWithOneLine(fileName, false);
        List<String> urls = new ArrayList<>();
        for (String b : a) {
   
   
            String c = StringFormatUtils.formatByName(b, new HashMap<String, Object>() {
   
   
                {
   
   
                    put("baseBuilder", baseBuilder);
                    put("baseEngine", baseEngine);
                    put("baseStudio", baseStudio);
                }
            });
            Matcher matcher = pathPattern.matcher(c);
            if (matcher.find()){
   
   
                String url = matcher.group("url");
                urls.add(url);
            }
        }
        Collections.sort(urls);
        for (String url : urls){
   
   
            FileUtils.appendFileWithRelativePath("anydata","apis.txt",url+"\n");
        }
    }

    public static void main(String[] args) {
   
   
//        String folderName = "";
//        String ignores = ".less,test.js,test.tsx";
//        FolderUtils.Dir dir = FolderUtils.getFolder(folderName, ignores);
        handleAllApis();
    }

}

这个程序将分析api.ts文件,并输出到结果文件中,那么我们收集的api就有如下内容:

/api/builder/v1/onto/ds
/api/builder/v1/onto/gettabbydsn
/api/builder/v1/onto/previewdata
/api/builder/v1/onto/dirlist
/api/builder/v1/onto/auto/autogenschema
/api/builder/v1/onto/getotl
/api/builder/v1/onto/getotlbyname
/api/builder/v1/onto/saveontology
/api/builder/v1/onto/modellist
/api/builder/v1/onto/
/api/builder/v1/graph/getdsbygraphid
/api/builder/v1/graph/
/api/builder/v1/onto/modelspo
/api/builder/v1/onto/getmodelotl
/api/builder/v1/onto/task/build_task
/api/builder/v1/onto/task/gettaskinfo
/api/builder/v1/onto/task/deletetask
/api/builder/v1/onto/task/get_task_files
/api/builder/v1/onto/task/deletealltask
/api/builder/v1/onto/updatename/
/api/builder/v1/onto/updateinfo/
/api/builder/v1/ds/testconnect
/api/builder/v1/ds
/api/builder/v1/ds/ds_copy
/api/builder/v1/ds
/api/builder/v1/graph/ds/
/api/builder/v1/ds/
/api/builder/v1/ds/delbydsids
/api/builder/v1/ds/searchbyname
/api/builder/v1/ds/Auth
/api/engine/v1/analysis
/api/engine/v1/explore/relation
/api/engine/v1/explore/expandv
/api/engine/v1/explore/path
/api/engine/v1/explore/pathDetail
/api/builder/v1/graph/output
/api/builder/v1/graph/input
/api/builder/v1/knw/get_all
/api/builder/v1/knw/get_by_name
/api/builder/v1/knw/network
/api/builder/v1/knw/edit_knw
/api/builder/v1/knw/delete_knw
/api/builder/v1/knw/get_graph_by_knw
/api/builder/v1/graph/info/onto
/api/builder/v1/graph/info/basic
/api/builder/v1/graph/info/count
/api/builder/v1/graph/info/detail
/api/engine/v1/properties
/api/builder/v1/onto/getbykgid
/api/studio/v1/graphdb
/api/studio/v1/graphdb/list
/api/studio/v1/graphdb/add
/api/studio/v1/graphdb/delete
/api/studio/v1/graphdb/update
/api/studio/v1/graphdb/test
/api/studio/v1/graphdb/graph/list
/api/studio/v1/opensearch/list
/api/studio/v1/opensearch
/api/studio/v1/opensearch/add
/api/studio/v1/opensearch/delete
/api/studio/v1/opensearch/update
/api/studio/v1/opensearch/test
/api/builder/v1/task
/api/builder/v1/task
/api/builder/v1/task/stoptask
/api/builder/v1/task
/api/builder/v1/task/get_progress
/api/builder/v1/graph/delbyids
/api/builder/v1/task
/api/builder/v1/timer
/api/builder/v1/timer/info
/api/builder/v1/timer/delete
/api/builder/v1/timer/add
/api/builder/v1/timer/update
/api/builder/v1/timer/switch
/api/builder/v1/graph
/api/builder/v1/graph
/api/builder/v1/graph
/api/builder/v1/graph/getbis
/api/builder/v1/graph/savenocheck
/api/builder/v1/graph/check_kmapinfo
/api/builder/v1/graph/graph_InfoExt/graphid
/api/studio/v1/swaggerDoc
/api/builder/v1/lexicon/getall
/api/builder/v1/lexicon/getbyid
/api/builder/v1/lexicon/create
/api/builder/v1/lexicon/labels
/api/builder/v1/lexicon/export
/api/builder/v1/lexicon/edit
/api/builder/v1/lexicon/delete
/api/builder/v1/lexicon/import_words
/api/builder/v1/lexicon/insert
/api/builder/v1/lexicon/search
/api/builder/v1/lexicon/edit_words
/api/builder/v1/lexicon/delete_words
/api/builder/v1/lexicon/template
/api/builder/v1/lexicon/word_cloud
/api/builder/v1/lexicon/word_cloud_search

我们来观察下代码:
在这里插入图片描述

可以发现这里其实有组装链接的情况,也就是说光分析api.ts,我们查看到的接口只是局部,无法看到所有东西,那么我们还需要考虑对这个目录下的js代码进行解析处理。

好了,吃午饭了。有空了再写。

相关实践学习
基于OpenSearch搭建高质量商品搜索服务
本场景主要介绍开放搜索(OpenSearch)打造独有的电商行业垂直解决方案,模板内置电商查询分析、排序表达式及行业算法能力,沉浸式体验更高性能和效果的智能搜索服务,助力企业在线业务智能增长。
目录
相关文章
|
2月前
|
缓存 移动开发 Rust
前端构建工具 Mako 开源了
Hi,我是 sorrycc,Mako 的主要负责人之一,也是 Umi、Dva、Father 等库的作者。 很开心,Mako 终于开源了! Github 地址:https://github.com/umijs/mako/ 今天和大家正式介绍下他。
109 3
|
2月前
|
前端开发 JavaScript 定位技术
一、前端高德地图注册、项目中引入、渲染标记(Marker)and覆盖物(Circle)
文章介绍了如何在前端项目中注册并使用高德地图API,包括注册高德开放平台账号、引入高德地图到项目、以及如何在地图上渲染标记(Marker)和覆盖物(Circle)。
72 1
|
3月前
|
前端开发 Java 编译器
【前端学java】java基础练习缺少项目?看这篇文章就够了!(完结)
【8月更文挑战第11天】java基础练习缺少项目?看这篇文章就够了!(完结)
39 0
|
16天前
|
JavaScript 前端开发 Docker
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
在使用 Deno 构建项目时,生成的可执行文件体积较大,通常接近 100 MB,而 Node.js 构建的项目体积则要小得多。这是由于 Deno 包含了完整的 V8 引擎和运行时,使其能够在目标设备上独立运行,无需额外安装依赖。尽管体积较大,但 Deno 提供了更好的安全性和部署便利性。通过裁剪功能、使用压缩工具等方法,可以优化可执行文件的体积。
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
|
5天前
|
前端开发 Unix 测试技术
揭秘!前端大牛们如何高效管理项目,确保按时交付高质量作品!
【10月更文挑战第30天】前端开发项目涉及从需求分析到最终交付的多个环节。本文解答了如何制定合理项目计划、提高团队协作效率、确保代码质量和应对项目风险等问题,帮助你学习前端大牛们的项目管理技巧,确保按时交付高质量的作品。
18 2
|
1月前
|
前端开发 JavaScript 应用服务中间件
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
177 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
|
17天前
|
缓存 前端开发 JavaScript
前端架构思考:代码复用带来的隐形耦合,可能让大模型造轮子是更好的选择-从 CDN 依赖包被删导致个站打不开到数年前因11 行代码导致上千项目崩溃谈谈npm黑洞 - 统计下你的项目有多少个依赖吧!
最近,我的个人网站因免费CDN上的Vue.js包路径变更导致无法访问,引发了我对前端依赖管理的深刻反思。文章探讨了NPM依赖陷阱、开源库所有权与维护压力、NPM生态问题,并提出减少不必要的依赖、重视模块设计等建议,以提升前端项目的稳定性和可控性。通过“left_pad”事件及个人经历,强调了依赖管理的重要性和让大模型代替人造轮子的潜在收益
|
23天前
|
前端开发 JavaScript 开发工具
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(三)
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(三)
30 0
|
23天前
|
Web App开发 前端开发 JavaScript
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(二)
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(二)
44 0
|
23天前
|
Web App开发 移动开发 前端开发
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(一)
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(一)
39 0