Adding bookmarklet to wordpress post

2 comments

1. EDIT 2 After even more research, this is actually caused by the browser’s XSS detection as mentioned by the OP (as opposed to any WordPress-specific functionality). The problem only arises when you click the Preview button in WordPress, and only on that initial page load. Apparently WordPress sends along some of the HTML in the request headers, and that triggers the XSS functionality in the browser. If you load the preview, and then you refresh the page, the XSS issue goes away, and the javascript: link is displayed as it was saved. When viewing the actual site, after publishing the page, this XSS issue is never encountered present.

   EDIT After some deeper research (working with @gnarf), it turns out the actual issue comes down to the way that WordPress handles javascript: links in its preview functionality. It would seem that WordPress has some custom Javascript that runs and converts all javascript: links to javascript:void(0) links (stripping out any custom code), but only if you’re previewing the page. After publishing the page, the javascript: links are rendered out properly.

   ---

   Original Post (describes how to stop WordPress from stripping out javascript: links when saving a post as a non-admin user, which is what I assumed the original problem might have been)

   It looks like WordPress strips out the HTML in the content_save_pre filter. Specifically, it calls the wp_kses_bad_protocol method in wp-includeskses.php:

   /**
    * Sanitize string from bad protocols.
    *
    * This function removes all non-allowed protocols from the beginning of
    * $string. It ignores whitespace and the case of the letters, and it does
    * understand HTML entities. It does its work in a while loop, so it won't be
    * fooled by a string like "javascript:javascript:alert(57)".
    *
    * @since 1.0.0
    *
    * @param string $string Content to filter bad protocols from
    * @param array $allowed_protocols Allowed protocols to keep
    * @return string Filtered content
    */
   function wp_kses_bad_protocol($string, $allowed_protocols) {
       $string = wp_kses_no_null($string);
       $iterations = 0;
   
       do {
           $original_string = $string;
           $string = wp_kses_bad_protocol_once($string, $allowed_protocols);
       } while ( $original_string != $string && ++$iterations < 6 );
   
       if ( $original_string != $string )
           return '';
   
       return $string;
   }
   

   The $allowed_protocols parameter is retrieved via the wp_allowed_protocols() method, which applies the kses_allowed_protocols filter to the list of protocols.

   With this information, you should be able to tie into the kses_allowed_protocols filter to add javascript as a valid one (note that this, of course, would open up security issues):

   add_filter( 'kses_allowed_protocols', function ($protocols) {
      $protocols[] = 'javascript';
      return $protocols;
   });
   

   One way to enhance the security of this approach would be to add a check for specific users or specific roles (by default, it looks like this filter actually isn’t run on administrative accounts, so you can use javascript: links to your heart’s content as an admin) prior to allowing the javascript protocol.

   Log in to Reply

2. The initial problem is of course due to this:

   JavaScript cannot be added to post content without a special WordPress
   Plugin that removes the filters that prevent unwanted code within the
   post content area for the protection of the user.

   To avoid installing a plugin you can use the recommended method:

   The safe and recommended method of adding JavaScript to a WordPress
   generated page and WordPress Theme or Plugin is by using
   wp_enqueue_script(). This function includes the script if it hasn’t
   already been included, and safely handles dependencies.

   Here are all the details for wp_enqueue_script():
   http://codex.wordpress.org/Function_Reference/wp_enqueue_script

   You then need to create a custom JavaScript file which you include and register with the functions you need for your posts.

   You can in that file make a function which for example takes your bookmarklet link as an argument and do a document.write (or attaches a node to as child to a known element) to the current location.

   Then include the script and call the function in the post as:

   <script type="text/javascript" src="/scripts/myscript.js"></script>
   <script type="text/javascript">
   <!--
   bookmarklet(myLink);
   //--></script>
   

   you only need to link the script ones in the same post – if you use this script in every post it’s probably better to link it in the header (header.php template file, between the meta tags and the style sheet link).

   <script type="text/javascript" src="/scripts/myscript.js"></script>
   

   or alternatively if the above doesn’t work:

   <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/pathto/myscript.js"></script>
   

   Also note that if the src attribute is stripped away you need to go to Users and Personal Options in dashboard to turn off the rich editor.

   Source and more information on how to use JavaScript in WordPress globally and in posts:
   http://codex.wordpress.org/Using_Javascript#Javascript_in_Posts

   Log in to Reply