Preventing Javascript from showing source code - javascript

I've looked at I can't find a suitable solution.
When you right-click and view the HTML source, then click on the link to a JavaScript (.js) file, the file loads and displays the code.
I want to prevent this. It's been a while but I know you can check to see where it's being called and prevent it from opening if it's not called locally, i.e., on the domain where it lives, but I can't remember how.

This is not possible. If your code is not sent to the client, then the client won't have any code to run, and anything sent to the client can be read by the user. Even if you found a way for the browser to hide it, a technologically knowledgeable user can just use cURL to see the source.
So there is no way to hide code from the user, but you can very easily make it much harder to understand. The most common way of doing this is to obfuscate the code or make it so convoluted and ugly that it would take a while for someone to understand what it exactly does. This is not just minifying the code and making it look ugly, this is using a completely different way of doing the same thing. For example, take this input code:
a = 1;
b = 2;
console.log(`${a} + ${b} = ${a+b}`);
run it through this online obfucator and get this result:
function _0x1450(_0x197943,_0x16e058){var _0x551a06=_0x551a();return _0x1450=function(_0x14505a,_0x1c7cf5){_0x14505a=_0x14505a-0xca;var _0xf62bf8=_0x551a06[_0x14505a];return _0xf62bf8;},_0x1450(_0x197943,_0x16e058);}function _0x551a(){var _0x34958f=['373970NKtNQT','8pCfaUJ','\x20+\x20','4413552ZtbXUP','339267FzcTIn','542560KzWApk','21632xuvhlJ','10518057bZIWFW','1694pVgAOK','\x20=\x20','1622674nEQaGr'];_0x551a=function(){return _0x34958f;};return _0x551a();}var _0x328ff8=_0x1450;(function(_0xb3255b,_0x38cc1a){var _0x317b39=_0x1450,_0x1f62b4=_0xb3255b();while(!![]){try{var _0xaf9fd=parseInt(_0x317b39(0xd4))/0x1+-parseInt(_0x317b39(0xce))/0x2+-parseInt(_0x317b39(0xd3))/0x3+parseInt(_0x317b39(0xd0))/0x4*(-parseInt(_0x317b39(0xcf))/0x5)+-parseInt(_0x317b39(0xd2))/0x6+parseInt(_0x317b39(0xcc))/0x7*(parseInt(_0x317b39(0xca))/0x8)+parseInt(_0x317b39(0xcb))/0x9;if(_0xaf9fd===_0x38cc1a)break;else _0x1f62b4['push'](_0x1f62b4['shift']());}catch(_0x5453e4){_0x1f62b4['push'](_0x1f62b4['shift']());}}}(_0x551a,0x87bdb),a=0x1,b=0x2,console['log'](a+_0x328ff8(0xd1)+b+_0x328ff8(0xcd)+(a+b)));
Does that code make sense to you? Me neither. Does it run? Yes.
It should be noted that code can and has been de-obfuscated, however, it is a laborious task.

Related

VS Code - unified checking of javascript, html, and CSS code as a whole - prior to running on a browser?

Forgive me if this is a really stupid question, but I haven't found any answers yet - or maybe I don't know the correct thing to ask for.
Given the following files that are part of the same project:
MyProject.html
MyProject.css
MyProject.js
(and a MyProject.py that runs on the server to make things happen)
. . . where all three of these items are related and are actually part of a single project and they need to integrate together.
The "html" part of VS code makes sure the html is correct.
The "css" part of VS code makes sure the css is correct.
the JavaScript part of VS code makes sure the javascript is correct.
However, they may not be correct together as a unified whole - I may have changed something in the javascript that references something in the html that may not yet exist - because I forgot to write it, and I don't discover this until I launch things and watch the web-page go all pear-shaped in ways I've never heard of before.
Is there something that will take all these pieces and say "Hey! You changed the definition of this element here in the Javascript but not in the HTML (or the CSS or whatever)
In other words, not only do I want to know if the individual files are syntactically correct, but do they agree with each other?
If there is a "something" that does this, what is it called?
That tool will never exist and for good reasons, it'd slow the living hell out of your computer when programming and wouldn't fair well as a best practice. Though it's cool, it's cooler to write code effectively and not have a slow code editor. So to that suggestion is write your JavaScript and HTML together hand in hand; split view and you won't ever have an issue. CSS can come into play any time.
Your best option for knowing if code is correct, would be a linter but that won't help you with the issues you face if you're calling elements that don't exist or did you'll want to improve how you code these functions/events.
As requested submitted as an answer for the OP.

