Adding Bookmarklet to WordPress post

494

Bookmarklets

icon-bookmarkletWeb browser bookmarklets allow you to perform actions on the current page with just a click or tap. They’re a lightweight alternative to browser extensions. They even work on mobile browsers that don’t support traditional extensions.

To use bookmarklets, all you need is a web browser that supports bookmarks — that’s it!

A bookmarklet is a bookmark stored in a web browser that contains JavaScript commands that add new features to the browser. Bookmarklets are unobtrusive JavaScripts stored as the URL of a bookmark in a web browseror as a hyperlink on a web page. Bookmarklets are usually JavaScript programs. Regardless of whether bookmarklet utilities are stored as bookmarks or hyperlinks, they add one-click functions to a browser or web page. When clicked, a bookmarklet performs one of a wide variety of operations, such as running a search query or extracting data from a table.bookmarklets

Bookmarklets in WordPress post

You want to add a javascript bookmarklet link to a post on your WordPress site. However it isn’t coming out in the post preview. When I check the link that WordPress adds to the post it has converted it to javascript:void(0). This simple example reproduces the problem.

<a href="javascript:alert('Alert!');">Search Scholar</a>

The cause of this problem is that Chrome’s XSS protection is stripping out the javascript from the link when submitting it via wp-admin. One “solution” is to add the line header("X-XSS-Protection: 0"); to wp-blog-header.php in the root folder. This is insecure as it switches off the XSS protection on your WordPress site but it does allow the bookmarklet code to be rendered when the page loads.

Solution:

Add the hyperlink in Text mode and avoid using Visual Mode.

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.

 

Facebook Comments