Make WordPress Core

Opened 7 years ago

Closed 4 years ago

#37482 closed defect (bug) (maybelater)

Copy/paste shortcode view containing HTML tags is broken

Reported by: bduclos's profile bduclos Owned by:
Milestone: Priority: normal
Severity: normal Version: 4.6
Component: TinyMCE Keywords:
Focuses: javascript Cc:


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:

Change History (10)

#1 @iseulde
7 years ago

  • Milestone changed from Awaiting Review to 4.6

Introduced in [37446]. Before we used which set the text as innerHTML.

#2 @ocean90
7 years ago

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?

#3 @iseulde
7 years ago

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

#4 @iseulde
7 years ago

  • Milestone changed from 4.6 to Awaiting Review

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

#5 @bduclos
7 years ago

I don't have my code at the moment but I know you can reproduce this issue with the Shortcake plugin

Their registation code for the view is

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:
    Some text

Copy the view and paste it. You should see:

#6 @bduclos
7 years ago

Here's a simplified code:

  1. The registration of the view:
window.wp.mce.views.register( 'test', {		
   initialize: function() {
      var self = this;			 'get-shortcode' , {
	shortcode: self.shortcode.string(), 
      } )
      .done( function( response ) {	
	  self.render( response );							    	
      } );					
  1. The function called to retrieve the shortcode content:
function wp_ajax_get_shortcode() {
  $shortcode = $_POST['shortcode'] ;
  echo do_shortcode( $shortcode );
  $content = ob_get_clean();            
  wp_send_json_success( $content );
add_action( 'wp_ajax_get-shortcode', 'wp_ajax_get_shortcode' );
  1. The function that add the shortcode:
function ve_test_func( $attr, $content = '' ) { 
   return $content;
add_shortcode('test', 've_test_func' );
  1. Now in the editor, type the following content in Text Mode:

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

This ticket was mentioned in Slack in #core-editor by ocean90. View the logs.

7 years ago

This ticket was mentioned in Slack in #core by ocean90. View the logs.

7 years ago

This ticket was mentioned in Slack in #core by ocean90. View the logs.

7 years ago

#10 @azaozz
4 years ago

  • Resolution set to maybelater
  • Status changed from new to closed

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.

Note: See TracTickets for help on using tickets.