How to store the third party script with HTML code in the wordpress custom input field?

Question

I have created a custom field on my custom post. Below is the code I am using for the custom field.

<?php 

function wpt_add_thirdpartyvideo_metaboxes() {
  add_meta_box(
    'wpt_thirdpartyvideo_extra',
    'Information',
    'wpt_thirdpartyvideo_extra',
    'partyvideo',
    'normal',
    'default'
  );  
}
add_action( 'add_meta_boxes', 'wpt_add_thirdpartyvideo_metaboxes' );

function wpt_thirdpartyvideo_extra() {
  global $post;
  // Nonce field to validate form request came from current site
  wp_nonce_field( basename( __FILE__ ), 'thirdpartyvideo_extra' );
  // Output the field
  echo '<table width="100%" border="0" cellspacing="0" cellpadding="10">
  <tr>
        <td>Video Script here </td>
        <td>
      <div class="form-check">
       <textarea name="thirdpartyvideoscript">' . esc_textarea( get_post_meta( $post->ID, 'thirdpartyvideoscript', true ) )  . '</textarea>
       
      </div>
      </td>
        </tr>   
    </table>';
}
function wpt_save_thirdpartyvideo_meta( $post_id, $post ) {
  if ( ! current_user_can( 'edit_post', $post_id ) ) {
    return $post_id;
  }
  if ( ! isset( $_POST['thirdpartyvideoscript'] ) ) {
    return $post_id;
  }

  $events_meta['thirdpartyvideoscript'] = esc_textarea( $_POST['thirdpartyvideoscript'] );
  
  foreach ( $events_meta as $key => $value ) :
    if ( 'revision' === $post->post_type ) {
      return;
    }
    if ( get_post_meta( $post_id, $key, false ) ) {
      update_post_meta( $post_id, $key, $value );
    } else {
      add_post_meta( $post_id, $key, $value);
    }
    if ( ! $value ) {
      delete_post_meta( $post_id, $key );
    }
  endforeach;
}
add_action( 'save_post', 'wpt_save_thirdpartyvideo_meta', 1, 2 );

 ?>

I have tried to add some dummy content and it's working. Now I have to add the third-party video code which is script and HTML tags like below Third-party example.

<script src="//fast.wistia.com/embed/medias/s3lqfi0zn7.jsonp" async></script>
<script src="//fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_embed wistia_async_s3lqfi0zn7" style="height:349px;width:620px">&nbsp;</div>

If I add the above code then I am getting the below output

<script src="//fast.wistia.com/embed/medias/s3lqfi0zn7.jsonp" async></script>
    <script src="//fast.wistia.com/assets/external/E-v1.js" async></script>
    <div class="wistia_embed wistia_async_s3lqfi0zn7" style="height:349px;width:620px"> </div>

Answer 1

You are using esc_textarea() to output the content - so it's doing exactly that.

This is of course the correct thing to do with user input, so you have a few options here.

1. Only ask for the embed id - then reconstruct it in php. Something like:

<!-- Meta box input example -->
<input name="thirdpartyvideoscript" placeholder="eg. s3lqfi0zn7" />
<!-- expected input format is "s3lqfi0zn7" -->

<?php if ( ! empty( $meta_embed_value ) ) { // $meta_embed_value is your returned meta box (get_post_meta) ?>
    <script src="//fast.wistia.com/embed/medias/<?php echo esc_attr( $meta_embed_value ); ?>.jsonp" async></script>
    <script src="//fast.wistia.com/assets/external/E-v1.js" async></script>
    <div class="wistia_embed wistia_async_<?php echo esc_attr( $meta_embed_value ); ?>" style="height:349px;width:620px">&nbsp;</div>
<?php } ?>

2. You can deconstruct the input using a RegEx and match the expected input - ie allow the whole script to be pasted into the textedit area - then use the same code above to print out your matches - in your allowed and safe format.

3. Throw caution to the wind... open yourself up to stored XSS attacks and do the unthinkable - trust user input. Which if I hadn't made myself clear enough - isn't a good thing to do.