Ionic应用中contenteditable被清理失效的解决方法求助

嘿，这个问题我熟——你碰到的是Angular内置安全机制在起作用！Angular的DomSanitizer会自动过滤它认为“不安全”的HTML内容和属性，contenteditable刚好不在它默认允许的属性列表里，所以被无情剥离了，同时弹出那个安全警告。

下面给你两种靠谱的解决办法，按需选就行：

方案一：手动标记HTML为可信内容（推荐） #

这是最直接也最安全的做法，毕竟咱们只针对自己确认可信的内容放行，不会全局放宽安全策略。

步骤很简单：

1. 先在你的home.ts里导入需要的模块：

import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

2. 在组件的构造函数里注入DomSanitizer：

constructor(private sanitizer: DomSanitizer) {
  this.buttons = Object.keys(this.json_html);
}

3. 写个小方法，专门处理你的HTML内容，把它标记为安全的：

getSafeHtml(key: string): SafeHtml {
  return this.sanitizer.bypassSecurityTrustHtml(this.json_html[key]);
}

4. 最后修改home.html里的绑定，调用这个方法就行：

<div *ngIf="selectedButton" [innerHtml]="getSafeHtml(selectedButton)">
</div>

改完之后，Angular就会信任这段HTML，不会再剥离contenteditable属性，那个烦人的警告也会消失。

方案二：全局自定义安全策略（谨慎使用） #

如果你有大量类似的HTML需要处理，不想逐个标记，也可以全局配置安全策略，让Angular默认允许contenteditable属性。但注意：只有当你能100%保证所有HTML内容都是可信的，才用这个方法，不然会增加XSS攻击的风险！

具体步骤：

1. 先创建一个自定义的安全策略类（比如custom-dom-sanitizer.ts）：

import { SecurityContext } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

export class CustomDomSanitizer extends DomSanitizer {
  constructor(private delegate: DomSanitizer) {
    super();
  }

  override sanitize(context: SecurityContext, value: any): string | null {
    if (context === SecurityContext.HTML && typeof value === 'string') {
      // 这里我们保留contenteditable属性，你也可以添加其他需要允许的属性
      const doc = new DOMParser().parseFromString(value, 'text/html');
      doc.querySelectorAll('[contenteditable]').forEach(el => {
        // 重新设置属性，确保不会被过滤
        el.setAttribute('contenteditable', el.getAttribute('contenteditable') || 'true');
      });
      return doc.body.innerHTML;
    }
    // 其他情况还是用默认的安全策略
    return this.delegate.sanitize(context, value);
  }
}

2. 然后在你的根模块（比如AppModule）里替换默认的DomSanitizer：

import { NgModule } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { CustomDomSanitizer } from './custom-dom-sanitizer';

@NgModule({
  providers: [
    {
      provide: DomSanitizer,
      useFactory: (delegate: DomSanitizer) => new CustomDomSanitizer(delegate),
      deps: [DomSanitizer]
    }
  ]
})
export class AppModule { }

补充说明 #

为什么会出现这个问题？其实Angular的默认安全策略是为了防止XSS攻击，它会严格过滤HTML中的危险内容和属性。contenteditable本身不算危险属性，但刚好不在Angular默认允许的属性集合里，所以被自动清理了。通过标记内容为可信，或者自定义策略允许这个属性，就能解决问题啦。

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