I host a website, and I need to hide a script src. For example,
script src="main.js"
would need to be
script src="main.js"
but it would be unclickable. I realize this isn't the most well phrased question, but how can I keep the user from seeing the JavaScript?
You can't present JavaScript to the browser and then hide it from the user; it's just not possible. The best you can do is obfuscate it and make it difficult for the casual observer to decipher, however it won't stop a determined user from de-obfuscating it.
I found a node.js npm plugin that can hide any src="*" & href + content
https://www.npmjs.com/package/location-hide
This works also for php href, src, content it will use everything inside src=""
You need only node.js for creating the exported files. It´s easy to use even if you don´t know node.js. You can watch youtube guides for installing and using node.js
If you create enviroment 1 time you can load cool stuff with npm
It turns
<script src="test/folder/sample.js" type="text/javascript"></script>
<link href="test/stylesheet/perfect-scrollbar.css" rel="stylesheet">
into
<script src="TNANIuTOLZfmLYwaPDIYhcZDVOWKodqYhysaTeQHFPDhYlDLCOtxZqYmkKAhaSwSgbsYOWlpBzVSBtMZKSfwRqvPSqWVlBBuzHR" type="text/javascript"></script>
<link href="gyXeFnOEvZbgTjLvdZRnsyrfhaXqffkDjcdATTouqpIenCalLRXKamuXEtiKbPGCsNrdQIaqTMTNWsLyLFuxygKytaruWzSjKYMq" rel="stylesheet">
And it generate new jquery include codes like this to include your scripts with javascript in a external file
$('[src=\'TNANIuTOLZfmLYwaPDIYhcZDVOWKodqYhysaTeQHFPDhYlDLCOtxZqYmkKAhaSwSgbsYOWlpBzVSBtMZKSfwRqvPSqWVlBBuzHR\']').attr("src", "test/folder/sample.js")
$('[href=\'gyXeFnOEvZbgTjLvdZRnsyrfhaXqffkDjcdATTouqpIenCalLRXKamuXEtiKbPGCsNrdQIaqTMTNWsLyLFuxygKytaruWzSjKYMq\']').attr("src", "test/stylesheet/perfect-scrollbar.css")
Also I would suggest you that you include all of your external javascript codes in 1 single js file. This file you place in the root of your index file that you can make this
<script src="./allinone_external_file.js" type="text/javascript"></script>
Then make right htaccess that nobody can acces this file. You can also make a fake import script for the source code that every body can see. But this file is only a redirect for the real external js file. you make this multiple times as example + use other obfuscation tools. This will protect you from people searching exploits with your javascript codes. I know its no big deal and maybe you can see the jquery include codes if you know how. But anyway its a great protection.
Related
What is the quickest/smartest way to include a JS file into code ?
I tried to drag and drop a JS file to source code, but it opens a new tab with the JS file.
(Same question for CSS link including)
This functionality is available since version 2016.2, it's just not working in your case as you work in a PHP file.
Open a HTML file and drag'n'drop a JS or CSS file to see it working.
PhpStorm will add in case of a JS file automatically:
<script src="main.js"></script>
In case of a CSS file:
<link rel="stylesheet" href="main.css">
For the case of an empty document it will just be inserted in the current line.
If you have an <html> tag it will be included within and before a <body> tag and if available even directly in the <head> tag - no matter where you leave your mouse button.
To your actual case: In order to make it work you could theoretically handle *.php files like *.html files. You can do that in Settings -> Editor -> File Types. But of course that's not useful as you will loose all the PHP features like auto-completion for the language etc. I guess you would need to write a feature request so that they maybe implement this for PHP files too.
BTW: drag'n'drop of images to a wished position in a <body> tag of a html document does also work.
EDIT: Here the link to the JetBrains blog where they explain this feature:
https://blog.jetbrains.com/webstorm/2016/07/webstorm-2016-2-drag-files-into-html-and-quotes-style/
Thanks to LazyOne for sharing!
I'm working with Bootstrap and I'm trying to use the bootstrap.min.js script found here.
In my code, if I use the following script tag everything works as expected:
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Whereas if I save the code found at the above link into a file called bootstrap.min.js and run the following code, the script no longer works.
Note: I'm saving the bootstrap file one directory above where my HTML is saved.
<script src="../bootstrap.min.js"></script>
If the first option works what am I doing wrong (or not doing) to make the second not work?
I'm new to web development but from what I understand, when you use the script tags in HTML, all that happens is the script at the location specified in src=" " is run. Where in this case, both options seemingly point to the same code.
In answer to your title, I have to delve into practices and ways of work.
CDN's (using a script from a link) isn't generally a good idea for development, as you don't have that script when offline and anything relying on that will fall over. However, it saves space (as you don't store the script), and it is quite manageable as well (with regards to directories and building doesn't modify the paths etc.). In development, local files are a good idea. In production, however, it is a good idea to either use minified JS, or CDN's, for storage saving.
In answer to your question body, you have to get the path right (including the file name). ..\ goes to the parent directory to start off with, while .\ is the current directory. Also, the <script> reference tag has to be above all usages as the page is loaded from top to bottom. Take those tips and see what the issue is.
I'm new to web front-end programming and am teaching myself AngularJS.
I have created a very simple webapp that just lets users login and logout. I am running it locally on my Mac OSX.
Below is my index.html file. Although it works, I'm not sure if I'm doing it right. I need to know how and where to import the angular.js files and the bootstrap.js files.
My questions are as follows. I haven't been able to figure this stuff out by googling. I need someone to explain this stuff to me please.
I'm currently importing the angular.js file from https://ajax.googleapis.com. Is that correct? Or should I download it and store that file in the same directory as index.html? Why? When should I use the non-minified file? What is the benefit of using non-minified?
I'm currently not importing any bootstrap file(s). Which file(s) should I import? Should I import it/them as a URL or as a file from the same directory as index.html
For both Bootstrap and AngularJS, please tell me which line numbers I should put the script src lines in my HTML.
Should I check the Angular and Bootstrap files into my Github repository?
index.html:
<html ng-app="app">
<head>
</head>
<body ng-controller="Main as main">
<input type="text" ng-model="main.username" placeholder="username">
<br>
<input type="password" ng-model="main.password" placeholder="password">
<br>
<br>
<button ng-click="main.login()" ng-hide="main.isAuthed()">Login</button>
<button ng-click="main.logout()" ng-show="main.isAuthed()">Logout</button>
<br/> {{main.message}}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Normally, you add CSS stylesheets and JS scripts in the <head>(between lines 2 and 3) area of your html. You can either link files with URLs like the example below or just download the whole Angular.js or Bootstrap.css file (both of them aren't that big) and put them in the same folder as your index.html file.
URL/CDN example:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
</head>
Local folder example:
<head>
<link rel="stylesheet" href="bootstrap.min.css">
<script type="text/javascript" src="angular.min.js"></script>
</head>
Minified files (angular.js vs angular.min.js) will both run the same way. The only difference is the .min. file has the code all squished without any spaces, tabs, and new lines. This makes it load faster for computers, but if you're going to customize your angular or bootstrap in the future, you will find the squished format impossible to read.
You don't need to be too concerned with doing everything 'the perfect way' if you're just starting out. I used to include the angular.js and bootstrap.css files along with my index.html in my project when I pushed it to Github. After a while though you might find it cleaner to leave them out and just use the URL-format.
Some people will say you should put all your JS files and links at the bottom of your webpage (just before the </body> tag), but again this is just another optimization towards 'perfect' that you shouldn't worry too much about.
This is advise for beginners, if you are an expert this may not apply to you:
I would advice you to have the files locally while you are developing, then your website will work w/o internet, and it will respond faster if you disable cashing (which you should when you are developing)!
You should disable cashing in your browser when you are developing, otherwise when you change your css and js files it will take minus before the browser detects the files have changed
the minimized versions are smaller but unreadable, I would use the none minimized versions while developing so I can understand error messages, and then switch to the minimized version either a) never or b) when speed becomes important
see 1
as a beginner you should but it in the head tag ie between line 2 and 3. sometimes people put it after the body tag to first load the webpage and then the scripts, this is fine also, but as a beginner I think it is advantageous for your webpage to fully work as soon as you can see it.
good question, I would do it out of laziness, alternative you could have a script called get_dependencies.sh where you have lines as "wget stuff"
The usual convention is to put the CSS files in link tags inside your <head> tag (2-3), so that they are rendered before the html and the styles will apply when the content is loaded, so that the user will begin to see the page building up even before it is fully loaded, instead of seeing some not styled elements beforehand.
more on that:What's the difference if I put css file inside <head> or <body>?
now, the scripts should be loaded at the end of the body(where they are now), for the following reasons:
if they will be rendered before most the html, they will delay the page from rendering until the whole script is loaded, and that's a UX hit.
most scripts are supposed to run anyway when the document is fully loaded, sometimes developers will use something like DOMContentLoaded to ensure that, but sometimes they don't and then a script will run without the corresponding html loaded.
more on that :Where should I put <script> tags in HTML markup?
you asked about minification:
minification is supposed to make your files downloaded faster since they are compressed and have less weight. it is ideal for production, but bad for development since you can't debug them well. that's why you should enable minification only on production. (and because you use angular, also use $compileProvider.debugInfoEnabled(false), look for it.)
as for using files in your project (download them) or from cdn (https://ajax.googleapis.com):
a good convention for development is to use files on your project, so that you can develop without caring about your internet connection, and the distance the content need to go between their servers and your machine.
however, on production, a good convention would be using the cdn in your page,
since many other web pages may include the libraries you want to fetch(angular and bootstrap are quite common) so the file has a good chance to be already stored in your browser cache, and not need to be loaded again.
and yet, you should define a fallback in your page such that if the cdn's are some why unavailable, the user will get the files from your project server.
here's an example
for the last question: you can put them in some "Libraryscripts" directory, so that's it's clear they are just dependancies
Ok, sorry for not wording the question correctly, and im not so good with words, but I was wondering, since you can get the scripts in HTML from the web, ex: <script src='something'></script> How do you make it to where you can put in your own src? Again, sorry for not being able to word this good, but if you understand could you please help me out.
Just put the path to the script where is says src. ie: <script src="js/app.js"></script>
The value of the src attribute is just a URL.
Make the server return a resource (for that URL) with an application/javascript content-type and a JavaScript program as the content. This is usually achieved by uploading a text file, with a .js file extension, containing your JavaScript.
Im using livereload and using Espresso as my editor, ive linked livereload to my html file, however when i edit my less file it wont load of the functions or styles, but the livereload itself works. When i also try to edit anything on a less file it wont be editable like a css file. everything is in plain text, so i know something is not right in that end.
<link rel="stylesheet/less" href="styles.less">
<script src="http://lesscss.googlecode.com/files/less-1.1.3.min.js"></script>
Everytime i put stylesheet/less the file just works with html, so its with no style.
You are linking to http://lesscss.googlecode.com/files/less-1.1.3.min.js
But perhaps you should check to which recourses you are linking before doing so ;)
It's a page that doesn't exist (and if it would exist, it would be very outdated.)
Instead; link to
http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js and get more info here http://lesscss.org
Have you tried changing stylesheet/less to stylesheet/css?
<link rel="stylesheet/css" href="styles.less">
<script src="http://lesscss.googlecode.com/files/less-1.1.3.min.js"></script>