docs/archives/119-csp-safe-template-processing/implementation.md
static processContent(content: string, context: TemplateContext): string {
let result = content;
// 使用正则表达式替换所有{{variable}}模式
result = result.replace(/\{\{([^}]+)\}\}/g, (match, variableName) => {
const trimmedName = variableName.trim();
const value = context[trimmedName];
// 返回值或空字符串(避免undefined)
return value !== undefined ? String(value) : '';
});
return result;
}
static isExtensionEnvironment(): boolean {
try {
// 1. 排除Node.js环境
if (typeof window === 'undefined') {
return false;
}
// 2. 排除Electron环境(多重检测)
if (typeof window !== 'undefined') {
try {
if (typeof (window as any).require !== 'undefined' ||
typeof (window as any).electronAPI !== 'undefined' ||
typeof (window as any).electron !== 'undefined') {
return false; // Electron环境
}
if (typeof navigator !== 'undefined' &&
navigator.userAgent &&
navigator.userAgent.includes('Electron')) {
return false; // Electron环境
}
} catch (e) {
// 检测失败时继续,不影响其他平台
}
}
// 3. 检查Chrome扩展API
if (typeof chrome !== 'undefined' &&
typeof chrome.runtime !== 'undefined' &&
typeof chrome.runtime.getManifest === 'function') {
// 4. 验证manifest有效性
try {
const manifest = chrome.runtime.getManifest();
return !!(manifest && typeof manifest.manifest_version !== 'undefined');
} catch (manifestError) {
return false;
}
}
return false;
} catch (error) {
// 任何错误都返回false,确保其他平台正常工作
return false;
}
}
// Advanced template: use template technology for variable substitution
if (Array.isArray(template.content)) {
// 检查是否在浏览器扩展环境中
if (CSPSafeTemplateProcessor.isExtensionEnvironment()) {
return template.content.map(msg => {
// 验证模板内容
CSPSafeTemplateProcessor.validateTemplate(msg.content);
return {
role: msg.role,
content: CSPSafeTemplateProcessor.processContent(msg.content, context)
};
});
} else {
// 使用完整Handlebars功能
return template.content.map(msg => ({
role: msg.role,
content: Handlebars.compile(msg.content, { noEscape: true })(context)
}));
}
}
it('should return false in Node.js environment (no window)', () => {
// 不设置window对象,模拟Node.js环境
expect(CSPSafeTemplateProcessor.isExtensionEnvironment()).toBe(false);
});
it('should return true for valid browser extension', () => {
// 模拟浏览器环境
(global as any).window = {};
(global as any).navigator = { userAgent: 'Chrome' };
(global as any).chrome = {
runtime: {
getManifest: vi.fn(() => ({ manifest_version: 3, name: 'Test Extension' }))
}
};
expect(CSPSafeTemplateProcessor.isExtensionEnvironment()).toBe(true);
});
it('should return false when window.require exists (Electron)', () => {
(global as any).window = { require: vi.fn() };
(global as any).navigator = { userAgent: 'Chrome' };
(global as any).chrome = {
runtime: {
getManifest: vi.fn(() => ({ manifest_version: 3, name: 'Test' }))
}
};
expect(CSPSafeTemplateProcessor.isExtensionEnvironment()).toBe(false);
});
it('should replace simple variables', () => {
const content = 'Hello {{name}}!';
const context: TemplateContext = { name: 'World' };
const result = CSPSafeTemplateProcessor.processContent(content, context);
expect(result).toBe('Hello World!');
});
it('should handle predefined template variables', () => {
const content = 'Original: {{originalPrompt}}, Last: {{lastOptimizedPrompt}}, Input: {{iterateInput}}';
const context: TemplateContext = {
originalPrompt: 'Write a story',
lastOptimizedPrompt: 'Write a creative story about space',
iterateInput: 'Make it more dramatic'
};
const result = CSPSafeTemplateProcessor.processContent(content, context);
expect(result).toBe('Original: Write a story, Last: Write a creative story about space, Input: Make it more dramatic');
});
/\{\{([^}]+)\}\}/gTemplateContext接口String(value)确保类型安全| 功能 | Handlebars | CSP安全处理器 | 性能差异 |
|---|---|---|---|
| 基本变量替换 | ✅ | ✅ | CSP更快 |
| 条件语句 | ✅ | ❌ | - |
| 循环语句 | ✅ | ❌ | - |
| 部分模板 | ✅ | ❌ | - |
| 内存占用 | 较高 | 较低 | CSP更优 |
| 启动时间 | 较慢 | 较快 | CSP更优 |
// 在TemplateContext中添加新字段即可自动支持
export interface TemplateContext {
// 现有字段...
// 新增字段 - 自动支持
userLanguage?: string;
modelName?: string;
timestamp?: string;
}
// 未来可考虑的配置选项
interface CSPProcessorConfig {
enableWarnings: boolean;
customVariablePattern?: RegExp;
defaultValue?: string;
}
static validateTemplate(content: string): void {
const unsupportedPatterns = [
/\{\{#if\s/, // 条件语句
/\{\{#each\s/, // 循环语句
// ... 其他模式
];
for (const pattern of unsupportedPatterns) {
if (pattern.test(content)) {
console.warn('Template contains unsupported Handlebars features...');
break;
}
}
}
💡 实现要点:
原实现特点:
最终实现:
// 极简实现 - 统一使用Mustache
static processTemplate(template: Template, context: TemplateContext): Message[] {
return template.content.map(msg => ({
role: msg.role,
content: Mustache.render(msg.content, context) // 单一处理路径
}));
}
简化效果:
架构演进启示:
对未来开发的指导:
这次迁移将复杂的环境适配实现转变为简单的统一实现,是Less is More设计理念的完美体现。