From 30360cb1065d4c219d0169b4ccd13131549448fe Mon Sep 17 00:00:00 2001
From: qing <1776177662@qq.com>
Date: Tue, 4 Aug 2026 22:24:33 +0800
Subject: [PATCH] =?UTF-8?q?feat(dnfs):=20=E5=89=8D=E7=AB=AF=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E8=8A=82=E7=82=B9=E6=94=AF=E6=8C=81=E5=AE=8C=E6=95=B4?=
 =?UTF-8?q?HTML/CSS/JS=E5=B9=B6=E6=B3=A8=E5=85=A5=E5=BD=93=E5=89=8D?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将内联 JS 节点扩展为内联前端代码节点：内容存完整 HTML 文档，
运行后解析注入当前页面——style 注入 head、script 在全局作用域执行
可操作整页加特效、body 渲染到节点下方容器，console 输出捕获到下方。
---
 dnfs/README.md              |  2 +-
 dnfs/dnfs.py                |  4 +--
 static/README.md            |  2 +-
 static/public/css/theme.css |  9 +++++-
 static/public/dnfs.html     |  2 +-
 static/public/js/dnfs.js    | 63 ++++++++++++++++++++++++++++---------
 6 files changed, 62 insertions(+), 20 deletions(-)

diff --git a/dnfs/README.md b/dnfs/README.md
index f46d737..0a7b4df 100644
--- a/dnfs/README.md
+++ b/dnfs/README.md
@@ -59,7 +59,7 @@ Authorization: Bearer <base64_payload>_<rsa_sign>
 | `_sp` | 信封字段 | 前端表现 |
 |-------|---------|---------|
 | `link` | `url`（http/https，≤2048）、`note?` | favicon 图标（经 static `/api/favicon` 代理拉取）+ 可点击链接 |
-| `js` | `code`（≤512KB）、`note?` | "审计源码"（纯文本展示）+ "运行"（在当前页面上下文执行，可施加特效；console 输出捕获到下方）按钮 |
+| `js` | `code`（完整 HTML/CSS/JS 文档，≤512KB）、`note?` | "审计源码"（纯文本展示）+ "运行"（解析完整 HTML 文档注入当前页面：style 注入 head、script 在全局作用域执行可加特效、body 渲染到节点下方；console 输出捕获到下方）按钮 |
 | `image` | `name`、`data`（`data:image/` DataURL，≤3.5M 字符）、`note?` | 图片直接显示 |
 | `file` | `name`、`mime`、`data`（Base64，≤3.5M 字符）、`note?` | 下载按钮（Base64→Blob→下载） |
 
diff --git a/dnfs/dnfs.py b/dnfs/dnfs.py
index 5c121a7..80aa446 100755
--- a/dnfs/dnfs.py
+++ b/dnfs/dnfs.py
@@ -248,9 +248,9 @@ def _validate_sp(sp):
     elif t == 'js':
         code = sp.get('code', '')
         if not isinstance(code, str) or not code.strip():
-            raise DnfsExp('JS 代码不能为空', 400)
+            raise DnfsExp('前端代码不能为空', 400)
         if len(code) > _SP_MAX_CODE:
-            raise DnfsExp('JS 代码过大（上限 512KB）', 400)
+            raise DnfsExp('前端代码过大（上限 512KB）', 400)
     elif t == 'image':
         data = sp.get('data', '')
         if not isinstance(data, str) or not data.startswith('data:image/'):
diff --git a/static/README.md b/static/README.md
index 7b156d4..9a46100 100644
--- a/static/README.md
+++ b/static/README.md
@@ -81,7 +81,7 @@ static :9200 (Flask + CORS)
 - 流媒体：视频（MP4/WebM/OGG/AVI/MOV/MKV）与音频（MP3/WAV/OGG/FLAC/AAC/M4A）在线播放，支持进度拖动
 - 深色模式：`css/theme.css` 统一主题，自动适配系统偏好
 - 表单组件：注册页图形/邮箱验证码统一 `.code-box` 行内布局（文字标签 + 输入框 + 控件同排，窄屏自动换行），验证码图片样式复用 `theme.css` 的 `.captcha-img` 类
-- 特殊节点（dnfs 管理员专属）：信封 JSON `{"_sp":...}` 内容差异化渲染 —— 链接（favicon 卡片）/ JS 代码（可审计/可运行，在当前页面执行可加特效）/ 图片（直显）/ 文件（下载）；发布权限由 dnfs 后端按 `is_admin` 强制
+- 特殊节点（dnfs 管理员专属）：信封 JSON `{"_sp":...}` 内容差异化渲染 —— 链接（favicon 卡片）/ 前端代码（完整 HTML/CSS/JS，可审计/可运行，注入当前页面可加特效）/ 图片（直显）/ 文件（下载）；发布权限由 dnfs 后端按 `is_admin` 强制
 - aibox Web 客户端：`aibox.html` 移动端适配聊天页，经 gateway `[WsProxy]` 反向代理（如 `/ws/aibox → ws://127.0.0.1:8765`）与 aibox 智能体通信，握手由 gateway 强制 `is_admin` 验签；协议与 BotOps/client.py 兼容（chunk 流式 / reasoning 思考区 / task 任务面板 / 指数退避重连）
 - 路径遍历防护：`safe_path_join` 限制访问范围在 `directory.root` 内
 - Nuitka 编译：可打包为独立二进制 `fsys.bin`（`sys.frozen` 检测 + BASE_DIR 锚定）
