How to save iframe tag into a post?

Question

I've noticed that when I embed an iframe into a post then save the update, the iframe will not be saved. It seems to be a security feature, but how can I embed the iframe anyway? and set it to accept only url source from specific domain?

Any idea?

Answer 1

iframes get stripped out for security reasons, you shouldn't be trying to put embed codes directly into post content, there are other methods, such as oembed or shortcodes.

If you have the unfiltered_html capability, you can add them via the classic editor, but this capability is extremely dangerous. It also means any users who don't have this ability will strip the iframes out, as might any automated processes.

So How Do I Embed Things In My Site?

There are a few options

OEmbed

If you take the URL of a Youtube video and copy paste it into the editor on its own line, it'll auto-magically turn into an iframe embed. This is OEmbed at work.

You can use OEmbed with lots of services, and there are APIs for adding your own severices. Some 3rd parties act as go betweens adding support for lots of places that don't normally support OEmbed, such as iframely

Shortcodes

You can add shortcodes in code that lets you embed things into post content. This is how plugins place forms and other complicated markup into the middle of posts.

You could even build an [iframe] shortcode

Content Security Policies and iframes

Note that some things just can't be put in iframes due to their content security policies, this isn't a WP limitation but a is fundamental to how iframes and browsers work.

Answer 2

If you're using the Classic Editor, you are probably logging in as a user who does not have the unfiltered_html capability. On a regular site, an Administrator has this capability; on a MultiSite, only Super Administrators do.

One option is to give yourself the capability. For example, if you're an Editor:

<?php
/* Plugin Name: Allow Iframes */
// Update "editor" role when this plugin is updated
register_activation_hook( __FILE__, 'wpse_add_unfiltered_html' );
function wpse_add_unfiltered_html() {
    // Get whichever role you want to affect
    $role = get_role('editor');
    // Give editors "unfiltered_html" capability
    $role->add_cap('unfiltered_html');
}
?>

Another option, depending on what type of iframes you're embedding, is to use the Block Editor. It allows you to embed many iframes such as YouTube videos without any additional code needed, and this will work for users of any role.

Answer 3

oups, sorry... here is the code

function iframe_shortcode($atts) {
extract(shortcode_atts(array(
    'src' => '',
    'width' => '',
    'height' => '',
), $atts));

return '<iframe src="' . esc_attr($src) . '" width="' . esc_attr($width) . '" height="' . esc_attr($height) . '"></iframe>'; } 

add_shortcode('iframe', 'iframe_shortcode');

[iframe src="http://example.com" width="500" height="400"]

Answer 4

thanks to Tom's hint I asked chatGPT... and it did the trick !

function iframe_shortcode($atts) {
extract(shortcode_atts(array(
'src' => '',
'width' => '',
'height' => '',
), $atts));

return '<iframe src="' . esc_attr($src) . '" width="' . 
esc_attr($width) . '" height="' . esc_attr($height) . '">. 
</iframe>'; } 

add_shortcode('iframe', 'iframe_shortcode');

[iframe src="http://example.com" width="500" height="400"]