I was wondering whether it was possible to make a link with <a> tags that doesn't display its URL?

Put into other words, I would like a piece of HTML that either hides or obfuscates the URL that it links to.

I have found this StackOverflow question, but I'd prefer that the link would work in all browsers (not just chrome) and was not a popup. I already have access to jQuery, Bootstrap and PHP 5.5.

Any help would be appreciated.

UPDATE: I feel this needs clarification. I do not want it to be visible in ANY way - i.e. this is a link that must NOT be shared, so I cannot simply use redirects and just hide the URL when it is hovered over - I do not want it visible in the source code either. Sorry for any inconvenience :(

Thanks,

ICT

I was wondering whether it was possible to make a link with <a> tags that doesn't display its URL?

Put into other words, I would like a piece of HTML that either hides or obfuscates the URL that it links to.

I have found this StackOverflow question, but I'd prefer that the link would work in all browsers (not just chrome) and was not a popup. I already have access to jQuery, Bootstrap and PHP 5.5.

Any help would be appreciated.

UPDATE: I feel this needs clarification. I do not want it to be visible in ANY way - i.e. this is a link that must NOT be shared, so I cannot simply use redirects and just hide the URL when it is hovered over - I do not want it visible in the source code either. Sorry for any inconvenience :(

Thanks,

ICT

• javascript
• jquery
• html
• twitter-bootstrap
• hyperlink

• So are you referring to removing the address bar or simply masking the current URL (accessed by the link) in the address bar? – Callan Heard Commented Sep 6, 2015 at 15:15
• @CallanHeard Well, I don't particularly want it to be visible in any way including looking at the source code. If it helps, I also have access to PHP 5.5 and PHP 5.4. – ICTman1076 Commented Sep 6, 2015 at 15:18
• You can't hide an URL pletly, it has to be somewhere. – Starmetal Commented Sep 6, 2015 at 15:21
• @ICTman1076 Does my answer work for you? – Praveen Kumar Purushothaman Commented Sep 6, 2015 at 15:22
• @kappaismyname is right, the URL to the content must be accessed and present - but you can manipulate server access to mask the URI in the address bar – Callan Heard Commented Sep 6, 2015 at 15:24

3 Answers 3

You can capture the link in a closure to hide it, then point the window there when the <a> is clicked, for example

function hideLink(anchor) {
    var href = anchor.getAttribute('href');
    anchor.removeAttribute('href');
    anchor.className += ' pseudolink';
  
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        window.location.href = href;
  });
}

window.addEventListener('load', function () {
    hideLink(
        document.getElementById('my_link')
    );
});

.pseudolink {
    color: blue;
    cursor: pointer;
    text-decoration: underline;
}

<a id="my_link" href="http://google.">Hover over me</a>

It is not possible to pletely hide the URL you are attempting to navigate to. The URL must be present in some form - such as the 'href' attribute of the <a> - tag to tell the browser where to navigate to.

However, it is possible to mask the URL with access to your server settings. Using a .htaccess file it is possible to redirect from one entered URL to another, whilst maintaining the entered URL within the address bar of the browser. There are many sources online that explain how to do this.

Simply handling each link using some logic within a PHP file may be suitable to hide the link in the source. For example, you could send every link to handler.php and specify a value for which page to navigate to, ie handler.php?page=1.

handler.php would then contain something along the lines of:

<?php
if ($_GET['page'] == 1) header('Location: /where/you/want/to/go');
if ($_GET['page'] == 2) header('Location: /where/else/you/want/to/go');
?>

This way, the user will not know where the link actually goes and (using the .htaccess settings) unaware of the URL they have navigated to.

<a data-link="some link here"></a>

$('a').on('click', () => {
    window.location.href = $(this).attr('data-link');
});

User won't see the link while hovering it.