For a customer's high school project, I have created a static but relatively complex website using HTML and Javascript only. Now, before customer pays me, he wants to have a look at the website. Therefore, he requested me to host it temporarily on AWS S3. But I am afraid that he will click on view source and download all the code, and might not pay me afterward.
Is there a way to hide my code in the above scenario, except using team viewer, where the customer accesses my personal computer.
This is not possible.
The best you can do is send some screenshots, but of course this isn't very interactive, nor a good way to evaluate a website.
Luckily, I found a way to achieve this. The following code can be used:
<head>
<script>function myFunction()
{
var g1 = new Date(); //Today
var g2 = new Date('2020-10-06'); //The date from which trial version should stop working
if (g1 > g2)
{
alert("Trial Period Expired");
}
else
{
//-------------Normal code goes here-------
}
}
</script>
</head>
<body onload="myFunction()">
</body>
Now, just encrypt the code using some free online tools so that the Date can't be altered by the user.
Related
I created an account a very long time ago but I never really use it, as I always manage to find the answers to my questions in already solved threads. So, this is the first time since I'm working on my current program that I was not able to find a working answer on SO. However, if I simply missed it, please be nice to me ^^
A bit of context that may explain why I can't manage to apply any given solution despite many threads exists about this... I am doing:
A HTA Interface
With an iframe to a local text file
And a link to a js file that I want to use to refresh the iframe every 500 ms.
The goal is to make a chat; people can write on the text file and it automatically appears on the HTA interface.
I don't know ANYTHING about JS, frankly. So I found here that piece of code to refresh the iframe.
window.setInterval(function() {
document.getElementById('chatbox').contentWindow.location.reload();
}, 500);
It works, but upon refreshing the iframe, it scrolls back to the top; which makes the chat unreadable, as you can guess. Many solutions that I've read on SO won't work for me, maybe because it doesn't fit with this way of refreshing iframes, or with HTA, or I'm just too dumb with js to know how to make them work.
If anyone has a solution that I could just copy and use, even if I don't understand what I'm doing - it won't be very satisfying intellectually but at least I could focus on finishing my interface :) thanks a lot!
If you refresh the iframe by updating innerHTML from the text file, instead of doing a reload, it won't change the scroll position. Here's an example HTA:
<!DOCTYPE html>
<meta http-equiv="x-ua-compatible" content="ie=9">
<html>
<head>
<script>
function Refresh() {
var Iframe = document.getElementById("chatbox").contentWindow;
window.setInterval(function() {
var fso = new ActiveXObject("Scripting.FileSystemObject");
var fh = fso.OpenTextFile(".\\Chat.txt",1);
var FileContents = fh.AtEndOfStream ? "" : fh.ReadAll();
fh.Close();
Iframe.document.body.innerHTML = "<pre>" + FileContents + "</pre>"
}, 500);
}
</script>
<style>
#chatbox {height:30em;}
</style>
</head>
<body onload="Refresh()">
<iframe id=chatbox title="Chat Box">
</iframe>
</body>
</html>
I have a web site containing millions of photos from thousands of events over the last 26 years, and the directory structure is \root\events\(year)\(eventdate) so that all the photos and files for any given event date are kept together. Each directory has its own index.shtml file which sorts out the organisation of the content.
I want to add a mobile version of the site. My current thinking is to add a mobile.shtml page to each directory, and switch based on a simple screen width test. All the pages throughout the site use a common header include, so I need to add code to a common header, but which will only switch if the current page is the index.shtml file. I´ve used the following, and it fails to switch.
This is what I´ve added to the include file
......
<body>
<script>
var url = location.href;
var filename = url.substring(url.lastIndexOf('/')+1);
var a = "index.shtml";
if((screen.width < 600) && (filename.equals(a))) {
location.href = 'mobile.shtml';
}
</script>
.........
I´m not a JS programmer and am trying to implement code seen hereabouts, so would appreciate learning why this fails! Thanks in advance to anyone that replies.
I have not used this for a while but I am pretty sure it still works. Place this in the Head of your HTML e.g. desktop website - index.html
<!-- Detect and redirect for mobile -->
<script type="text/javascript">
if(navigator.userAgent.match(/iP(od|hone)/i) || navigator.userAgent.match(/Android/i)){
if(document.cookie.indexOf("iphone_redirect=false")==-1) {
window.location.href="http://myWebsite.com/index_mobile.html";
}
}
</script>
Be sure to add your correct redirect here in this line from above:
window.location.href="http://myWebsite.com/index_mobile.html";
As a second solution to support your original intentions, I managed to get a variation of your JS code working live here DEMO. My DEMO will take you to GitHub if you view it from a screen with a width < or = to 600px. To test it properly you must view it from monitor sizes above and below 600px widths. Below is my variation of your JS code:
<body>
<script>
var url = window.location.href;
var filename = url.substring(url.lastIndexOf('/')+1);
var a = 'index.shtml';
if((screen.width <= 600) && (filename == a)) {
window.location.href = 'https://github.com/';
}
</script>
* NOTE the difference that my code will redirect you to GitHub as opposed to 'mobile.shtml'
What you are trying to accomplish should be done with responsive design techniques. In a perfect world, you could just use media queries
to adjust the css applied to format the content differently.
But I have also had the need sometimes to do server side detection of the client, because I would render an entirely different widget based on the form factor. You seem to be using .shtml, which is a poor choice IMHO. Your webserver at a min must support php, and that is a way more powerful server side choice for your app. PhpMobileDetect is a great script that will give you a way to detect if it is mobile, tablet, or desk. Problem now is that we have enormous phones, or phablets. But it might just be the right fit for your task.
I'm trying to make a new pin it button just like Pinterest has, I've see the content at that bookmark:
javascript:void(
(function(){
var e=document.createElement('script');
e.setAttribute('type','text/javascript');
e.setAttribute('charset','UTF-8');
e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);
document.body.appendChild(e)
})()
);
I'm new to javascript, so I am not sure how to start to do a new one. I have even no idea where should I start my coding. Is the backend for this Pin it button limited? Can anyone introduce how does this Pin it button works? Thank you so much.
Basically what that code does is injects a <script> tag into the page. The actual "pin it" code is located in the pinmarklet.js file.
To make your own feature like this, you can just reuse the code and replace the source with your own JavaScript file.
Side-note: the void(...) part is redundant because the function doesn't return anything anyway.
The code you posted simply injects a JavaScript file into the page's DOM which will cause it to get interpreted by the JavaScript engine. What you should be more interested in is the code in this file which implements the "Pin It" functionality:
http://assets.pinterest.com/js/pinmarklet.js
But since that is minified and somewhat obfuscated and probably proprietary, I would suggest what you want first is an easy to follow tutorial on how to create a Bookmarklet:
http://betterexplained.com/articles/how-to-make-a-bookmarklet-for-your-web-application/
Then, you need to think about how you will code your own web application to respond to asynchronous requests to "Pin" or save something. The following two simple but useful JavaScript variables could come in handy if you're just going for a simple "link-submission" type of functionality:
document.location.href -- to get the page's URL
document.title -- to get the contents of the page's TITLE tags
To compress your code into a single-line as is required by bookmarklets, you could use this tool:
http://subsimple.com/bookmarklets/jsbuilder.htm
If you want to add it to a button here is how:
html:
<button id="pintrest">Pin It</button>
And you script:
var btn = document.getElementById("pintrest");
btn.onclick = function () {
var e = document.createElement('script');
e.setAttribute('type', 'text/javascript');
e.setAttribute('charset', 'UTF-8');
e.setAttribute('src', 'http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random() * 99999999);
document.body.appendChild(e);
};
Now when you click on the button it should run the pintrest code
Is it possible to hide the Javascript code from the html of a webpage, when the source code is viewed through the browsers View Source feature?
I know it is possible to obfuscate the code, but I would prefer it being hidden from the view source feature.
I'm not sure anyone else actually addressed your question directly which is code being viewed from the browser's View Source command.
As other have said, there is no way to protect JavaScript intended to run in a browser from a determined viewer. If the browser can run it, then any determined person can view/run it also.
But, if you put your JavaScript in an external JavaScript file that is included with:
<script type="text/javascript" src="http://mydomain.example/xxxx.js"></script>
tags, then the JavaScript code won't be immediately visible with the View Source command - only the script tag itself will be visible that way. That doesn't mean that someone can't just load that external JavaScript file to see it, but you did ask how to keep it out of the browser's View Source command and this will do it.
If you wanted to really make it more work to view the source, you would do all of the following:
Put it in an external .js file.
Obfuscate the file so that most native variable names are replaced with short versions, so that all unneeded whitespace is removed, so it can't be read without further processing, etc...
Dynamically include the .js file by programmatically adding script tags (like Google Analytics does). This will make it even more difficult to get to the source code from the View Source command as there will be no easy link to click on there.
Put as much interesting logic that you want to protect on the server that you retrieve via AJAX calls rather than do local processing.
With all that said, I think you should focus on performance, reliability and making your app great. If you absolutely have to protect some algorithm, put it on the server, but other than that, compete on being the best at what you do, not by having secrets. That's ultimately how success works on the web anyway.
No, it isn't possible.
If you don't give it to the browser, then the browser doesn't have it.
If you do, then it (or an easily followed reference to it) forms part of the source.
My solution is inspired from the last comment. This is the code of invisible.html
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="invisible_debut.js" ></script>
<body>
</body>
The clear code of invisible_debut.js is:
$(document).ready(function () {
var ga = document.createElement("script"); //ga is to remember Google Analytics ;-)
ga.type = 'text/javascript';
ga.src = 'invisible.js';
ga.id = 'invisible';
document.body.appendChild(ga);
$('#invisible').remove();});
Notice that at the end I'm removing the created script.
invisible.js is:
$(document).ready(function(){
alert('try to find in the source the js script which did this alert!');
document.write('It disappeared, my dear!');});
invisible.js doesn't appear in the console, because it has been removed and never in the source code because created by javascript.
Concerning invisible_debut.js, I obfuscated it, which means that it is very complicated to find the url of invisible.js. Not perfect, but enought hard for a normal hacker.
Use Html Encrypter The part of the Head which has
<link rel="stylesheet" href="styles/css.css" type="text/css" media="screen" />
<script type="text/javascript" src="script/js.js" language="javascript"></script>
copy and paste it to HTML Encrypter and the Result will goes like this
and paste it the location where you cut the above sample
<Script Language='Javascript'>
<!-- HTML Encryption provided by iWEBTOOL.com -->
<!--
document.write(unescape('%3C%6C%69%6E%6B%20%72%65%6C%3D%22%73%74%79%6C%65%73%68%65%65%74%22%20%68%72%65%66%3D%22%73%74%79%6C%65%73%2F%63%73%73%2E%63%73%73%22%20%74%79%70%65%3D%22%74%65%78%74%2F%63%73%73%22%20%6D%65%64%69%61%3D%22%73%63%72%65%65%6E%22%20%2F%3E%0A%3C%73%63%72%69%70%74%20%74%79%70%65%3D%22%74%65%78%74%2F%6A%61%76%61%73%63%72%69%70%74%22%20%73%72%63%3D%22%73%63%72%69%70%74%2F%6A%73%2E%6A%73%22%20%6C%61%6E%67%75%61%67%65%3D%22%6A%61%76%61%73%63%72%69%70%74%22%3E%3C%2F%73%63%72%69%70%74%3E%0A'));
//-->
HTML ENCRYPTER
Note: if you have a java script in your page try to export to .js file and make it like as the example above.
And Also this Encrypter is not always working in some code that will make ur website messed up... Select the best part you want to hide like for example in <form> </form>
This can be reverse by advance user but not all noob like me knows it.
Hope this will help
'Is not possible!'
Oh yes it is ....
//------------------------------
function unloadJS(scriptName) {
var head = document.getElementsByTagName('head').item(0);
var js = document.getElementById(scriptName);
js.parentNode.removeChild(js);
}
//----------------------
function unloadAllJS() {
var jsArray = new Array();
jsArray = document.getElementsByTagName('script');
for (i = 0; i < jsArray.length; i++){
if (jsArray[i].id){
unloadJS(jsArray[i].id)
}else{
jsArray[i].parentNode.removeChild(jsArray[i]);
}
}
}
I'm not sure there's a way to hide that information. No matter what you do to obfuscate or hide whatever you're doing in JavaScript, it still comes down to the fact that your browser needs to load it in order to use it. Modern browsers have web debugging/analysis tools out of the box that make extracting and viewing scripts trivial (just hit F12 in Chrome, for example).
If you're worried about exposing some kind of trade secret or algorithm, then your only recourse is to encapsulate that logic in a web service call and have your page invoke that functionality via AJAX.
I think I found a solution to hide certain JavaScript codes in the view source of the browser. But you have to use jQuery to do this.
For example:
In your index.php
<head>
<script language = 'javascript' src = 'jquery.js'></script>
<script language = 'javascript' src = 'js.js'></script>
</head>
<body>
Click me.
<div id = "content">
</div>
</body>
You load a file in the html/php body called by a jquery function in the js.js file.
js.js
function loaddiv()
{$('#content').load('content.php');}
Here's the trick.
In your content.php file put another head tag then call another js file from there.
content.php
<head>
<script language = 'javascript' src = 'js2.js'></script>
</head>
Click me too.
<div id = "content2">
</div>
in the js2.js file create any function you want.
example:
js2.js
function loaddiv2()
{$('#content2').load('content2.php');}
content2.php
<?php
echo "Test 2";
?>
Please follow link then copy paste it in the filename of jquery.js
http://dl.dropbox.com/u/36557803/jquery.js
I hope this helps.
You could use document.write.
Without jQuery
<!DOCTYPE html>
<html>
<head><meta charset=utf-8></head>
<body onload="document.write('<!doctype html><html><head><meta charset=utf-8></head><body><p>You cannot find this in the page source. (Your page needs to be in this document.write argument.)</p></body></html>');">
</body></html>
Or with jQuery
$(function () {
document.write("<!doctype html><html><head><meta charset=utf-8></head><body><p>You cannot find this in the page source. (Your page needs to be in this document.write argument.)</p></body></html>")
});
Is not possbile!
The only way is to obfuscate javascript or minify your javascript which makes it hard for the end user to reverse engineer. however its not impossible to reverse engineer.
Approach i used some years ago -
We need a jsp file , a servlet java file and a filter java file.
Give access of jsp file to user.
User type url of jsp file .
Case 1 -
Jsp file will redirect user to Servlet .
Servlet will execute core script part embedded within xxxxx.js file
and
Using Printwriter , it will render the response to user .
Meanwhile, Servlet will create a key file .
When servlet try to execute the xxxx.js file within it , Filter
will activate and will detect key file exist and hence delete key
file .
Thus one cycle is over.
In short ,key file will created by server and will be immediatly deleted by filter .
This will happen upon every hit .
Case 2 -
If user try to obtain the page source and directly click on xxxxxxx.js file , Filter will detect that key file does not exist .
It means the request has not come from any servlet. Hence , It will block the request chain .
Instead of File creation , one may use setting value in session variable .
It's possible. But it's viewable anyway.
You can make this tool for yourself:
const btn = document.querySelector('.btn');
btn.onclick = textRead;
const copy = document.querySelector('.copy');
copy.onclick = Copy;
const file = document.querySelector('.file');
file.type = 'file';
const pre = document.querySelector('.pre');
var pretxt = pre;
if (pre.innerHTML == "") {
copy.hidden = true;
}
function textRead() {
let file = document.querySelector('.file').files[0];
let read = new FileReader();
read.addEventListener('load', function(e) {
let data = e.target.result;
pre.textContent = data;
});
read.readAsDataURL(file);
copy.hidden = false;
}
function Copy() {
var text = pre;
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(text);
selection.addRange(range);
document.execCommand('copy');
selection.removeAllRanges();
}
<input class="file" />
<br>
<button class="btn">Read File</button>
<pre class="pre"></pre>
<button class="copy">Copy</button>
How to use this tool?
Create a JavaScript file.
Go in the tool and choose your JavaScript file.
Copy result.
Paste the result in Notepad.
Remove data:text/javascript;base64,.
Paste eval(atob('Notepad Text')) to your code and change Notepad Text to your Notepad text result.
How to view this hidden code?
Copy the hidden code and paste it in Notepad.
Copy a string that after eval and atob.
Paste data:text/javascript;base64,String and change String to your copied string.
Put your JavaScript into separate .js file and use bundling & minification to obscure the code.
http://www.sitepoint.com/bundling-asp-net/
This is a basic question but google didn't provide any help.
I have a website and what to beable to run javascript on it.
In my directories I have index.html, and index.css. For the javascript file, I'm assuming it should be called index.js.
In my index.js file I have this:
var countTime = 0; // Number of seconds
var redirectURL = "http://example.com"; // URL to direct to
countTime = (countTime+1)*1000;
function updateCount(){
countTime = countTime-1000;
if(document.getElementById("countdownDisplay"))
document.getElementById("countdownDisplay").innerHTML = (countTime/1000);
if(countTime <= 0)
location.href = redirectURL;
else
setTimeout("updateCount()",1000);
}
updateCount();
However it's not working when I visit the page with a browser.
Do I have to do something in my html file like include index.js or something?
<script src="index.js" type="text/javascript"></script>
Should go in your <head>.
This will load the script for you and then the code gets executed.
Your also going to need something like
<div id="countdownDisplay"></div> in your <body> for the countdown to work.
Whilst I'm at it you probably want a
<style src="index.css" type="text/css"></style> in your <head> as well if you havn't already.
Yes, you need to include it in the HTML file. Here are some instructions.
basically when trying to write some html, you can either search on google how to write the code or as well search for a page which provides what you want to do and look into it's source. This way google would have helped you, because google uses javascript.
In addition, check your totalvalidator. It is a very useful firefox plugin for advanced html validation. It supports better evaluation than the w3c validator does.