Copy/paste shortcode view containing HTML tags is broken

[bduclos]

There is an issue when we copy/paste a shortcode view containing HTML tags. It was working in WP 4.5.3
The issue is line 120 of wp-includes/js/tinymce/plugins/wpview/plugin.js which creates a text node instead of an html node.

event.targetClone = editor.getDoc().createTextNode(
    window.decodeURIComponent( editor.dom.getAttrib( event.targetClone, 'data-wpview-text' ) )
);

For example: I have the following shortcode:

[toggle title="Toggle Title"]<h1>Lorem ipsum</h1>[/toggle]

In Visual Mode, copy/paste the view generates the following broken view:

[iseulde]

Introduced in [37446]. Before we used ​http://archive.tinymce.com/wiki.php/api4:method.tinymce.dom.DOMUtils.create which set the text as innerHTML.

[ocean90]

Quoting @azaozz from ticket:36434:29:

Could you open a new ticket for this. I can see where it gets converted to text, just don't want to introduce potential security problem as the browsers will parse the inserted HTML.

@iseulde How would a potential fix look for this?

[iseulde]

Well, we inserted it before... Looking at it right now.

[iseulde]

@bduclos Could you give us the view registration code? I don't see where the problem is coming from.

[bduclos]

I don't have my code at the moment but I know you can reproduce this issue with the Shortcake plugin ​https://github.com/wp-shortcake/shortcake

Their registation code for the view is ​https://github.com/wp-shortcake/shortcake/blob/master/js/build/shortcode-ui.js#L274

To reproduce the issue:

• Activate the Shortcake plugin and the Shortcode UI Example plugin.
• Create a new Post. Click on the Add Media button, then on the left click on Insert Post Element.
• Select "Shortcake Dev" and in the Quote textarea, for the purpose of testing, type:

  <h2>Heading</h2> 
  Some text
  

Copy the view and paste it. You should see:

[bduclos]

Here's a simplified code:

1. The registration of the view:

window.wp.mce.views.register( 'test', {		
   initialize: function() {
      var self = this;						
      wp.ajax.post( 'get-shortcode' , {
	shortcode: self.shortcode.string(), 
      } )
      .done( function( response ) {	
	  self.render( response );							    	
      } );					
   }	
}); 

2. The function called to retrieve the shortcode content:

function wp_ajax_get_shortcode() {
  $shortcode = $_POST['shortcode'] ;
  ob_start();   
  echo do_shortcode( $shortcode );
  $content = ob_get_clean();            
  wp_send_json_success( $content );
}
add_action( 'wp_ajax_get-shortcode', 'wp_ajax_get_shortcode' );

3. The function that add the shortcode:

function ve_test_func( $attr, $content = '' ) { 
   return $content;
}
add_shortcode('test', 've_test_func' );

4. Now in the editor, type the following content in Text Mode:

   [test]
   <h1>Heading</h1>
   [/test]
   

Switch to Visual Mode. If you try to copy/paste the view, the new view is broken.

[azaozz]

Looking at this again, fixing it will introduce a self-xss vulnerability, and there's no good way to sanitize the shortcode content in js. The way I see at the moment is to send it to the server and run it through kses, perhaps?

Also, this is now superseded by the block editor. Closing as maybelater for now. Feel free to reopen with a patch if still needed in the classic editor.