Duplicate an HTML file (and its content) with a different name in Javascript

I have an HTML file with some Javascript and css applied on.
I would like to duplicate that file, make like file1.html, file2.html, file3.html,...
All of that using Javascript, Jquery or something like that !
The idea is to create a different page (from that kind of template) that will be printed afterwards with different data in it (from a XML file).
I hope it is possible !
Feel free to ask more precision if you want !
Thank you all by advance
Note: I do not want to copy the content only but the entire file.
Edit: I Know I should use server-side language, I just don't have the option ):
There are a couple ways you could go about implementing something similar to what you are describing. Which implementation you should use would depend on exactly what your goals are.
First of all, I would recommend some sort of template system such as VueJS, AngularJS or React. However, given that you say you don't have the option of using a server side language, I suspect you won't have the option to implement one of these systems.
My next suggestion, would be to build your own 'templating system'. A simple implementation that may suit your needs could be something mirroring the following:
In your primary file (root file) which you want to route or copy the other files through to, you could use JS to include the correct HTML files. For example, you could have JS conditionally load a file depending on certain circumstances by putting something like the following after a conditional statement:
Note that while doing this could optimize your server's data usage (as it would only serve required files and not everything all the time), it would also probably increase loading times. Your site would need to wait for the additional HTTP request to come through and for whatever requested content to load & render on the client. While this sounds very slow it has the potential of not being that bad if you don't have too many discrete requests, and none of your code is unusually large or computationally expensive.
If using vanilla JS, the following snippet will illustrate the above:
In a script that comes loaded with your routing file:
function read(text) {
var xhr=new XMLHttpRequest;
xhr.open('GET',text);
xhr.onload=show;
xhr.send();
}
function show() {
var text = this.response;
document.body.innerHTML = text;//you can replace document.body with whatever element you want to wrap your imported HTML
}
read(path/to/file/on/server);
Note a couple of things about the above code. If you are testing on your computer (ie opening your html file on a browser, with a path like file://__) without a local server, you will get some sort of cross origin request error when trying to make an XML request. To bypass this error, either test your code on an actual server (not ideal constantly pushing code, I know) or, preferably, set up a local testing server. If this is something you would want to explore, its not that difficult to do, let me know and I'd be happy to walk you through the process.
Alternately, you could implement the above loading system with jQuery and the .load() function. http://api.jquery.com/load/
If none of the above solutions work for you, let me know more specifically what it is that you need, and I'll be happy to give a more useful/ relevant answer!

how to get a javascript code through the console

Sometimes while I explore a website I came across a javascript function that can serve my future needs so I use the firebug console or google chrome and by inspecting the element on which the function is invoked i get an incomprehensible code
so whats the trick please to get the function attached to this link on the picture?
below there is an example in image that shows what i mean
It looks like the code was minimized by some tool. This creates a more compact form of Javascript so a library, for example, becomes smaller in size which reduces download times and makes the library harder to read. The code is still Javascript but is indeed harder to read.
So to clarify: you are looking at the correct function which handles the click but it has most likely been made harder to read by a tool.
When I look at the sample image you included it looks like the third line
t && !t.disabled && t.click(), e.preventDefault();
Could have looked like this before it was minimized:
if(t && !t.disabled)
{
t.click();
e.preventDefault();
}
I doubt there is a full fledged tool which could completely un-minify this code. Especially because variable names are almost always minified. For example a variable name "persons" could be shortened to just "p". A un-minify tool can not know this, of course.
Also take a look at this question: Tool to Unminify / Decompress JavaScript

Degrees of JS vulnerability

Never trust the client. It's my coding mantra. All javascript can, with enough effort, be overwritten or compromised. The thing I want to understand is how.
Let's say I wrote a function checkStep() for a game - each time the player moves one space, it polls the server to check for any events: HP regeneration, enter random battle, move to next map, etc. I asked myself "self, how would I go about rewriting or disabling this function?" Research turned up some conflicting results. Some sources say functions can be directly redefined from the console, others say it would be a much more involved process.
My question is this: what would a player have to do to rewrite or disable my checkStep() function? Can they simply redefine it from the console? Would they have to rip, modify, and re-host my code? How would you do it?
Please note, I'm not asking how to make this function secure.
The first person to leave an answer/comment along the lines of "you
can try minifying it, but it still wont be secure" or "put in some
server-side checks" is getting bludgeoned with a semicolon, as an
example to the rest.
You could use a web debugging proxy like Fiddler to do this for your local machine. Programs like this allow you to intercept content you download and fiddle with it. So you could write a new version of the function, then use the program to replace it with your version when the file is downloaded from the server. Then, for your local machine, the code would run with the new function in place. The web session manipulation page on the Fiddler site has a few more details.
There is no reason to use any Javascript or browser a even.
If a normal user can use their browser to play the game then any user can use any program to communicate with the server and send it anything they want. The server is not able to know if someone is using a browser to connect to it or not.
This applies to anything. A game server doesn't know if the user is connecting to it through the official game client. Since the official game is closed source it would be easy to fall into trusting it even though it is possible to reverse engineer the protocols used and use anything to connect to the server.
Complex things like creating a malicious game client, or using a proxy to alter content before it makes it to the browser are technically valid points, however that seems like a lot of effort for something which is very simple to do.
var checkStep = function() {
... // your original function
}
// later on
checkStep = function() {
alert('foo');
}
It is perfectly valid in JavaScript to change what function a variable holds. Any function you define can be redefined on the client side. This can be done by other script files loaded by the browser which use conflicting variable names, scripts injected via XSS, or by the user bringing up the console.

Download a file from a site (partly written in Javascript) using Python

I'm trying to use Python to download a voice file (mp3) from this site:
I've tried to use mechanize and twill but I haven't got the proper result. I've heard about selenium as well. Anyway, I don't even know if it makes sense technically (mechanize + Javascript).
I was looking for an answer and finally I've found this solution.
It seems like a similar problem to mine but I have absoutely no idea what should I put instead of the 4th line.
If you have any proposition (maybe completely different to mine) I'll be glad to see it.
(Moving to answer to get more space)
Thanks for pointing me to selenium, I didn't know that and it looks cool; anyways: I had a quick look and the js seems to fire an ajax request, that yields no apparent result -- I guess the audio transfer is done some way in the background via flash or so; anyways: what about using the service they offer: developer.ivona.com instead of trying hacking your webservice out of the demo interface..?
Anyways, here it is the hacked web-service you asked for:
This is the URL you want to GET:
"http://www.ivona.com/voicetest.php?rtr=1&t2r=%(the_text)s..&v2r=dXNfc2FsbGk.&lang=us" % dict(
the_text=base64.b64encode("Hello, world!"),
the_voice=base64.b64encode("us_salli"),
)
You can test that with, for example, mplayer:
mplayer "http://www.ivona.com/voicetest.php?rtr=1&t2r=SGVsbG8sIHdvcmxkIQ==..&v2r=dXNfc2FsbGk.&lang=us"
And, from Python, use urllib to retrieve and store somewhere.
Beware that, since this is an unauthorized use, you might get blocked / incur in legal issues / etc. -- don't use in a production application!

Categories

Resources