Counterexample -- hiding javascript source files - javascript

Trying to view the source code for github.your_company.com/stafftools/reports/dormant_users.js.
When I go to the link, it simply downloads a .csv file immediately, with no activity in the Chrome DevTools Network tab. I have tried disabling javascript, cURLing and so forth but nothing works.
Really surprised since from every SO post I've come across, they say it is impossible to hide the source code for .js files.
How do I protect javascript files?
Just thinking that this would be a really informative counter-example

Related

Accessing local files for a client-side only website, to be distributed as a HTML-download the user opens with a browser

Due to the safety rules of the same-origin policy (SOP), i am unable to load certain local files when opening an index HTML-file directly with a browser. Using a "live-server"-plugin works fine, as all the files in that case are "on the same server". I need to distribute the website as a client-side only app - A folder and html file to be opened with your browser. Solutions to the problem always seem to require setting up a server. Is there any way to avoid that, and keep everything on the client?
I am making a mathematics e-book, that i want to distribute as a website people can download. I want it to be client-only and a download, since if it were to become popular, then i wouldn't be able to afford running the server (as i would be studying at that time). I have chosen html and javascript over EPUB, as they are much more powerful, and allow for tons of interactivity (and much more efficient development).
So far i have a browser.html file, that loads individual pages with JQuery .load(). This browser.html file has both html, and javascript. The CSS is in an external file. The individual pages have many pictures, that are also stored locally on the server. As the pages are contained in subfolders, the picture URL's go out into their parent folder, and into the assets folder, like: ../../../Assets/Chapter1/Talopgaver og intuition/Misc\F\solsystem.png. I use custom-elements (shadow-DOM) to handle various complex aspects such as questions, answers, along with certain other things too. Other than JQuery, i also make use of Math-Jax, and a "polymer" library that helps with cross-browser support of custom-elements. All the pages in a certain chapter are loaded in the start, and then put into a array (this makes it fast to scroll through pages as you often do in books). They (as strings) are each modified slightly to automate certain tedious parts of development.
I have tried to open the browser.html file on chrome, firefox, internet-explorer, and edge. They all load the html that browser.html inherently contains (properly styled even), but none of them load any external pages. Interestingly, one of the images used in the browser.html file still works (i would think that would be a local file too, not?). If have tried turning off calls to ajax or external CSS, but nothing changed. I have searched for other people with similair problems, but all the answers just reccomended setting up a server.
When loading the page with a live-server plugin, the result looks something like this:
browser.html page opened with "live-server" visual studio code plugin by Dey, Ritwick
When opening the browser.html page directly using chrome, it looks like this:
browser.html page opened directly with chrome
The error i get (after having removed an ajax .get() call) isn't particularily descriptive: simply "Failed to load resource: net::ERR_FILE_NOT_FOUND" from "platform.js:1". Even if turn off the call to start loading pages, it gives me excaclty the same error messages.
Looking at the network reports, with live server it looks very ordinary. without it's pretty weird. It says it takes hours to load browser.html, even though that clearly isn't the case. It fails loading platform.js, after using 22 seconds trying. The networks report looks a bit more healthy when turning off the call to load pages. It gives up loading platform.js faster (8 seconds), yet still supposedly takes hours to load browser.html.
Though it shouldn't ultimately be neccesary, i have linked the entire browser.html document below, along with an example of a page it might load (the example in the first picture above).
browser.html. Too big for a stackexchange code-block embed
Page in previous picture (page 37)
Any help is appreciated!
EDIT: Main problem seems to be the loading of pages using JQuery.load(). Even on a simple testing website that operation is just not possible without running on a server.

javascript external file hides source

i have seen answers to similar questions. but, not quite what i want to know. if i make an external javascript file. then, on the client side, when the client loads the HTML, all they see is a link to the external javascript file. like this:
<script src="myScript.js"></script>
they never see the source code.
i don't get all this talk about obfuscation & minification. best way is just make an external file. then, without hacking into the server to download the source, they will only get machine code.
They can still follow the link to get the file directly.
Just display the source of this (this question) page, you can see
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
but you can still simply open https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js to see the source.
Even obfuscation doesn't provide protection as the source is still accessible to the client and he can de-obfuscate it (although that can be hard, it is not impossible).
And minification is used to reduce file size, so the file loads faster (and thus the page load time is lower).
i get it now. but, someone answered that you can hide the source w/PHP server side produced web pages. i haven't understood this yet. but, i have seen this answer a few times. this would seem the way to hide your scripts.

