🔒 Validate attribute-view select option colors and escape them at render sites to prevent stored XSS GHSA-m7cc-jh9q-wxg8

88250 · 88250 · commit 63e60bc4bc9a · 2026-08-01T09:19:44.000+08:00
diff --git a/app/src/protyle/render/av/attributeValue.ts b/app/src/protyle/render/av/attributeValue.ts
@@ -136,7 +136,7 @@ export const genAVValueHTML = (value: IAVCellValue, dateFormat: TAVDateFormat =
                 if (value.type === "select" && index > 0) {
                     return;
                 }
-                html += `<span class="b3-chip b3-chip--middle" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">${escapeHtml(item.content)}</span>`;
+                html += `<span class="b3-chip b3-chip--middle" style="background-color:var(--b3-font-background${escapeAttr(item.color)});color:var(--b3-font-color${escapeAttr(item.color)})">${escapeHtml(item.content)}</span>`;
             });
             break;
         case "mAsset":
diff --git a/app/src/protyle/render/av/cell.ts b/app/src/protyle/render/av/cell.ts
@@ -1116,7 +1116,7 @@ export const renderCell = (cellValue: IAVCellValue, rowIndex = 0, showIcon = tru
             const tooltip = desc ?
                 ` data-position="north" aria-label="${escapeAriaLabel(item.content)}<div class='ft__on-surface'>${escapeAriaLabel(desc)}</div>"` :
                 "";
-            text += `<span class="b3-chip${desc ? " ariaLabel" : ""}"${tooltip} style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">${escapeHtml(item.content)}</span>`;
+            text += `<span class="b3-chip${desc ? " ariaLabel" : ""}"${tooltip} style="background-color:var(--b3-font-background${escapeAttr(item.color)});color:var(--b3-font-color${escapeAttr(item.color)})">${escapeHtml(item.content)}</span>`;
         });
     } else if (cellValue.type === "date") {
         const dataValue = cellValue ? cellValue.date : null;
diff --git a/app/src/protyle/render/av/col.ts b/app/src/protyle/render/av/col.ts
@@ -135,10 +135,10 @@ export const getEditHTML = (options: {
         }
         colData.options.forEach(item => {
             const airaLabel = item.desc ? `${escapeAriaLabel(item.name)}<div class='ft__on-surface'>${escapeAriaLabel(item.desc || "")}</div>` : "";
-            html += `<button class="b3-menu__item${html ? "" : " b3-menu__item--current"}" draggable="true" data-name="${escapeAttr(item.name)}" data-desc="${escapeAttr(item.desc || "")}" data-color="${item.color}">
+            html += `<button class="b3-menu__item${html ? "" : " b3-menu__item--current"}" draggable="true" data-name="${escapeAttr(item.name)}" data-desc="${escapeAttr(item.desc || "")}" data-color="${escapeAttr(item.color)}">
     <svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg>
     <div class="fn__flex-1 ariaLabel" data-position="parentW" aria-label="${airaLabel}">
-        <span class="b3-chip" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">
+        <span class="b3-chip" style="background-color:var(--b3-font-background${escapeAttr(item.color)});color:var(--b3-font-color${escapeAttr(item.color)})">
             <span class="fn__ellipsis">${escapeHtml(item.name)}</span>
         </span>
     </div>
diff --git a/app/src/protyle/render/av/filter.ts b/app/src/protyle/render/av/filter.ts
@@ -693,7 +693,7 @@ const genInlineSelectHTML = (filter: IAVFilter, colData: IAVColumn, path: string
 
     // 触发器：显示已选值的 chip（与表格单元格样式一致），无选中时显示 placeholder + 下拉箭头
     const selectedChips = selectedValues.map((item: IAVCellSelectValue) => {
-        return `<span class="b3-chip b3-chip--middle av__select-chip" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">${escapeHtml(item.content)}</span>`;
+        return `<span class="b3-chip b3-chip--middle av__select-chip" style="background-color:var(--b3-font-background${escapeAttr(item.color)});color:var(--b3-font-color${escapeAttr(item.color)})">${escapeHtml(item.content)}</span>`;
     }).join("");
     const triggerContent = selectedChips || `<span class="ft__on-surface fn__ellipsis">${placeholder}</span>`;
     const trigger = `<span class="av__select-trigger" data-type="selectTrigger" data-path="${path}">${triggerContent}<svg class="av__select-trigger-arrow"><use xlink:href="#iconDown"></use></svg></span>`;
@@ -704,9 +704,9 @@ const genInlineSelectHTML = (filter: IAVFilter, colData: IAVColumn, path: string
         : "";
     const chips = options.map((option: { name: string; color: string; desc?: string }) => {
         const selected = selectedValues.some((s: IAVCellSelectValue) => s.content === option.name);
-        return `<button type="button" class="av__select-option" data-name="${escapeAttr(option.name)}" data-color="${option.color}" data-type="selectOption" data-path="${path}">
+        return `<button type="button" class="av__select-option" data-name="${escapeAttr(option.name)}" data-color="${escapeAttr(option.color)}" data-type="selectOption" data-path="${path}">
 <svg class="av__select-option-check"><use xlink:href="#${selected ? "iconCheck" : "iconUncheck"}"></use></svg>
-<span class="b3-chip b3-chip--middle" style="background-color:var(--b3-font-background${option.color});color:var(--b3-font-color${option.color})"><span class="fn__ellipsis">${escapeHtml(option.name)}</span></span>
+<span class="b3-chip b3-chip--middle" style="background-color:var(--b3-font-background${escapeAttr(option.color)});color:var(--b3-font-color${escapeAttr(option.color)})"><span class="fn__ellipsis">${escapeHtml(option.name)}</span></span>
 </button>`;
     }).join("");
     const dropdown = `<div class="av__select-dropdown" data-type="selectDropdown" data-path="${path}" data-single="${allowMultiple ? "false" : "true"}" data-value-type="${valueType}" style="display:none;">
@@ -1200,7 +1200,7 @@ export const bindInlineFilterEvents = (panelElement: HTMLElement, data: IAV, pro
                 if (itemUseElement && itemUseElement.getAttribute("xlink:href") === "#iconCheck") {
                     const name = item.dataset.name;
                     const color = item.dataset.color;
-                    selectedChips.push(`<span class="b3-chip b3-chip--middle av__select-chip" style="background-color:var(--b3-font-background${color});color:var(--b3-font-color${color})">${escapeHtml(name)}</span>`);
+                    selectedChips.push(`<span class="b3-chip b3-chip--middle av__select-chip" style="background-color:var(--b3-font-background${escapeAttr(color)});color:var(--b3-font-color${escapeAttr(color)})">${escapeHtml(name)}</span>`);
                 }
             });
             const contentHTML = selectedChips.join("") || `<span class="ft__on-surface fn__ellipsis">${placeholderStr}</span>`;
diff --git a/app/src/protyle/render/av/groups.ts b/app/src/protyle/render/av/groups.ts
@@ -1,6 +1,6 @@
 import {unicode2Emoji} from "../../../emoji";
 import {getColIconByType} from "./col";
-import {escapeHtml} from "../../../util/escape";
+import {escapeAttr, escapeHtml} from "../../../util/escape";
 import {setPosition} from "../../../util/setPosition";
 import {getFieldsByData} from "./view";
 import {fetchSyncPost} from "../../../util/fetch";
@@ -198,7 +198,7 @@ export const getGroupsHTML = (columns: IAVColumn[], view: IAVView) => {
                 let titleHTML = `<div class="b3-menu__label fn__flex-1 fn__ellipsis">${item.name || ""}</div>`;
                 if (item.groupValue?.mSelect?.length > 0) {
                     titleHTML = `<div class="fn__flex-1">
-        <span class="b3-chip" style="background-color:var(--b3-font-background${item.groupValue.mSelect[0].color});color:var(--b3-font-color${item.groupValue.mSelect[0].color})">
+        <span class="b3-chip" style="background-color:var(--b3-font-background${escapeAttr(item.groupValue.mSelect[0].color)});color:var(--b3-font-color${escapeAttr(item.groupValue.mSelect[0].color)})">
             <span class="fn__ellipsis">${escapeHtml(item.groupValue.mSelect[0].content)}</span>
         </span>
     </div>`;
diff --git a/app/src/protyle/render/av/kanban/render.ts b/app/src/protyle/render/av/kanban/render.ts
@@ -20,7 +20,7 @@ const getKanbanTitleHTML = (group: IAVView, counter: number, draggable: boolean)
     let optionMenuHTML = "";
     if (["mSelect", "select"].includes(group.groupValue.type)) {
         group.groupValue.mSelect.forEach((item) => {
-            nameHTML += `<span class="b3-chip" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">${escapeHtml(item.content)}</span>`;
+            nameHTML += `<span class="b3-chip" style="background-color:var(--b3-font-background${escapeAttr(item.color)});color:var(--b3-font-color${escapeAttr(item.color)})">${escapeHtml(item.content)}</span>`;
         });
         if (draggable && group.groupValue.mSelect.length === 1) {
             const value = group.groupValue.mSelect[0];
@@ -193,7 +193,7 @@ export const renderKanban = async (options: {
                 }
                 if (isSelectGroup) {
                     if (group.groupValue.mSelect && group.groupValue.mSelect.length > 0) {
-                        selectBg = `style="--b3-av-kanban-background: var(--b3-font-background${group.groupValue.mSelect[0].color});"`;
+                        selectBg = `style="--b3-av-kanban-background: var(--b3-font-background${escapeAttr(group.groupValue.mSelect[0].color)});"`;
                     } else {
                         selectBg = 'style="--b3-av-kanban-background: var(--b3-border-color);"';
                     }
diff --git a/app/src/protyle/render/av/render.ts b/app/src/protyle/render/av/render.ts
@@ -274,7 +274,7 @@ export const getGroupTitleHTML = (group: IAVView, counter: number) => {
     let nameHTML = "";
     if (["mSelect", "select"].includes(group.groupValue.type)) {
         group.groupValue.mSelect.forEach((item) => {
-            nameHTML += `<span class="b3-chip" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">${escapeHtml(item.content)}</span>`;
+            nameHTML += `<span class="b3-chip" style="background-color:var(--b3-font-background${escapeAttr(item.color)});color:var(--b3-font-color${escapeAttr(item.color)})">${escapeHtml(item.content)}</span>`;
         });
     } else if (group.groupValue.type === "checkbox") {
         nameHTML = `<svg style="width:calc(1.625em - 12px);height:calc(1.625em - 12px)"><use xlink:href="#icon${group.groupValue.checkbox.checked ? "Check" : "Uncheck"}"></use></svg>`;
diff --git a/app/src/protyle/render/av/select.ts b/app/src/protyle/render/av/select.ts
@@ -37,10 +37,10 @@ const filterSelectHTML = (key: string, options: {
                 (key.toLowerCase().indexOf(item.name.toLowerCase()) > -1 ||
                     item.name.toLowerCase().indexOf(key.toLowerCase()) > -1)) {
                 const airaLabel = item.desc ? `${escapeAriaLabel(item.name)}<div class='ft__on-surface'>${escapeAriaLabel(item.desc || "")}</div>` : "";
-                html += `<button data-type="addColOptionOrCell" class="b3-menu__item${currentName === item.name ? " b3-menu__item--current" : ""}" data-name="${escapeAttr(item.name)}" data-desc="${escapeAttr(item.desc || "")}" draggable="true" data-color="${item.color}">
+                html += `<button data-type="addColOptionOrCell" class="b3-menu__item${currentName === item.name ? " b3-menu__item--current" : ""}" data-name="${escapeAttr(item.name)}" data-desc="${escapeAttr(item.desc || "")}" draggable="true" data-color="${escapeAttr(item.color)}">
     <svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg>
     <div class="fn__flex-1 ariaLabel" data-position="parentW" aria-label="${airaLabel}">
-        <span class="b3-chip" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">
+        <span class="b3-chip" style="background-color:var(--b3-font-background${escapeAttr(item.color)});color:var(--b3-font-color${escapeAttr(item.color)})">
             <span class="fn__ellipsis">${escapeHtml(item.name)}</span>
         </span>
     </div>
@@ -728,7 +728,7 @@ export const getSelectHTML = (fields: IAVColumn[], cellElements: HTMLElement[],
     visibleValues?.forEach((item) => {
         const option = colData.options?.find((colOption) => colOption.name === item.content);
         selected.push(item.content);
-        selectedHTML += `<div class="b3-chip b3-chip--middle${canSort ? " fn__grab" : " b3-chip--pointer"}" data-content="${escapeAttr(item.content)}" data-name="${escapeAttr(item.content)}" data-desc="${escapeAttr(option?.desc || "")}" data-color="${escapeAttr(option?.color || item.color)}" data-value-color="${escapeAttr(item.color)}" style="white-space: nowrap;max-width:100%;background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})"><span class="fn__ellipsis">${escapeHtml(item.content)}</span><svg class="b3-chip__close" data-type="removeCellOption"><use xlink:href="#iconClose"></use></svg></div>`;
+        selectedHTML += `<div class="b3-chip b3-chip--middle${canSort ? " fn__grab" : " b3-chip--pointer"}" data-content="${escapeAttr(item.content)}" data-name="${escapeAttr(item.content)}" data-desc="${escapeAttr(option?.desc || "")}" data-color="${escapeAttr(option?.color || item.color)}" data-value-color="${escapeAttr(item.color)}" style="white-space: nowrap;max-width:100%;background-color:var(--b3-font-background${escapeAttr(item.color)});color:var(--b3-font-color${escapeAttr(item.color)})"><span class="fn__ellipsis">${escapeHtml(item.content)}</span><svg class="b3-chip__close" data-type="removeCellOption"><use xlink:href="#iconClose"></use></svg></div>`;
     });
 
     return `<div class="b3-menu__items" style="display: flex;flex-direction: column;flex: 1;">
diff --git a/kernel/av/av.go b/kernel/av/av.go
@@ -24,6 +24,7 @@ import (
 	"os"
 	"path/filepath"
 	"sort"
+	"strconv"
 	"strings"
 
 	"github.com/88250/gulu"
@@ -260,6 +261,19 @@ type SelectOption struct {
 	Desc  string `json:"desc"`  // 选项描述
 }
 
+// FilterColorValue 校验选项颜色值，仅允许空字符串或 1-14 的调色板索引，非法值返回空字符串
+func FilterColorValue(color string) string {
+	color = strings.TrimSpace(color)
+	if "" == color {
+		return ""
+	}
+	n, err := strconv.Atoi(color)
+	if nil != err || 1 > n || 14 < n {
+		return ""
+	}
+	return strconv.Itoa(n)
+}
+
 // View 描述了视图的结构。
 type View struct {
 	ID               string         `json:"id"`                // 视图 ID
diff --git a/kernel/av/color_test.go b/kernel/av/color_test.go
@@ -0,0 +1,46 @@
+// SiYuan - Refactor your thinking
+// Copyright (c) 2020-present, b3log.org
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+package av
+
+import "testing"
+
+func TestFilterColorValuePreservesPaletteIndex(t *testing.T) {
+	for _, color := range []string{"", "1", "14"} {
+		if filtered := FilterColorValue(color); filtered != color {
+			t.Fatalf("palette color was changed [expected=%q, actual=%q]", color, filtered)
+		}
+	}
+	if filtered := FilterColorValue(" 3 "); filtered != "3" {
+		t.Fatalf("palette color with whitespace was not trimmed [%q]", filtered)
+	}
+}
+
+func TestFilterColorValueRejectsUnsafeValues(t *testing.T) {
+	for _, color := range []string{
+		`1);color:red" onmouseover="alert(1)" x="`,
+		"0",
+		"15",
+		"1.5",
+		"abc",
+		`"`,
+		"<script>",
+	} {
+		if filtered := FilterColorValue(color); "" != filtered {
+			t.Fatalf("unsafe color value was preserved [input=%q, actual=%q]", color, filtered)
+		}
+	}
+}
diff --git a/kernel/model/attribute_view.go b/kernel/model/attribute_view.go
@@ -1997,7 +1997,7 @@ func AppendAttributeViewDetachedBlocksWithValues(avID string, blocksValues [][]*
 					for _, valOpt := range v.MSelect {
 						if opt := key.GetOption(valOpt.Content); nil == opt {
 							// 不存在的选项新建保存
-							opt = &av.SelectOption{Name: valOpt.Content, Color: valOpt.Color}
+							opt = &av.SelectOption{Name: valOpt.Content, Color: av.FilterColorValue(valOpt.Color)}
 							key.Options = append(key.Options, opt)
 						} else {
 							// 已经存在的选项颜色需要保持不变
@@ -2109,7 +2109,7 @@ func DuplicateAttributeViewRow(tx *Transaction, avID, previousItemID, srcRowID,
 			if 0 < len(newVal.MSelect) {
 				for _, valOpt := range newVal.MSelect {
 					if opt := keyValues.Key.GetOption(valOpt.Content); nil == opt {
-						opt = &av.SelectOption{Name: valOpt.Content, Color: valOpt.Color}
+						opt = &av.SelectOption{Name: valOpt.Content, Color: av.FilterColorValue(valOpt.Color)}
 						keyValues.Key.Options = append(keyValues.Key.Options, opt)
 					} else {
 						valOpt.Color = opt.Color
@@ -7447,7 +7447,7 @@ func updateAttributeViewValue(tx *Transaction, attrView *av.AttributeView, keyID
 			for _, valOpt := range val.MSelect {
 				if opt := key.GetOption(valOpt.Content); nil == opt {
 					// 不存在的选项新建保存
-					color := valOpt.Color
+					color := av.FilterColorValue(valOpt.Color)
 					if "" == color {
 						color = fmt.Sprintf("%d", 1+rand.Intn(14))
 					}
@@ -7824,13 +7824,13 @@ func updateAttributeViewColumnOptions(operation *Operation) (err error) {
 	for _, opt := range options {
 		if existingOpt, exists := existingOptions[opt.Name]; exists {
 			// 如果选项已经存在则更新颜色和描述
-			existingOpt.Color = opt.Color
+			existingOpt.Color = av.FilterColorValue(opt.Color)
 			existingOpt.Desc = opt.Desc
 		} else {
 			// 如果选项不存在则添加新选项
 			selectKey.Options = append(selectKey.Options, &av.SelectOption{
 				Name:  opt.Name,
-				Color: opt.Color,
+				Color: av.FilterColorValue(opt.Color),
 				Desc:  opt.Desc,
 			})
 			addNew = true
@@ -7954,7 +7954,7 @@ func updateAttributeViewColumnOption(operation *Operation) (err error) {
 	oldName := strings.TrimSpace(data["oldName"].(string))
 	newName := strings.TrimSpace(data["newName"].(string))
 	newDesc := strings.TrimSpace(data["newDesc"].(string))
-	newColor := data["newColor"].(string)
+	newColor := av.FilterColorValue(data["newColor"].(string))
 
 	found := false
 	if oldName != newName {

Original file line number	Diff line number	Diff line change
`@@ -136,7 +136,7 @@ export const genAVValueHTML = (value: IAVCellValue, dateFormat: TAVDateFormat =`
`136`	`136`	`if (value.type === "select" && index > 0) {`
`137`	`137`	`return;`
`138`	`138`	`}`
`139`		- html += `<span class="b3-chip b3-chip--middle" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">${escapeHtml(item.content)}</span>`;
	`139`	+ html += `<span class="b3-chip b3-chip--middle" style="background-color:var(--b3-font-background${escapeAttr(item.color)});color:var(--b3-font-color${escapeAttr(item.color)})">${escapeHtml(item.content)}</span>`;
`140`	`140`	`});`
`141`	`141`	`break;`
`142`	`142`	`case "mAsset":`