Confusion on WP Nonce usage in my Plugin

I created a small plugin where users can set multiple featured image by clicking Add New link from the meta box and remove them as well. The user can use Set featured image link to select featured image from media library. The Add New link clones (using javascript) previous meta box (with appropriate filters) to create a new meta box whereas the remove button removes the meta box.

Problem and Questions

1. I am currently using only single nonce field for every meta box generated. Many previous threads suggest that new nonce field should be added for every meta box. How can i create different nonce field if the box is being cloned using javascript? Should i use AJAX? or is it even necessary to use nonce field in this case as user can only select image from media library?

2. The hidden input field in meta box is used as an array (see the html for meta box) and is saved using update_post_meta. If the nonce field is added for every dynamically added meta box how can i check it while saving the post?

if ( !wp_verify_nonce( noncefields..., plugin_basename(__FILE__) ) ) {
return;
}

The html for the meta box looks like this.

<?php wp_nonce_field( plugin_basename(__FILE__), 'dfi_fimageplug'); //this is generated only once for all meta box ?>
<a href="https://wordpress.stackexchange.com/questions/115192/javascript:void(0)" class="dfiFeaturedImage"><?php _e('Set featured image', 'ap_dfi_dynamic-featured-image') ?></a><br/>      
<img src="<?php if( !empty($featuredImgTrimmed) ) echo site_url() . $featuredImgTrimmed ?>" class="dfiImg <?php if( is_null($featuredImgTrimmed) ) echo "dfiImgEmpty' ?>'/>
<div class="dfiLinks">   
 <a href="https://wordpress.stackexchange.com/questions/115192/javascript:void(0)" data-id='<?php echo $featuredId ?>' class="dfiAddNew"><?php _e('Add New', 'ap_dfi_dynamic-featured-image') ?></a>
 <a href="https://wordpress.stackexchange.com/questions/115192/javascript:void(0)" class="dfiRemove"><?php _e('Remove', 'ap_dfi_dynamic-featured-image') ?></a>
</div>
<div class="dfiClearFloat"></div>
<input type="hidden" name="dfiFeatured[]" value="<?php echo $featuredImg ?>" />

I am not very experienced in plugin development and am really confused on this matter. Please suggest.

Nonces are one time use limited life unique numbers. You can clone them but the problem you’ll see is that once sent back to the server and validated, the other clones will become invalid.

You have a few ways to handle this.

1. Generate all your boxes on the server and discard the Javascript.
2. Use Ajax to request a new nonce for each cloned box.
3. My preferred choice, Use Ajax to request the server to create the clone.

Either way, your nonce needs to come from the server. The way WP handles this (for it’s Categories metabox for example) is to generate the Nonce name from the taxonomy name. You could use possibly the post value or image name for this.

<?php wp_nonce_field('add-' . $name, 'add-' . $name . '_nonce', false); ?>

Doing this would also require you to store the $name within a hidden field on your page.

<input id="<?php echo $name; ?>" type="hidden" value="add-<?php echo $name; ?>" />

From within your Ajax send both the unique name and the nonce back to the server validate and return whatever you want.

As for your other question “Is the nonce necessary?”. Well, it depends. I would suggest, any time you make changes to your database from form data, then yes they are required. If you’re only retrieving data, then no they’re not. But they will still come in useful for invalidating requests that may have been bookmarked or cached somewhere. I can’t remember exactly, I think their lifetime is about 12 hours.