Tinymce WYSIWYG Editor拦截logrocket读取内容问题咨询

TinyMCE 从5.x版本开始内置了多层内容安全防护机制，确实会导致LogRocket这类会话录制/第三方脚本工具无法正常读取编辑器内的文本内容，在LogRocket侧确认无拦截的前提下，读取异常基本都是编辑器侧的安全策略导致的。

具体拦截逻辑 #

• iframe沙箱隔离：TinyMCE默认以独立iframe承载编辑区域，iframe默认带沙箱属性限制，编辑区DOM处于独立的执行上下文，第三方脚本在父页面直接遍历DOM读取内容时，会被浏览器同源策略+编辑器的沙箱规则拦截，无法拿到有效文本。
• DOM读取代理拦截：编辑器对编辑区节点的textContent、innerText、innerHTML等内容读取API做了代理劫持，非编辑器实例内部触发的读取请求，默认会返回空值或截断内容，该设计原本用于防范XSS脚本恶意窃取用户输入的内容。

对应解决方法 #

根据你的部署场景选一种配置即可：

1. 保留默认iframe模式，关闭第三方脚本访问限制
   初始化TinyMCE时添加如下配置项，放开读取权限：

tinymce.init({
  // 替换成你自己的编辑器选择器
  selector: '#editor-container',
  // 关闭内置的跨脚本读取拦截
  security: {
    allow_foreign_script_access: true
  },
  // 移除iframe默认的沙箱访问限制
  iframe_attrs: {
    sandbox: 'allow-same-origin allow-scripts'
  }
})

配置完成后可以在浏览器控制台执行document.querySelector('.tox-edit-area__iframe').contentDocument.body.innerText测试，如果能正常返回编辑器内的文本，就说明LogRocket可以正常抓取内容了。

2. 切换为内联编辑模式（无iframe隔离）
   如果不需要iframe的隔离能力，可以直接开启内联模式，编辑区会直接挂载在当前主文档DOM树中，不存在跨上下文拦截问题：

tinymce.init({
  selector: '#editor-container',
  inline: true
})

注意：关闭上述安全防护后，页面内的其他第三方脚本也可以随意读取编辑器内的输入内容，如果你的场景下编辑器会承载密码、身份证号等敏感信息，请提前做好安全评估再调整配置。

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