如何在不进行HTML编码的情况下将iframe的HTML传递至服务器

我之前也碰到过一模一样的情况——CKEditor里插入的iframe代码提交后被转义成<iframe...>，导致后端存的不是原始HTML。下面是几个关键的解决步骤，从前端到后端逐一排查：

1. 配置CKEditor允许并保护iframe标签 #

CKEditor默认可能会过滤或转义iframe这类带有外部资源的标签，你需要修改编辑器配置，明确允许iframe及其属性，同时告诉编辑器不要修改这些标签的内容：

CKEDITOR.editorConfig = function( config ) {
    // 允许包含videodetector类的div，以及iframe的必要属性
    config.extraAllowedContent = 'div(videodetector); iframe[src,frameborder,allowfullscreen]';
    
    // 保护iframe标签不被编辑器转义或修改
    config.protectedSource.push( /<iframe[\s\S]*?>/g );
    config.protectedSource.push( /<\/iframe>/g );
};

这里的protectedSource会让CKEditor把匹配到的iframe标签当作“不可编辑的原始内容”处理，不会对其进行HTML编码。

2. 前端提交时获取CKEditor的原始HTML #

不要直接从绑定的textarea的value属性取内容（有些情况下textarea会自动转义），而是用CKEditor的API获取原始编辑内容：

// 替换成你的编辑器ID
const editor = CKEDITOR.instances.yourEditorId;
const rawContent = editor.getData();

// 用AJAX提交示例（如果是表单提交，确保textarea的值被设置为rawContent）
fetch('/your-server-url', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: `content=${encodeURIComponent(rawContent)}`
})
.then(response => response.json())
.then(data => console.log('提交成功', data));

如果是传统表单提交，记得在提交前把rawContent赋值给对应的textarea，确保提交的是原始HTML。

3. 后端避免自动HTML编码 #

后端接收数据时，很多框架会默认对HTML内容进行转义（比如防止XSS），但如果你确认内容是可信的（或者已经做了安全过滤），需要关闭自动转义：

举个PHP的例子（原生或Laravel） #

• 原生PHP：直接使用$_POST['content']即可，默认不会自动编码，但要注意后续存储时不要手动转义：

$content = $_POST['content'];
// 直接存入数据库，比如用PDO的预处理语句
$stmt = $pdo->prepare("INSERT INTO your_table (content) VALUES (?)");
$stmt->execute([$content]);

• Laravel框架：如果全局开启了转义，接收时可以关闭自动转义：

// 方法1：接收时关闭转义
$content = $request->input('content', '', false);

// 方法2：在模型中指定字段不转义（适用于Eloquent）
class YourModel extends Model
{
    protected $casts = [
        'content' => 'string', // 不要使用html类型的cast
    ];
}

4. 安全提醒：过滤恶意iframe #

允许iframe会带来XSS风险，一定要在后端对内容进行过滤，只允许可信域名的iframe（比如YouTube、Vimeo）。可以用HTMLPurifier这类库来实现：

require_once 'path/to/HTMLPurifier.auto.php';

$config = HTMLPurifier_Config::createDefault();
// 允许的标签和属性
$config->set('HTML.Allowed', 'div(videodetector),iframe[src,frameborder,allowfullscreen]');
// 只允许指定域名的iframe
$config->set('URI.SafeIframeRegexp', '%^(https?:)?//(www\.)?(youtube\.com/embed/|vimeo\.com/)%');

$purifier = new HTMLPurifier($config);
$safeContent = $purifier->purify($_POST['content']);

// 存储过滤后的$safeContent

按照这几步操作，应该就能让iframe的原始HTML正确提交到服务器，不会被编码了。

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