Prevent 'src' in script tag from being clicked in source code

Question

Simple question, and I'm sure it's being asked a number of times already!

How can I prevent a link to my JS file being clicked on in my source code?

I'm creating an Angular JS SPA website and have resolve in action already, so it's virtually impossible to access links by appending the url as it will always bounce back to the home page, which is what I want.

However, I need to hide my src code and have numerous ways of doing this already but simply want to prevent the link in the source code from being 'clickable'.

I have managed to do it like this for my CSS (Google method), which is similar to what I want:

<script type="text/javascript" defer="defer">
    var cb = function() {
        var l = document.createElement('link'); l.rel = 'stylesheet';
        l.href = 'stylesheets/style.css';
        var h = document.getElementsByTagName('head')[0];
        h.parentNode.insertBefore(l, h);
    };
    var raf = requestAnimationFrame || mozRequestAnimationFrame ||
    webkitRequestAnimationFrame || msRequestAnimationFrame;
    if (raf) raf(cb);
    else window.addEventListener('load', cb);
</script>

Answer 1

Short answer: you can't. HTML, CSS and JavaScript are called client-side code for a reason. You can NEVER hide the resulting code from the HTTP Request. You can certainly obfuscate it, but never hide it.

After some discussion in the comments below, I feel it's important to follow up by saying that while your question asks about preventing users from seeing your links and clicking on them in the source code, it really "feels" like your question is really "Can I prevent users from seeing my links in my source code?" I may be wrong, but from our discussions, that's what it seems like. And, if that is really your question, then it's a question about security and the clear answer on that is that there is never a way to secure your client-side code from prying eyes.

Many sites obfuscate their code (change variable and function names to seemingly meaningless names, encode URLs, etc), but in the end, if someone wants to inspect your code and tear it apart, they can.

Answer 2

You can't.

If the code is run in the browser, the user has complete access to it. In your CSS example, I could simply inspect the DOM and see the <link> element that it added and easily find the source. It's the same effort as looking at the source. Even if you some how hid it (you can try, but it won't work), I could inspect the actual HTTP requests my browser is making and read the script in the body of the request itself. You can't hide it.

So what can you do?

Obsfucate It

This usually involves running your script through a parser that makes hard for a human to read. This doesn't actually hide anything, it just makes it more difficult to figure out exactly what it does. The client still has full access to it. This is not security and anyone who really wants your code has it.

Put It On The Server

If you absolutely do not want the client to see your JavaScript, don't send it to the client. Implement the parts you want to hide on the server and have the client only request the information it absolutely needs (which the client will be able to see).

This won't apply to CSS as the browser needs the CSS to actually render the page, in which case the client can see all your CSS whether it's there on load of the page or added to the DOM later.

Answer 3

you can simply modify your CSS injector to add JS instead:

<script>
    var cb = function() {
        var l = document.createElement('script');
        l.src= 'script.js';
        var h = document.getElementsByTagName('head')[0];
        h.parentNode.insertBefore(l, h);
    };
    var raf = requestAnimationFrame || mozRequestAnimationFrame ||
    webkitRequestAnimationFrame || msRequestAnimationFrame;
    if (raf) raf(cb);
    else window.addEventListener('load', cb);
</script>

this will add 'script.js' to the document, and the url of the external script will not be clickable from "view-source".

It will NOT stop any dev from finding your scripts.

Answer 4

Unpopular opinion guy here, but you can use jQuery's getScript and it will eval() the code into your page (with no link). Granted, the link you're GETTING will be in the getScript call unless you do something like get the URL from an API endpoint. . .