Spartacus 6.3.0中SmartEdit段落组件内联脚本无法执行的解决咨询

这个警告是Angular默认的XSS安全防护机制导致的——它会自动剥离动态插入HTML中的脚本、事件绑定等风险内容，所以你的内联脚本被拦截无法执行。要实现内联脚本正常加载，需要修改组件逻辑并配置Angular安全策略，具体步骤如下：

1. 自定义段落组件处理脚本 #

Angular的DomSanitizer仅能标记HTML为安全，但不会自动执行内联脚本，因此需要手动提取并执行脚本。创建一个自定义段落组件：

import { Component, Input, OnInit, Renderer2, Inject } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-custom-paragraph',
  template: '<div [innerHTML]="trustedHtml"></div>'
})
export class CustomParagraphComponent implements OnInit {
  @Input() content: string;
  trustedHtml: SafeHtml;

  constructor(
    private sanitizer: DomSanitizer,
    private renderer: Renderer2,
    @Inject('DOCUMENT') private document: Document
  ) {}

  ngOnInit(): void {
    // 标记HTML为安全内容，避免Angular sanitize剥离
    this.trustedHtml = this.sanitizer.bypassSecurityTrustHtml(this.content);
    // 手动提取并执行脚本
    this.extractAndExecuteScripts();
  }

  private extractAndExecuteScripts(): void {
    const tempDiv = this.renderer.createElement('div');
    this.renderer.setProperty(tempDiv, 'innerHTML', this.content);
    const scripts = tempDiv.querySelectorAll('script');
    
    scripts.forEach(script => {
      const newScript = this.renderer.createElement('script');
      // 复制原脚本的src或内联代码
      if (script.src) {
        this.renderer.setAttribute(newScript, 'src', script.src);
      } else {
        this.renderer.setProperty(newScript, 'textContent', script.textContent);
      }
      // 添加到文档执行，执行后移除临时脚本
      this.renderer.appendChild(this.document.body, newScript);
      this.renderer.removeChild(this.document.body, newScript);
    });
  }
}

2. 替换Spartacus默认段落组件 #

在你的模块中配置CmsConfig，用自定义组件替换SmartEdit默认的段落组件：

import { NgModule } from '@angular/core';
import { CmsConfig, provideConfig } from '@spartacus/core';
import { CustomParagraphComponent } from './custom-paragraph.component';

@NgModule({
  declarations: [CustomParagraphComponent],
  providers: [
    provideConfig({
      cmsComponents: {
        CMSParagraphComponent: {
          component: CustomParagraphComponent
        }
      }
    } as CmsConfig)
  ]
})
export class CustomCmsModule {}

3. 安全风险提示 #

务必注意：这种方式完全绕过了Angular的XSS防护，仅适用于内容由内部可信人员编辑的场景。如果允许外部用户通过SmartEdit添加内容，会引入严重的XSS攻击风险。

内容的提问来源于stack exchange，提问作者Vignesh