diff --git a/static/public/css/theme.css b/static/public/css/theme.css
index 7b26f34..bdb8eca 100644
--- a/static/public/css/theme.css
+++ b/static/public/css/theme.css
@@ -527,10 +527,17 @@ input[type="button"]:disabled {
 }
 .sp-image { display: block; max-width: 100%; border-radius: var(--radius-sm); }
 .sp-run {
+    margin-top: 0.5rem;
+    padding: 0.75rem;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+}
+.sp-log {
     margin-top: 0.5rem;
     max-height: 320px;
     overflow: auto;
-    padding: 0.75rem;
+    padding: 0.5rem;
     background: var(--bg);
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
diff --git a/static/public/dnfs.html b/static/public/dnfs.html
index 01cc7ce..53c1aa4 100644
--- a/static/public/dnfs.html
+++ b/static/public/dnfs.html
@@ -27,7 +27,7 @@
 				<select id="sp-type">
 					<option value="text">普通文本</option>
 					<option value="link">链接（自动显示站点图标）</option>
-					<option value="js">JS 代码（可审计/可运行）</option>
+					<option value="js">前端代码（可审计/可运行）</option>
 					<option value="image">图片（自动显示）</option>
 					<option value="file">文件（可下载）</option>
 				</select>
diff --git a/static/public/js/dnfs.js b/static/public/js/dnfs.js
index ee51a7e..e36b529 100644
--- a/static/public/js/dnfs.js
+++ b/static/public/js/dnfs.js
@@ -492,10 +492,12 @@ function renderSpLink(container, sp, appendNote) {
 	appendNote();
 }
 
-/* JS 代码节点：审计（展开源码，textContent 防注入）+ 运行（注入 <script> 在当前页面上下文执行，可直接操作页面加特效）。
- * 不使用 new Function/eval（CSP 未开 unsafe-eval）；改为注入内联 <script>（CSP 允许 'unsafe-inline'）执行。
- * 代码运行在全局作用域，可访问 document/window 对当前页面施加特效；console.log/error/warn 输出捕获到下方输出区。
- * 仅管理员可发布（后端强制）。 */
+/* 前端代码节点：审计（展开源码，textContent 防注入）+ 运行（注入当前页面执行，支持完整 HTML/CSS/JS）。
+ * 不使用 new Function/eval（CSP 未开 unsafe-eval）；解析完整 HTML 文档后注入当前页面：
+ *   - <style> 注入到页面 head
+ *   - <script> 在当前页面全局作用域执行（可操作整页 DOM 加特效）
+ *   - <body> 内容渲染到节点下方容器
+ * console.log/error/warn 输出捕获到下方输出区。仅管理员可发布（后端强制）。 */
 function renderSpJs(container, sp, appendNote) {
 	var bar = document.createElement('div');
 	bar.className = 'sp-actions';
@@ -543,15 +545,48 @@ function renderSpJs(container, sp, appendNote) {
 				window.__spLines.push('Error: ' + ev.message);
 			});
 		}
-		/* 注入内联 <script> 在当前页面全局作用域执行，可操作页面加特效 */
-		var s = document.createElement('script');
-		s.textContent = sp.code;
-		document.head.appendChild(s);
-		out.textContent = window.__spLines.join('\n') || '执行完成';
-		/* 异步输出（setTimeout 等）轮询刷新 */
-		var timer = setInterval(function() {
+		/* 解析完整 HTML 文档 */
+		var doc;
+		try {
+			doc = new DOMParser().parseFromString(sp.code, 'text/html');
+		} catch (err) {
+			window.__spLines.push('Error: 解析 HTML 失败: ' + (err.message || err));
 			out.textContent = window.__spLines.join('\n');
-		}, 400);
+			return;
+		}
+		/* 注入 <style> 到页面 head */
+		Array.prototype.forEach.call(doc.querySelectorAll('style'), function(st) {
+			var s = document.createElement('style');
+			s.textContent = st.textContent;
+			document.head.appendChild(s);
+		});
+		/* 注入 <script> 在当前页面全局作用域执行（可操作整页加特效） */
+		Array.prototype.forEach.call(doc.querySelectorAll('script'), function(sc) {
+			var s = document.createElement('script');
+			if (sc.getAttribute('src')) {
+				s.src = sc.getAttribute('src');
+			} else {
+				s.textContent = sc.textContent;
+			}
+			document.head.appendChild(s);
+		});
+		/* 渲染 <body> 内容到节点下方容器 */
+		if (doc.body) {
+			Array.prototype.forEach.call(doc.body.childNodes, function(node) {
+				out.appendChild(node);
+			});
+		}
+		/* console 输出区 */
+		var logBox = document.createElement('div');
+		logBox.className = 'sp-log';
+		out.appendChild(logBox);
+		var render = function() {
+			var lines = window.__spLines.slice();
+			logBox.textContent = lines.join('\n') || '执行完成';
+		};
+		render();
+		/* 异步输出（setTimeout 等）轮询刷新 */
+		var timer = setInterval(render, 400);
 	});
 	bar.appendChild(audit_btn);
 	bar.appendChild(run_btn);
@@ -680,7 +715,7 @@ sp_type.addEventListener('change', function() {
 		sp_edit_original = null;
 	}
 	if (t === 'link') input_note_content.placeholder = '请输入链接 URL（https://…）';
-	else if (t === 'js') input_note_content.placeholder = '请输入 JS 代码';
+	else if (t === 'js') input_note_content.placeholder = '请输入完整前端代码（可含 HTML/CSS/JS）';
 	else input_note_content.placeholder = '';
 });
 
@@ -705,7 +740,7 @@ async function buildSubmitContent() {
 	}
 	if (t === 'js') {
 		var code = input_note_content.value;
-		if (!code.trim()) { alert('请输入 JS 代码'); return null; }
+		if (!code.trim()) { alert('请输入前端代码'); return null; }
 		return JSON.stringify({ _sp: 'js', code: code });
 	}
 	/* image / file：优先使用新选择的文件；编辑模式下未选新文件则保留原信封 */