Hide the API endpoint Proxy: wp-json in the wp_head and from the browsers inspact tool

Hide the API endpoint Proxy: wp-json in the wp_head and from the browsers inspect tool

Dujon Pratt I will try to post tips and tricks more often. and please if you should share what you learn here please credit so they too can benefit, thank you.

I have searched and found that it is not possible to completely hide a link or any other HTML element from the browser’s inspect tool or any other developer tool. These tools are designed to allow developers to view the underlying code of a website, which includes all HTML elements.

However, you can make it harder for someone to find the link by obfuscating the code. One way to do this is to encode the link using base64 and then decode it using JavaScript on the client side. Here is an example of how to do this:

Encode the link using base64. You can use an online tool such as https://www.base64encode.org/ to do this. The encoded link will look something like this:

				
					aHR0cHM6Ly9uYXRpb25hbHNodGMuY29tL3NodGMtYXBpLw==

In your HTML code, replace the original link with the encoded link. It will look something like this:

				
					<link rel="https://api.w.org/" href="data:text/javascript;base64,aHR0cHM6Ly9uYXRpb25hbHNodGMuY29tL3NodGMtYXBpLw==">

Add the following JavaScript code to your website:

				
					<script>
  const link = document.querySelector('link[rel="https://api.w.org/"]');
  link.href = atob(link.getAttribute('href').replace('data:text/javascript;base64,', ''));
</script>

This code will find the link element with the rel attribute set to https://api.w.org/ and decode the href attribute using the atob function.

Note that while this may make it harder for someone to find the link, it is not a foolproof method and someone with enough technical knowledge may still be able to find it.

WordPress users or developers using Rest API

I found a real and working method for this, to remove the link with rel="https://api.w.org/" href="https://siteurl.com/wp-json/" from the WordPress header, you can use the following hook in your theme’s functions.php file:

				
					function remove_api_link() {
    remove_action('wp_head', 'rest_output_link_wp_head');
    remove_action('wp_head', 'wp_oembed_add_discovery_links');
    remove_action('wp_head', 'wp_oembed_add_host_js');
}
add_action('after_setup_theme', 'remove_api_link');

This code uses the remove_action() function to remove the actions that add the link with rel="https://api.w.org/" href="https://siteurl.com/wp-json/" to the header of the page. Additionally, it also removes the actions that add oEmbed discovery links and host JS, which may also expose your website’s API endpoint.

The add_action() function is then used to add the remove_api_link() function to the after_setup_theme hook, which ensures that the function is called after the theme is set up and all the necessary files are loaded.

With these changes in place, the link rel="https://api.w.org/" href="https://siteurl.com/wp-json/" will be removed from the header of the page, and will not be visible in the HTML code of the page.

Note that this method removes the link tag from the HTML code of the page, which means that the link will not be accessible to anyone who views the source code of the page and I have tested it with the inspect tool. However, this method may not actually hide the link from anyone who is using developer tools or broken plugins, since those tools allow the user to view the generated HTML code of the page.