I found a way to hide javascript source using jQuery by using this script.
<script type='text/javascript'>
$(function(){$("script").remove()});
</script>
I tested creating variables, changing is value programmatically, calling functions, and ajax and so far it runs smoothly according to what it is intended to do.
I asked this question to prevent future damage to the web site I am currently developing.
Anyone who found out and using this method?
I found a way to hide javascript source
No, this does not hide javascript source code. It simply removes all <script> elements from the DOM.
Is it safe?
For normal javascript scripts, that have already been executed, yes. You could damage other functionality that uses script elements, like some templating engines, though.
I want to prevent future damage to the web site I am currently developing.
Don't damage it now! Omit this script.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 years ago.
Improve this question
I am learning JavaScript, but the tutorial are kind of different depending on the resources. It looks like the JavaScipts are different, there is like 2 types of it.
So, let's say if we take one source, they have a code like this:
<html>
<body>
<p>Before the script...</p>
<script>
alert( 'Hello, world!' );
</script>
<p>...After the script.</p>
</body>
</html>
But when I do tutorial, on Codecademy , for example, they do not have any html code, no body, p, script... the code does not go into html. Functions like alert, onclick are very popular and, in fact, the w3schools begins with these functions, where on Codecademy there are no such things. And this code line
document.getElementById('demo').innerHTML = Date();
it says it is important in javascript, but codecademy does not mention it at all! Like what are those document dot getElementById('demo').What is it doing? Why it is everywhere on w3schools, but not on Codecademy, if it is so important? I finished whole JavaScript course on Codecademy, but I am still confused how come it is so different?
I learned Python before and it is similar to proper JavaScript (I call proper JavaScript the one, that is on Codecademy, because the structure is just like Python)
So the weird JavaScript (the one that is on w3schools, etc. and not on Codecademy) often has dollar sign, lines like this
function $(x) {
return document.getElementById(x);
}
The proper JavaScript use dollar signs only with string interpolations and that's it and the whole Codecademy tutorial does not have this all weird code that I provided above, which seems really important on other web sources.
All the YouTube tutorials I found are also using proper JavaScript, just declaring variables, writing functions, like, normal programming language, like Python, but what's with all the HTML tags, alerts, onclicks, dollar signs, etc., that are in tutorials like w3schools? Can please someone explain me?
Yes, I'm embarrassed a lot. To think of that I know Python and JavaScript on higher than beginner level, but I cannot figure out what's with the different code and what is happening...
P.S. Thank you everyone for answers. I probably wasn't clear, but I didn't wanted you to explain what actually those code lines, that I posted, meant (like most of you did), but mainly I wanted to know how come it's so different, why is that difference, why two different types of JavaScript? Hence, I accepted the appropriate answer.
document.getElementById is part of the DOM API, it's not part of JavaScript. If you want to interact with webpages you need html that is parsed and "converted" into DOM tree like structure. For example document don't exist in Node.js (server side JavaScript) but there is library that allow to use if you want to test your front-end code.
<script> tag is a way to add JavaScript files to html page. But you don't need html page to use JavaScript (you can use Node.js that I've mentioned).
and about this:
function $(x) {return document.getElementById(x);}
$ is normal variable and function name, it's legacy for Prototype and jQuery libraries that used this for their API main entry point and it's very short and clean.
The one on Codecademy mostly deals with server-sided Javascript, read up on NodeJS if you want to know more about it.
The other one with document.getElementById() and such is client-side Javascript and it gets executed by you or anyone who visits the webpage (so the client) inside of the browser.
NodeJS on the other hand doesn't run in a browser and doesn't have a global document or window because of that. You can use it to make a webserver (check out Express) or use it for other stuff in the same way you would use other languages like for example Python.
Both of them are still the same Javascript but they run in a different context.
The dollar sign is pretty typical jQuery syntax, it's just a framework for Javascript where they decided to use $ as variable name (which is allowed) so you could easily see it's a function from jQuery. There's nothing preventing you from using $ yourself in variable names, not in NodeJS and not in the browser.
There are arguably more than 2 even!
Javascript was developed to work inside the browser, in the context of the DOM, but it is also a programming language independent of any browser, of any HTML, of any DOM.
In HTML, <script> tags are for javascript, but you can also link to javascript files.
the <script> tag is just a html element which declares the content of this block to be javascript.
the content will be executed by the browser inside of the scope of the DOM.
in a javascript application you do not code javascript directly into the DOM, instead the JS files will be included/injected into the page.
When you see getElement usually its trying to find an element from DOM tree, in your case it's trying to find and element with the id demo.
Would find something like this
<div class="container">
<p id="demo"> </p>
</div>
For the code document.getElementById('demo').innerHTML = new Date() this would get the date and set it to your HTML #demo node.
As for function $(x) {return document.getElementById(x);} this function is trying to copy jQuery funtion of selecting DOM. Its does the same thing as the above code but you type alot less once its declared.
function $(x) {
return document.getElementById(x);
}
$('demo') // finds all nodes that have #demo in your DOM tree
In your HTML snippet using <script> before and after a tag means that you have or not to wait for the document to load. DOM tree loads from one node to the next and when you load a JS file or script, it gets instant loaded and fired, unless its told no to using events and conditions.
<html>
<body>
<p>Before the script...</p>
<!-- This element exists in your DOM tree already so you
don't really need the document to load. -->
<script>
alert( 'Hello, world!' );
</script>
<p>...After the script.</p>
<!-- This element is added after the script so if you run
the code above trying to find this "p" tag you would need
to add a proper window.onload event -->
</body>
</html>
This question already has answers here:
How to hide html source & disable right click and text copy?
(21 answers)
Closed 9 years ago.
I wonder how to hide the source code of a web page. This is an example of webpage with hidden source (right click -> view page source). Any ideas or suggestions?
UPDATE I fully agree, that fully hiding HTML source is impossible, otherwise the browser could't parse it. Using tools like FireBub etc. will show you the source. The interesting in the example above in that on "show source code" the displayed page does not match the output.
Now I understand it is just another kind of technology used here - XSLT.
Thanks for your replies!
If your page is generated dynamically (by Javascript), then it using View Source will not show anything (or very little, anyway). I suspect that's how your example is doing it.
Bear in mind that any page generated this way will still be visible by using a code inspector such as Firebug. So as #Brad M says, this will only stop people who don't really know what they're doing.
If you build the entire page in Java or Flash (or something similar like Silverlight I guess) then it's a lot harder for someone to find out what the source code is (though Java is pretty easy to decompile)
There is no way to hide your code from a client that must execute the code.
Your example just did some trick to prevent right-clicking and stuff. But eventually you can get your way around.
For interpreted language such as javascript, the following adage is true.
" Lock on the door is only for the one who don't care. If there comes thief, most of the time he is already prepared."
All you can do to prevent is obfuscating your code. That will prevent it for some time. But remember, if they are going to crack it, it is not unstoppable. The basic thing to remember is: your script is going to run on the client side and is "INTERPRETED" by browser. In these days, when there are few tools that can create source code from compiled file, the thought of hiding javascript code is even not thinkable. This How can I obfuscate (protect) JavaScript? can help you on how to do it.
I'm learning jQuery and am about to write some pages using intensively that library. I just learned that some user disable JavaScript on their browser (I didn't even know that was possible and/or necessary).
Now, here's my question: What happens to my web application if a user disable JavaScript? For instance, I'd like to display some screens using AJAX and commands such as 'InsertBefore' to bring in live a DIV that will display the result.
So, if JavaScript is disabled, I wonder what going to happen to all this work that relies on JavaScript?
I'm kind of lost.
Thanks for helping
You may want to start by reading on Progressive Enhancement and Unobtrusive JavaScript.
I would also suggest to investigate how popular rich web applications like GMail, Google Maps and others, handle these situations.
I just learned that some user disable javascript on their browser
I do. The "NoScript" plugin for FireFox does the trick.
So, if Javascript is disabled, I wonder what going to happen to all this work that relies on Javascript?
It won't be functional.
A good practice suggests designing a site not to rely on JavaScript for major functionality. At least, accessing its content (in read-mode) should be possible. JavaScipt should only add interface enhancements like Ajax techniques etc. But the fallback version should always work.
I feel really sad when I see a site which is completely broken without JavaScript. Why can't people use CSS to put elements in proper places? Why do they try to align elements with JavaScript even if there is no dynamics involved?
The same goes for Flash sites. Once in a while a land upon a "web-design-agency" site which makes picky comments about me not allowing JavaScript. When I do I only see a basic primitive site with a few menus and that's it. What was the point of using Flash when the work is so primitive it can be done with raw HTML and CSS in an hour? For me it's a sign of unprofessional work.
All what's done in JavaScript won't work. Some users disable it for security reasons, NoScript is an excellent example. You can try it yourself by removing the scripts from your page or installing the NoScript-plugin for Firefox.
As a rule of thumb:
Make the website working with only semantic HTML
add the CSS
add the JS
But the website should be (almost) fully functional in stage 1.
If you disable Javascript in Safari things like Lexulous in Facebook won't work properly, the mouse letter carry function doesn't work.
How can I detect whether JavaScript is disabled using the prototype library? I don't want to use the <noscript> tag; I want to use something that prototype offers.
It would be pretty hard to use javascript to detect if javascript is disabled.
To answer your subquestion, if you want to emulate <noscript> tag behavior without using noscript, make a <div> element with the content you want to show to non-javascript users, and then hide it with javascript on DOMReady event. It will do exactly the same thing as a noscript tag.
<script type="Text/JavaScript">
document.observe("dom:loaded", function() {
$('simulate_noscript').hide();
});
</script>
<div id="simulate_noscript">
This is some content only users with JS disabled will see.
</div>
Since Prototype is JavaScript, you cannot use it to detect whether Javascript is disabled or not. You have to use the <noscript> tag.
You can't detect that javascript is disabled using javascript. Google graceful degradation, and also progressive enhancement.
You can't use JavaScript to determine if JavaScript is enabled; if it's not, then the script will never run. Instead, look to inject behaviours which require script using scripts themselves. This is a core principle of progressive enhancement.
Ummm if Javascript is disabled Prototype is never going to run my friend.
Prototype is a JavaScript framework. If JavaScript is disabled, Prototype will not run, making a JavaScript enabled check useless.
You will need to use a <noscript> tag to handle situations where JavaScript is disabled.
Just thought I'd add to the myriad of comments already that question how you are to use javascript with javascript disabled. Make sure it degrades well of course.
I'm trying to use something like jQuery biggerlink or just simple window.location for making bigger and more accessible links. What I'm wondering is what happens with SEO in these cases — I have anchor link in the containing element, but does Google penalize such actions since I'm not really clicking on link. Also, are there any other solutions (besides CSS positioning) which could be better than this one? Thanks.
Setting window.location from script will not be spotted by search engines (Google has detection for simple document.write additions but this won't catch any of the more advanced DOM scripting stuff). It's also bad for usability: all the usual browser controls you get for links, like middle-click-for-new-tab, right-click-copy-location or bookmark stop working.
biggerlink avoids the SEO issue by keeping the correct <a href> markup in the HTML, and adding extra click handling over the top of that. (The ‘bigger’ parts of the biggerlinks still don't respond to eg. middle-click, but the ‘native’ parts do.) As long as you keep <a href> in an appropriate place you don't have to worry about search engines.
I'm not at all sure this stuff is necessary. The effects I've seen biggerlink do could easily be done using links with ‘display: block;’ and occasional workarounds like multiple links when you want to do things like headings inside the links. Sure it's a little more markup, but it's a lot less scripting and then all links respond in the expected way links usually do.
This doesn’t have similarly completion and code syntax to the Meta Refresh tag, although they perform alike wherever the Meta tag refresh and the JavaScript redirect occurs on the customer surface, sense at the web browser point.
<script type="text/javascript"> window.location = "http://www.example.com/path/file.html" </script>
This can be located wherever inside the HTML basis code and is most likely used more than Meta tag Refresh for encoding purpose delays seeing as in JavaScript you can make use of a lot additional other scripting include the window.location function. While this isn’t best for SEO as search engines usually ignore JavaScript code. In the recent years, Google reads javascript and talk about it’s headlell browser technology including GoogleBot crawling.
Search engines generally don’t interpret JavaScript, they just read what your HTML markup says. So your SEO attempts will be overlooked.