Maintain JS debug code & reloading browser

I use Google Chrome Dev Tools to troubleshoot or debug JavaScript. I add break points and use watches, but a lot of the times it's convenient to just insert console.log(value) here and there in the script.
The problem is that when the page has to be refreshed in order to see the JS changes (and the console.log() calls), then the console.log() calls have been removed when the page reloads. Obviously this is because I didn't edit the actual source file itself.
Is it possible to maintain edits to JS files and still reload the page?
There are a lot of cases where I'm looking at other people's JS, learning and understanding it, so editing the source code is not even a possibility. Other times, when working on my own code, I might be debugging JS code on a live server, to editing my source to put in random console.log()'s is not desirable.
I know that Dev Tools has an auto save feature where the changes you make can save the actual source files (as long as the files are on a filesystem that is available to your computer). But that doesn't help in my case.
There is 'workspace' feature in DevTools.
It allows you to map the source files on your disk to the scripts of your page.
So when you apply your changes to the page's javascript they also will be saved to the disk.
If your web server serves these files from this folder then you will get the changed files after reload.

Download web page with one single click

I need to download hundreds of web pages manually. Unfortunately I can't automate the process since I don't know the urls of the web pages in advance. What I do now is open the page in browser, right click the mouse, select save as , choose a directory on my computer, and save the web page as html file.
It is just too much work since I need to repeat hundreds of times. It would be great if there's a floating button pops up when I open a page. When I click the button, the page will be saved to a default folder on my computer. I'll probably implement this function as a Chrome extension.
I guess this function can be easily realized with simple Javascript code. Unfortunately I have little experience with Javascript at all. It may take me quite a while whereas it's just a breeze for experienced web developers. Anyone help suggest the core lines of code I need to achieve this?
This task isn't best suited for Javascript since it doesn't have the ability to easily save files to your hard drive, in addition you will run into cross-domain issues likely. I would suggest an easy server side language like Go, PHP, or Python as you could set up a script to do this for you quite easily.

Confused: javascript.js code shows in Chrome?

My understanding was that only the javascript code placed inline in the HTML page would show, never the code stored in .js files
...and I had never seen in any browser code in a .js file show on the clientside...
until I started to use Chrome and noticed all my code is available for viewing???
Have I been convincing myself the code is safe in .js files, when in fact it never was?
and while on this subject can a responder be totally clear whether the code in .js files can be hidden or not.
I have read many posts that left me doubting whether it can be done or not.
. Some say to place it in a .js file on the server so it executes on the server...
--- using 'language=javascript' and an html line with 'runat server'? no idea how to do that.
--- But, would that not defeat the purpose of speed, and refresh since the server has to be accessed?
--- might as well code it in the code-behind???(C#, VB, php, ...)
. Some say use an AJAX call etc... but it seems others contradict that, saying the code lands on the clientside anyway thus will show? ...and I am assuming this would be a callback with no page redraw...
JavaScript is executed in the browser, this means the script has to be submitted to the client. So, of course anyone can view the code, wether it's happening in the developer tools, getting the direct link out of your html or, for example, using a http sniffer.
Altough, there are some methods to make the script unreadable for humans.
Minifying your script is a good practice in general. It decreases file-size, so the client has to download less, speeding up loading time. After all, this does not really help making your script "unreadable" for users, there are a lot of deminifying services all around the web.
Still, there is another way: obscurifying (or obfuscate) your script. This replaces the code to make it unreadable. Unfortunately, I don't really have experience with using this technique, so I don't know how it would affect the performance of the js-code.
Maybe you want to have a look at this: How can I obfuscate (protect) JavaScript?
Javascript code can be seen even if its in a .js file the only thing you can do to make it little tough to understand is minify the js file.
Actually, javascript code stored in a separated file wont be shown directly; the user must explicitly type the name of the file in the address bar to see its content.
The only way to hide it is, as said before, to minify the file, which compress the file and make it unreadable for humans.

Categories