[博客_文章]基于金山文档的漂流瓶项目

[imoki]

摘要：这是基于金山文档的漂流瓶交互式项目介绍

<title>金山漂流瓶</title> <style> body { font-family: Arial, sans-serif; line-height: 1.6; margin: 20px; } h1 { text-align: center; } #shield { display: flex; justify-content: center; gap: 10px; margin: 20px 0; } a { color: #007bff; text-decoration: none; } a:hover { text-decoration: underline; } .section { margin-bottom: 20px; } .section h2 { border-bottom: 1px solid #ccc; padding-bottom: 5px; } ul { list-style: none; padding: 0; } li::before { content: "• "; } .warning { background-color: #f8d7da; color: #721c24; padding: 10px; margin-bottom: 20px; border: 1px solid #f5c6cb; border-radius: 5px; font-weight: bold; } </style>

目前netcut已限制金山ip访问，因此“金山漂流瓶”项目不具备应用能力，仅作为解决金山“跨域”问题的思路参考。可访问其它可落地应用的项目

🌊 金山漂流瓶

基于「金山文档」的漂流瓶项目 | 零成本·高安全·云存储方案

🎊 简介

零成本、无需懂代码部署带后台的高安全WEB项目

1. 若github pages部署纯前端网页，缺乏后端数据支持，若增加后端服务器又可能增加维护成本。
2. 本项目利用金山文档，通过全链条零成本设计方案，实现无需服务器，又可具备一定后端处理能力的网站项目，增加可玩性。
3. 由于若采用官网提供的webhook + 令牌方式部署网页会出现跨站问题，因此需要一层中介来解决此类问题。
4. 本项目在金山文档与前端网页之间增加一层中间层，从而解决了跨站问题。
5. 为了增加安全性，以避免暴露金山文档后台，因此采用中间层 + 密钥分配算法设计。
6. 采用github pages + netcut + 金山云文档的形式，实现具备一定的安全性、交互性的网站。
7. 为了实现数据存储和数据处理。
8. 采用金山云文档平替代“云数据库”，采用Airscript定时脚本进行数据处理。
9. 提高扩展能力。
10. 本项目设计思路可实现更过有趣功能噢～

✨ 特性

• 解决CORS跨域问题
• 低代码部署
• 零成本方案
• 一定交互能力
• 兼容airscript 1.0和airscript 2.0(Beta)

📺 视频教程

https://www.bilibili.com/video/BV1hb5sz6EaT

🛰️ 文字部署步骤

1. 显示层：fork或直接复制项目代码到你的仓库，仓库名为xxx.github.io。（这里的xxx为你github的昵称。自动会启用github page。）
2. 中间层：创建三个带密码（默认为：imoki）的netcut文件，名称分别为xxx_key_read、xxx_data_read、xxx_data_write。（这里的xxx为你自定义的昵称）
3. 修改代码开头提示的配置：将中间层的三个文件链接覆盖掉代码中（需要修改的部分）链接 。（仅改动script.js和services.js开头部分即可）
4. 数据层：将services.js脚本复制到金山文档Airscript脚本编辑器中，添加网络API，并加入定时任务。
5. 此时就可以访问到你的WEB项目啦。 访问：https://xxx.github.io

⭐ 架构说明

三级设计方案：显示层 - 中间层 - 数据层

• 显示层 - 采用Github Pages进行部署
• 中间层 - 采用netcut临时文本进行缓存
• 数据层 - 采用金山云文档进行存储和处理
• 前端 - 即显示层（index.html、script.js、style.css）
• 后端 - 即中间层（“密钥文件”、“仅读文件”、“仅写文件”）与数据层（services.js）

🌈 业务流程

前端处理流程

1. 密钥获取、解密、缓存 - 安全处理
2. 通过“读密码”读取“仅读文件”数据 - 拿漂流瓶
3. 通过“写密码”写入“仅写文件”数据 - 扔漂流瓶

后端处理流程

1. 密钥生成、加密、存储、修改 - 安全处理
2. 读取“仅写文件”数据，将数据写入金山文档，清空“仅写文件”，修改密码 - 更新数据库漂流瓶集
3. 根据金山文档数据选择漂流瓶更新“仅读文件”，修改密码 - 更新临时漂流瓶集

🧾 文件说明

• “密钥文件” - 文件名称为：xxx_key_read。“仅读文件”、“仅写文件”的密文密码
• “仅读文件” - 文件名称为：xxx_data_read。临时漂流瓶集，前端从此文件中获取最新漂流瓶数据
• “仅写文件” - 文件名称为：xxx_data_write。扔漂流瓶集，前端向此文件中追加漂流瓶数据，后端从此文件中获取最新漂流瓶数据
• “读密码” - 默认设置为：imoki。“仅读文件”的明文密码
• “写密码” - 默认设置为：imoki。“仅写文件”的明文密码
• 金山文档密钥数据 - “读密码”、“写密码”的密文密码
• 金山文档用户数据 - 数据库漂流瓶集

🔒 安全设计

出于安全考虑，避免数据爬虫、数据篡改、数据窃取，所以设计一些安全机制。

• 中间层：仅缓存部分数据，对中间层文件都设置动态密码，通过数据层生成动态密码并自动分配最新密码，避免数据爬虫、篡改。
• 数据层：存储着所有信息，对密码存储采用密文形式，避免数据窃取，即使被脱库数据也不会以明文显示。
• 加解密算法：采用非常规自定义的BMAS算法，代码中也开放了加解密增添入口，可以方便拓展你自己设计的加解密算法，以实现更高安全性。

🤝 欢迎参与贡献

欢迎各种形式的贡献