Hide Search Engine ID for Google Custom Search Element API 2.0

Question

I am implementing Google Custom Search Element API 2.0 in an ASP.NET MVC project. In the documentation they require that the following javascript is included in the view, with the <gcse:search> element following.

<script>
  (function() {
    var cx = 'xxxxxxxx:yyyyyyyy';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>

However, the search engine id is visible on the line:

var cx = 'xxxxxxxx:yyyyyyyy';

In a browser, selecting View Source (or similar) allows the user to view the script and the search engine id.

How do I ensure that no-one can see my id?

Answer 1

I have found a way around this. By moving the Google script to its own function that takes the Search Engine Id as a parameter:

function buildSearchElement(cx)
{
    var gcse = document.createElement("script");
    gcse.type = "text/javascript";
    gcse.async = true;
    gcse.src = (document.location.protocol === "https:" ? "https:" : "http:") +
        "//www.google.com/cse/cse.js?cx=" + cx;
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(gcse, s);
};

I then call a method on my controller that returns the Search Engine Id upon page load. When this completes, the callback is the buildSearchElement function:

(function ()
{
    var httpRequest = new XMLHttpRequest();

    httpRequest.onreadystatechange = function()
    {
        if (httpRequest.readyState === 4 && httpRequest.status === 200)
        {
            buildSearchElement(httpRequest.responseText);
        }
    }

    httpRequest.open("GET", "/GetSearchElementId");
    httpRequest.send();
})();