Web Development - Security - javascript

In terms of security, is it generally a better practice to keep all of your javascript files embedded in the source html, or is it more secure to link to an external html file from the source html. Are they treated the exact same and I'm just being an idiot?
I am very new to web development and I don't really understand the encryption side of things:
(1) Embedded javascript
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
<script>
function myFunction()
{
// is this secure?
}
</script>
...
</body>
</html>
(2) External javascript
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
<script src="myFunction.js"></script> // or is this better?
</body>
</html>

Anything that makes it to the client side can be captured and viewed. So all JS files are open to viewed along with your HTML.
For security, if you have business logic or sensitive code that needs to remain unseen you need to place that on the server side and only access the results of that code running via API calls.

Related

Is there a way to call another .html file in my main html or in javascript

I was trying this find this out but too no avail. I was just wondering if you could call another separate html file in your main html.
I know you can do it for javascript
<script src = "Classroom_names.js"></script>
So I was wondering if you could do it also for it in html. For example
<script src = "field_names.html"></script>
Or if you could not do it like that would you be able to call a html file in javascript andthen set a condition to it.
Thank you for taking your time to read this guys
The easiest way to do it is using jQuery, which you must include in your project, and then use the load function to place it in some node of your website, in this case I used a div with the class "menuContainer" and the menu I have put in a file called menu.html
Important: You must have a web server running on localhost to be able to use this function since if you open the file using the url "file: /// your_file.html" through the browser it will give you a cross-origin error, if you don't have a server web running you can mount it very easily with python3 using the http.server module or in nodejs using http-server.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="menuContainer"></div>
</body>
<script>
$(document).ready(function () {
$('.menuContainer').load('./menu.html');
});
</script>
</html>

Stop cloudflare injecting HTML into my code

I have a few pieces of example JS and HTML that are stored in .js and .html files on my server. My server is run using cloudflare as a DNS server (I'm hosting it on my own server).
I read this code to display using code-prettify in my code, and it works in my local machine. When I push this code to my server, there are a few extra elements and additions to elements in my html.
This is the html file, and how it shows in the browser on my localhost
<!DOCTYPE html>
<html>
<script src="../../libraries/p5.min.js"</script>
<script src="../../libraries/p5.graphing.js"></script>
<script src="xySample.js"</script>
</html>
This is the html that displays when my server is through cloudflare
<!DOCTYPE html>
<html>
<script src="../../libraries/p5.min.js" type="5679b6186495861c611c81b4-text/javascript"></script>
<script src="../../libraries/p5.graphing.js" type="5679b6186495861c611c81b4-text/javascript"></script>
<script src="xySample.js" type="5679b6186495861c611c81b4-text/javascript"></script>
<script src="https://ajax.cloudflare.com/cdn-cgi/scripts/a2bd7673/cloudflare-static/rocket-loader.min.js" data-cf-settings="5679b6186495861c611c81b4-|49" defer=""></script>
</html>
On my cloudflare dashboard, I've been to the Page Rules tab and have passed in the url of both the HTML which my code should show up in as well as the location of the HTML thats being injected and disabled rocket loader for both. This didnt work, even after clearing cookies.
How do I stop this HTML injection by cloudflare. Thanks!
Just disable Rocket Loader in your Cloudflare dashboard

Having issues getting livejs.com

Having some issues getting the livejs.com script to automatically update web pages for changes made to HTML/CSS/Javascript. Below is my HTML on my localhost and it points to the web location of the script, which is accurate. Can you help me understand why my web pages don't update when I save my html?
<!DOCTYPE html>
<html>
<head>
<title>Page Title-Sam</title>
<script type="text/script" src="http://livejs.com/live.js"></script>
</head>
<body>
<h1>My First Heading adfasdfadf this is cool</h1>
<p>My first paragraph.</p>
</body>
</html>
Typo
type="text/script"
This is not a format of script that browsers recognise. It should be text/javascript.
In HTML 5 you should omit the attribute entirely.
Working locally
From the homepage:
Just include Live.js and it will monitor the current page including local CSS and Javascript by sending consecutive HEAD requests to the server.
If you are working from a local file (i.e. without a web server) then there is nowhere to make the HEAD request to. You need to be testing using HTTP(S).
Server support
The script checks a variety of headers, including Etag and Last-Modified. If your server doesn't set any of them for static files, it won't be able to tell when the file has updated.

PhP and Js writing problems in html file

so here is my problem :
There is my index.html and I want to write on it with php and javascript in order to check that the text is correct. When I start the index.html from one of my computer the javascript text displays correctly but not the php.
So I create a .htaccess and launch the index.html again using mylocal server then the php text display correctly but the javascript isn't anymore (using write or alert)
So what do I have to do in order to be able to use both ?
here is the code :
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Test</title>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<?php include 'parsing.php';?>
<script>
write("write");
alert("alert");
</script>
</body>
</html>
Thanks for your help.
the parsing.php is as simple as that :
yes, I have a webserver with the php plugin that's why it works in the second case only.
I am testing the page with this page : http://localhost/index.html
Thanks for your answers I think it was caused by my company proxy or something like that (their computer are full of problems anyway...)
I retried afterwards without changing anything and now it works.
Thanks for your time.

Load data from text file with ajax/javascript into html problems

I want to load data from this text file that is in the same folder as the html file on my computer but it won't work. In process of learning Ajax and put together this little test for myself test.html and the text file test.txt. Any advice please, would be greatly appreciated.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script>
function loadData()
{
var test;
test=new XMLHttpRequest();
test.onreadystatechange=function()
{
if (test.readyState==4 && test.status==200)
{
document.getElementById("test").innerHTML=test.responseText;
}
}
test.open("GET","test.txt",true);
test.send();
}
</script>
</head>
<body>
<div id="test"></div>
<button type="button" onclick="loadData()">Get data</button>
</body>
</html>
When I press the button, nothing happens. On the site where I saw a similar example the data from the text file is displayed above the button.
The problem is likely to be that you're accessing the files directly on your local system; web browsers have been designed not to allow this in order to prevent saved web pages loading personal files from your disks and uploading them to remote servers. In order to make it work, you'll need to run a web server locally and use that to view the files. I recommend the Apache web server, which is flexible and can be used on Windows, Linux or OSX.

Categories