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

本文涉及的产品
智能开放搜索 OpenSearch行业算法版,1GB 20LCU 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)打造独有的电商行业垂直解决方案,模板内置电商查询分析、排序表达式及行业算法能力,沉浸式体验更高性能和效果的智能搜索服务,助力企业在线业务智能增长。
目录
相关文章
|
27天前
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
116 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
16天前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
121 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
5天前
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
29 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
8天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
26 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
24天前
|
Dart 前端开发 容器
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
75 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
14天前
|
Dart 前端开发 Android开发
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
37 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
1月前
|
前端开发 Java 开发工具
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
81 18
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
|
29天前
|
缓存 前端开发 Android开发
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
79 12
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
|
2月前
|
人工智能 前端开发 小程序
2024年12月30日蜻蜓蜻蜓AI工具系统v1.0.0发布-优雅草科技本产品前端源代码已对外开源可免费商用-优雅草老八
2024年12月30日蜻蜓蜻蜓AI工具系统v1.0.0发布-优雅草科技本产品前端源代码已对外开源可免费商用-优雅草老八
108 31
2024年12月30日蜻蜓蜻蜓AI工具系统v1.0.0发布-优雅草科技本产品前端源代码已对外开源可免费商用-优雅草老八
|
1月前
|
Dart 前端开发 Android开发
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
36 1
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 4
    详解智能编码在前端研发的创新应用
  • 5
    巧用通义灵码,提升前端研发效率
  • 6
    智能编码在前端研发的创新应用
  • 7
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 8
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 9
    抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
  • 10
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
  • 1
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    29
  • 2
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    51
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 4
    巧用通义灵码,提升前端研发效率
    93
  • 5
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    141
  • 6
    详解智能编码在前端研发的创新应用
    96
  • 7
    智能编码在前端研发的创新应用
    83
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    37
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    121
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    75