diff --git a/go.mod b/go.mod
index dee3038..eb61687 100644
--- a/go.mod
+++ b/go.mod
@@ -12,6 +12,7 @@ require (
)
require (
+ github.com/aymerick/douceur v0.2.0 // indirect
github.com/bytedance/gopkg v0.1.3 // indirect
github.com/bytedance/sonic v1.15.0 // indirect
github.com/bytedance/sonic/loader v0.5.0 // indirect
@@ -26,6 +27,7 @@ require (
github.com/go-viper/mapstructure/v2 v2.4.0 // indirect
github.com/goccy/go-json v0.10.5 // indirect
github.com/goccy/go-yaml v1.19.2 // indirect
+ github.com/gorilla/css v1.0.1 // indirect
github.com/jackc/pgpassfile v1.0.0 // indirect
github.com/jackc/pgservicefile v0.0.0-20240606120523-5a60cdf6a761 // indirect
github.com/jackc/pgx/v5 v5.6.0 // indirect
@@ -36,6 +38,7 @@ require (
github.com/klauspost/cpuid/v2 v2.3.0 // indirect
github.com/leodido/go-urn v1.4.0 // indirect
github.com/mattn/go-isatty v0.0.20 // indirect
+ github.com/microcosm-cc/bluemonday v1.0.27 // indirect
github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd // indirect
github.com/modern-go/reflect2 v1.0.2 // indirect
github.com/pelletier/go-toml/v2 v2.2.4 // indirect
diff --git a/go.sum b/go.sum
index a56cb82..9107546 100644
--- a/go.sum
+++ b/go.sum
@@ -1,3 +1,5 @@
+github.com/aymerick/douceur v0.2.0 h1:Mv+mAeH1Q+n9Fr+oyamOlAkUNPWPlA8PPGR0QAaYuPk=
+github.com/aymerick/douceur v0.2.0/go.mod h1:wlT5vV2O3h55X9m7iVYN0TBM0NH/MmbLnd30/FjWUq4=
github.com/bytedance/gopkg v0.1.3 h1:TPBSwH8RsouGCBcMBktLt1AymVo2TVsBVCY4b6TnZ/M=
github.com/bytedance/gopkg v0.1.3/go.mod h1:576VvJ+eJgyCzdjS+c4+77QF3p7ubbtiKARP3TxducM=
github.com/bytedance/sonic v1.15.0 h1:/PXeWFaR5ElNcVE84U0dOHjiMHQOwNIx3K4ymzh/uSE=
@@ -40,6 +42,8 @@ github.com/golang-jwt/jwt/v5 v5.3.1/go.mod h1:fxCRLWMO43lRc8nhHWY6LGqRcf+1gQWArs
github.com/google/go-cmp v0.7.0 h1:wk8382ETsv4JYUZwIsn6YpYiWiBsYLSJiTsyBybVuN8=
github.com/google/go-cmp v0.7.0/go.mod h1:pXiqmnSA92OHEEa9HXL2W4E7lf9JzCmGVUdgjX3N/iU=
github.com/google/gofuzz v1.0.0/go.mod h1:dBl0BpW6vV/+mYPU4Po3pmUjxk6FQPldtuIdl/M65Eg=
+github.com/gorilla/css v1.0.1 h1:ntNaBIghp6JmvWnxbZKANoLyuXTPZ4cAMlo6RyhlbO8=
+github.com/gorilla/css v1.0.1/go.mod h1:BvnYkspnSzMmwRK+b8/xgNPLiIuNZr6vbZBTPQ2A3b0=
github.com/jackc/pgpassfile v1.0.0 h1:/6Hmqy13Ss2zCq62VdNG8tM1wchn8zjSGOBJ6icpsIM=
github.com/jackc/pgpassfile v1.0.0/go.mod h1:CEx0iS5ambNFdcRtxPj5JhEz+xB6uRky5eyVu/W2HEg=
github.com/jackc/pgservicefile v0.0.0-20240606120523-5a60cdf6a761 h1:iCEnooe7UlwOQYpKFhBabPMi4aNAfoODPEFNiAnClxo=
@@ -64,6 +68,8 @@ github.com/leodido/go-urn v1.4.0 h1:WT9HwE9SGECu3lg4d/dIA+jxlljEa1/ffXKmRjqdmIQ=
github.com/leodido/go-urn v1.4.0/go.mod h1:bvxc+MVxLKB4z00jd1z+Dvzr47oO32F/QSNjSBOlFxI=
github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=
github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
+github.com/microcosm-cc/bluemonday v1.0.27 h1:MpEUotklkwCSLeH+Qdx1VJgNqLlpY2KXwXFM08ygZfk=
+github.com/microcosm-cc/bluemonday v1.0.27/go.mod h1:jFi9vgW+H7c3V0lb6nR74Ib/DIB5OBs92Dimizgw2cA=
github.com/modern-go/concurrent v0.0.0-20180228061459-e0a39a4cb421/go.mod h1:6dJC0mAP4ikYIbvyc7fijjWJddQyLn8Ig3JB5CqoB9Q=
github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd h1:TRLaZ9cD/w8PVh93nsPXa1VrQ6jlwL5oN8l14QlcNfg=
github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd/go.mod h1:6dJC0mAP4ikYIbvyc7fijjWJddQyLn8Ig3JB5CqoB9Q=
diff --git a/internal/controller/post_controller.go b/internal/controller/post_controller.go
index a007eba..1fbd409 100644
--- a/internal/controller/post_controller.go
+++ b/internal/controller/post_controller.go
@@ -1,6 +1,7 @@
package controller
import (
+ "html/template"
"net/http"
"strconv"
@@ -102,10 +103,11 @@ func (ctrl *PostController) ShowPage(c *gin.Context) {
}
c.HTML(http.StatusOK, "posts/show.html", common.BuildPageData(c, gin.H{
- "Title": post.Title,
- "Post": post,
- "UID": uid,
- "ExtraCSS": "/static/css/posts.css",
+ "Title": post.Title,
+ "Post": post,
+ "PostBodyHTML": template.HTML(post.BodyHTML),
+ "UID": uid,
+ "ExtraCSS": "/static/css/posts.css",
}))
}
diff --git a/internal/service/post_service.go b/internal/service/post_service.go
index 60e1406..fc0929f 100644
--- a/internal/service/post_service.go
+++ b/internal/service/post_service.go
@@ -8,9 +8,14 @@ import (
"metazone.cc/metalab/internal/config"
"metazone.cc/metalab/internal/model"
+ "github.com/microcosm-cc/bluemonday"
"github.com/yuin/goldmark"
)
+// ucgPolicy 对 Goldmark 输出的 HTML 做安全消毒
+// 移除 script / iframe / javscript: / data: 等危险内容
+var ucgPolicy = bluemonday.UGCPolicy()
+
// postStore 帖子服务所需的最小仓储接口（ISP）
type postStore interface {
Create(post *model.Post) error
@@ -44,13 +49,13 @@ func (s *PostService) auditEnabled() bool {
return s.ss.IsAuditEnabled()
}
-// renderMarkdown 将 Markdown 渲染为 HTML
+// renderMarkdown 将 Markdown 渲染为安全 HTML（Goldmark + bluemonday 消毒）
func (s *PostService) renderMarkdown(body string) (string, error) {
var buf bytes.Buffer
if err := s.md.Convert([]byte(body), &buf); err != nil {
return "", err
}
- return buf.String(), nil
+ return ucgPolicy.Sanitize(buf.String()), nil
}
// Create 创建帖子
diff --git a/templates/MetaLab-2026/html/posts/show.html b/templates/MetaLab-2026/html/posts/show.html
index 57baa13..557184b 100644
--- a/templates/MetaLab-2026/html/posts/show.html
+++ b/templates/MetaLab-2026/html/posts/show.html
@@ -17,10 +17,10 @@
- {{.Post.BodyHTML}}
+ {{.PostBodyHTML}}
{{/* 如果 BodyHTML 为空，直接显示原文 */}}
- {{if not .Post.BodyHTML}}
+ {{if not .PostBodyHTML}}
{{.Post.Body}}
{{end}}
diff --git a/templates/MetaLab-2026/static/js/editor.js b/templates/MetaLab-2026/static/js/editor.js
index ad0c427..a813e64 100644
--- a/templates/MetaLab-2026/static/js/editor.js
+++ b/templates/MetaLab-2026/static/js/editor.js
@@ -4,7 +4,7 @@
var postId = document.getElementById('postId');
var titleEl = document.getElementById('postTitle');
- var bodyEl = document.getElementById('postBody'); // textarea (source of truth)
+ var bodyEl = document.getElementById('postBody'); // textarea (唯一数据源)
var wysiwygEl = document.getElementById('wysiwygEditor'); // contenteditable
var splitPrev = document.getElementById('splitPreview');
var splitCont = splitPrev ? splitPrev.querySelector('.split-preview-content') : null;
@@ -13,6 +13,7 @@
var isEdit = postId && postId.value;
var currentMode = 'wysiwyg';
+ var wysiwygDirty = false; // WYSIWYG 是否已被用户编辑过（首次进入时不覆盖 textarea）
var syncTimer = null;
// ===================== HELPERS =====================
@@ -22,19 +23,9 @@
return meta ? meta.getAttribute('content') : '';
}
- function getBodyValue() {
- return currentMode === 'wysiwyg' ? bodyEl.value : bodyEl.value;
- }
-
- // 保存到 textarea 并同步 WYSIWYG
- function saveToTextarea(md) {
- bodyEl.value = md;
- if (currentMode === 'wysiwyg') syncMarkdownToWysiwyg();
- }
-
// ================== MARKDOWN ↔ HTML ==================
- // 通过 API 渲染 markdown 为 HTML
+ // 通过 API 渲染 markdown 为 HTML（服务端 Goldmark + bluemonday 消毒）
function renderMarkdown(md, callback) {
fetch('/api/posts/preview', {
method: 'POST',
@@ -55,10 +46,7 @@
el.innerHTML = html;
function walk(node) {
- var md = '';
- if (node.nodeType === 3) { // text
- return node.textContent;
- }
+ if (node.nodeType === 3) return node.textContent;
if (node.nodeType !== 1) return '';
var tag = node.tagName.toLowerCase();
var children = '';
@@ -82,8 +70,7 @@
case 'pre':
var code = node.querySelector('code');
var lang = code ? (code.className.replace('language-','') || '') : '';
- var text = node.textContent;
- return '\n```' + lang + '\n' + text + '\n```\n';
+ return '\n```' + lang + '\n' + node.textContent + '\n```\n';
case 'code':
if (node.parentNode.tagName.toLowerCase() !== 'pre')
return '`' + children + '`';
@@ -97,9 +84,7 @@
return '> ' + children.replace(/\n$/, '').replace(/\n/g, '\n> ') + '\n\n';
case 'hr': return '\n---\n';
case 'img':
- var src = node.getAttribute('src') || '';
- var alt = node.getAttribute('alt') || '';
- return '';
+ return ' || '') + ')';
case 'div':
case 'section':
return children;
@@ -110,87 +95,36 @@
return walk(el).replace(/\n{3,}/g, '\n\n').trim();
}
- // 将 markdown 渲染到 WYSIWYG
+ // 将 markdown 从 textarea 渲染到 WYSIWYG
function syncMarkdownToWysiwyg() {
if (!bodyEl.value.trim()) {
wysiwygEl.innerHTML = '';
return;
}
renderMarkdown(bodyEl.value, function(html) {
- var cur = wysiwygEl.innerHTML;
- // 只在真的变化时更新，避免闪烁
- if (cur !== html) {
- wysiwygEl.innerHTML = html;
- }
+ wysiwygEl.innerHTML = html;
});
}
- // WYSIWYG 编辑后延迟同步回 textarea
+ // WYSIWYG 编辑后延迟将 HTML 转为 markdown 保存回 textarea
function debounceSync() {
clearTimeout(syncTimer);
syncTimer = setTimeout(function() {
var md = htmlToMarkdown(wysiwygEl.innerHTML);
- bodyEl.value = md;
- }, 500);
+ if (md !== bodyEl.value) {
+ bodyEl.value = md;
+ }
+ }, 600);
}
- // ==================== MODE SWITCHING ====================
-
- function switchMode(mode) {
- // 先同步当前状态
- if (currentMode === 'wysiwyg') {
- var md = htmlToMarkdown(wysiwygEl.innerHTML);
- bodyEl.value = md;
- }
-
- currentMode = mode;
-
- // 更新标签
- modeTabs.forEach(function(tab) {
- tab.classList.toggle('active', tab.dataset.mode === mode);
- });
-
- // 切换布局 class
- var editorBody = document.querySelector('.editor-body');
- if (editorBody) {
- editorBody.classList.toggle('split-mode', mode === 'split');
- }
-
- // 切换面板
- if (mode === 'wysiwyg') {
- bodyEl.style.display = 'none';
- wysiwygEl.style.display = '';
- if (splitPrev) splitPrev.style.display = 'none';
- if (toolbar) toolbar.style.display = '';
- syncMarkdownToWysiwyg();
- } else if (mode === 'source') {
- bodyEl.style.display = '';
- wysiwygEl.style.display = 'none';
- if (splitPrev) splitPrev.style.display = 'none';
- if (toolbar) toolbar.style.display = '';
- } else if (mode === 'split') {
- bodyEl.style.display = '';
- wysiwygEl.style.display = 'none';
- if (splitPrev) splitPrev.style.display = '';
- if (toolbar) toolbar.style.display = 'none';
- updateSplitPreview();
- }
- }
-
- modeTabs.forEach(function(tab) {
- tab.addEventListener('click', function() {
- switchMode(tab.dataset.mode);
- });
- });
-
- // 分屏实时预览（防抖）
- var splitTimer = null;
+ // markdown 保存回 textarea 后触发分屏预览更新
bodyEl.addEventListener('input', function() {
if (currentMode === 'split') {
clearTimeout(splitTimer);
splitTimer = setTimeout(updateSplitPreview, 300);
}
});
+ var splitTimer = null;
function updateSplitPreview() {
if (!splitCont || !bodyEl.value.trim()) {
@@ -204,7 +138,65 @@
// WYSIWYG 输入实时同步
wysiwygEl.addEventListener('input', function() {
- if (currentMode === 'wysiwyg') debounceSync();
+ if (currentMode === 'wysiwyg') {
+ wysiwygDirty = true;
+ debounceSync();
+ }
+ });
+
+ // ==================== MODE SWITCHING ====================
+
+ function switchMode(mode) {
+ // 仅在离开 WYSIWYG 时同步 WYSIWYG → textarea
+ if (currentMode === 'wysiwyg' && mode !== 'wysiwyg' && wysiwygDirty) {
+ var md = htmlToMarkdown(wysiwygEl.innerHTML);
+ bodyEl.value = md;
+ }
+
+ currentMode = mode;
+ wysiwygDirty = false; // 切换到新模式下重置 dirty 标记
+
+ // 更新标签
+ modeTabs.forEach(function(tab) {
+ tab.classList.toggle('active', tab.dataset.mode === mode);
+ });
+
+ // 切换布局 class
+ var editorBody = document.querySelector('.editor-body');
+ if (editorBody) {
+ editorBody.classList.toggle('split-mode', mode === 'split');
+ }
+
+ // 工具栏在 split 模式下也显示（源码风格操作）
+ if (toolbar) {
+ toolbar.style.display = (mode === 'source' || mode === 'split') ? '' : '';
+ }
+
+ // 切换面板
+ if (mode === 'wysiwyg') {
+ bodyEl.style.display = 'none';
+ wysiwygEl.style.display = '';
+ if (splitPrev) splitPrev.style.display = 'none';
+ syncMarkdownToWysiwyg();
+ wysiwygEl.focus();
+ } else if (mode === 'source') {
+ bodyEl.style.display = '';
+ wysiwygEl.style.display = 'none';
+ if (splitPrev) splitPrev.style.display = 'none';
+ bodyEl.focus();
+ } else if (mode === 'split') {
+ bodyEl.style.display = '';
+ wysiwygEl.style.display = 'none';
+ if (splitPrev) splitPrev.style.display = '';
+ bodyEl.focus();
+ updateSplitPreview();
+ }
+ }
+
+ modeTabs.forEach(function(tab) {
+ tab.addEventListener('click', function() {
+ switchMode(tab.dataset.mode);
+ });
});
// ==================== TOOLBAR ====================
@@ -216,7 +208,8 @@
var action = btn.dataset.action;
if (currentMode === 'wysiwyg') {
execWysiwygAction(action);
- } else if (currentMode === 'source') {
+ } else {
+ // source 和 split 模式都用源码工具栏（操作 textarea 中的 markdown）
execSourceAction(action);
}
});
@@ -264,7 +257,7 @@
document.execCommand('insertHorizontalRule', false, null);
break;
}
- debounceSync();
+ wysiwygDirty = true;
}
// WYSIWYG 中包裹选中文本
@@ -273,18 +266,13 @@
if (!sel.rangeCount) return;
var range = sel.getRangeAt(0);
var text = range.toString();
- if (!text) {
- text = 'code';
- range.deleteContents();
- range.insertNode(document.createTextNode(before + text + after));
- } else {
- range.deleteContents();
- range.insertNode(document.createTextNode(before + text + after));
- }
- debounceSync();
+ if (!text) text = 'code';
+ range.deleteContents();
+ range.insertNode(document.createTextNode(before + text + after));
+ wysiwygDirty = true;
}
- // 源码模式下插入 markdown 语法
+ // 源码/分屏模式下插入 markdown 语法
function execSourceAction(action) {
var start = bodyEl.selectionStart;
var end = bodyEl.selectionEnd;
@@ -311,7 +299,10 @@
bodyEl.value = bodyEl.value.substring(0, start) + replacement + bodyEl.value.substring(end);
bodyEl.focus();
var cursor = start + wrap.b.length + (text ? text.length : 0);
- bodyEl.setSelectionRange(cursor, cursor + (text ? wrap.a.length : 0));
+ bodyEl.setSelectionRange(cursor, cursor + (text ? 0 : replacement.length - wrap.b.length - wrap.a.length));
+
+ // 分屏模式下立刻更新预览
+ if (currentMode === 'split') updateSplitPreview();
}
}
@@ -320,11 +311,10 @@
form.addEventListener('submit', function(e) {
e.preventDefault();
- // WYSIWYG 模式下先同步
+ // WYSIWYG 模式下先同步到 textarea
if (currentMode === 'wysiwyg') {
var md = htmlToMarkdown(wysiwygEl.innerHTML);
bodyEl.value = md;
- currentMode = 'source';
}
var title = titleEl.value.trim();
@@ -364,6 +354,7 @@
// ==================== INIT ====================
if (bodyEl.value.trim()) {
- switchMode('wysiwyg');
+ // 如果已有内容（编辑帖子），渲染到 WYSIWYG 但不写入 textarea
+ syncMarkdownToWysiwyg();
}
})();