Iframe code added through the source toolbar button not visible in the back-end

[angelokeirsebilck]

Description

Hi, i'm adding the following code through the Source toolbar button:

<div style="aspect-ratio:16/9"><iframe src="https://player.clevercast.com/?account_id=VzaPKg&item_id=VzOEOJ" frameborder="0" allow="autoplay; fullscreen" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0"></iframe></div>

I've updated the HTML Purifier config to allow this iframe:

{ "Attr.AllowedFrameTargets": ["_blank"], "Attr.EnableID": true, "HTML.AllowedComments": ["pagebreak"], "HTML.AllowedElements": ["iframe", "div"], "HTML.SafeIframe": true, "URI.SafeIframeRegexp": "%^(https?:)?//(www.youtube.com/|player.vimeo.com/|www.linkedin.com|www.facebook.com|player.clevercast.com)%" }

After saving the entry the iframe is showing on the front-end but the html added through the source toolbar button is gone in the back-end.

Before saving:

After saving:

It is gone in the CKEditor field but it still shows up in the front. How can i make this visible in the back-end aswel? Now we cannot delete it nor update the iframe code since it is not visible anymore in the back-end.

Steps to reproduce

1.Add html/iframe code through the Source button
2.Save the entry
3. Check if its visible on the front
4. Confirm it is not visibler anymore in the back-end

Additional info

• Craft version: Craft Pro 5.5.5
• PHP version: 8.3.8
• Database driver & version: MySQL 8.0.36
• Plugins & versions: CKEditor: 4.4.0

[i-just]

Hi, thanks for reaching out! In addition to allowing those elements in the HTML Purifier config, you also have to allow those elements in the CKEditor’s configuration. For example, adding this to the CKEditor Config (JavaScript notation) used by the field you’re adding this iframe to will tell CKEditor to allow any HTML tags, styles, attributes and classes:

return {
  htmlSupport: {
    allow: [
      {
        name: /.*/,
        attributes: true,
        classes: true,
        styles: true
      }
    ]
  }
}

You can tweak this only to allow the things you need. You can find more about configuring htmlSupport here.

I hope this helps!

I’ll close this now, but feel free to reply if you run into further issues.