I have created a login/signup system which submits values to a php file and connects the database to login. I'm concerned about the security of my login system from the client side, so security in the login.php and script.js. What are the things I need to take into consideration to make a secure login system. As in the security in the XMLHttpRequest or in the input fields of the client side.
login.php
<?php
session_start();
?>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LOGIN</title>
</head>
<body>
<?php
if (isset($_SESSION['user_id'])) {
header ("Location: index.html");
exit();
}
?>
<input id="inserted_id" type="text" placeholder="Account Name/e-mail" />
<p>
<input id="inserted_password" type="password" placeholder="Password" />
<p>
<button id="login_submit" type="submit">Login</button>
<script src="script.js"></script>
</body>
</html>
script.js:
document.getElementById("login_submit").onclick = function () {
var inserted_id = document.getElementById("inserted_id").value;
var inserted_password = document.getElementById("inserted_password").value;
http_request("web_includes/login.inc.php?inserted_id=" + inserted_id + "&inserted_password=" + inserted_password);
}
function http_request(url) {
var xml = new XMLHttpRequest();
xml.open("GET", url);
xml.onload = function () {
if (xml.responseText == "SUCCESS") {
window.open("index.html", "_self", "", false);
} else {
console.log("FAIL");
}
}
xml.send(null);
}
Unsure about XMLHttpRequest's, but research;
CSP: Content Security Policy, Which is specified
in the HTML Meta Tags.
..(to Block or negate Cross-site-Scripting aswell as other threats). ..................................https://www.youtube.com/watch?v=JbfNWg6JS4U
CORS: Cross Origin resource Sharing.
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
Sha256 & other versions.
Hashing+Salt+pepper are a similar concept. many videos on youtube about ................this....
Also Research. Nonce's (Not the Jail kind).
it stands for a Number which is used once,
Similar to a key. That only your website & Database will have access to or the full number atleast..
(Change XMLHttpRequest to XMLHttpsRequest with the S meaning secure.)
Not viable apparently. or Automatically chosen.
& Could possibly put your whole Login form inside of an Iframe Which you can then specify individual Security attributes on. through the 'Sandboxing' feature.
(Not sure this is necessary if you implement the others or good practice, but it might add an extra layer of frustration to any potential attacker.)
for the PHP side aswell as any Javascript files use RegEx functions to block any attempt to add code; Blocking;
{Z}()[]^></#..etc.....
Just thought of another thing that came to mind. There are websites such as File2hd where you can download websites entire js/css/php/json/ajax etc....
There is a way to block these requests but thats something you'd have to research... it is a very handy site though for analyzing & learning other peoples code...
.php file extension cannot generally be viewed or altered from client side,
unless they are very skilled.. But CSP is your best bet with hash+salt+pepper + RegEx...
A combination of any of the above should make it farely secure... Kind Regards Tao.
Hope this helps :)..
Related
I want to test php-Ajax with a simple program.I am using html and php file both are stored in same directory (/var/www/html). when I click on button it shows following error in console.
XML Parsing Error: no root element found Location.
??
html file
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title> Ajax testing </title>
<script type="text/javascript">
function load(){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("result").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "simple.php" , true);
xmlhttp.send();
}
</script>
</head>
<body>
<button onclick="load();">Click here</button>
<div id="result"> </div>
</body>
</html>
php file
<?php
echo "Hello";
?>
what is wrong with this code ?
This thread explains it xmlhttprequest for local files
From the thread:
Historically, you can't query for local files from JavaScript (or shouldn't be allowed to, or something's odd). This would be a serious breach of security.
There are only a few circumstances where you can do this, but in general they involve specific security settings requiring to be set for your browser, to either lift the limitation or to notify the current page's execution process that that is is granted this exceptional right. This is for instance doable in Firefox by editing the properties. It's also commonly OK when developing browser extensions (for instance for Chrome or FF) if they request the file access permissions.
I just installed Apache server and saved my php-file on that. I know it is a bit of an overkill, but hey, it worked :)
I want to process a GET extension in a HTML page and not a PHP page.
I have looked through the internet and not found anything.
URL = examplesite.com?id=1234
I assume this would go to the index page on the domain. As the index page is a HTML page, is there a way to get the details of the extension transferred to another link I have in the html script that emails me when someone looks at the site.
<script src="trigger.php">
</script>
This way I can customise the extension to know where the person found me. id=1234 is from twitter, id=2345 from FB etc.
Then i could place the extension onto the script to send me the email.
<script src="trigger.php?id=1234">
</script>
Is there a way to get the HTML page to process extension and pass it on in a variable of some sort.
Thanks in advance
Robert
You can do it in Javascript in the HTML. window.location.search contains the query string from the URL.
You can then use an AJAX request to send the query string to your server script.
<script>
$(document).ready(function() {
var script = 'trigger.php' + window.location.search;
$.get(script);
});
</script>
This is not possible with plain HTML. By definition, HTML is not dynamic. It can't process anything you want. However, there are three options.
Firstly, you can use JavaScript and AJAX calls to make another HTTP request to examplesite.com/processID.php (or another PHP page) which will process the request.
Another way to use JavaScript would be to use a client side API such as MailChimp to send the email directly from the users computer.
Or you could just redirect your root page for your domain examplesite.com to lead to index.php. I'm sure that's very easy to configure in mainstream servers such as Apache or Nginx. Otherwise please ask another question on Server Fault about how to set this up using your server.
If you are using a PHP hosting provider, they should also be able to help redirect the root page. If you don't have any access to PHP on your hosting provider, you're out of luck. You must only use the second option.
Do it with ajax
<form id="form1">
<input type="text" />
<button type="submit" id="sendforms">send</button>
</form>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#sendforms").click(function() {
var combinedFormData = $("#form1").serialize();
$.get(
"trigger.php",
combinedFormData
).done(function(data) {
//alert("Successfully submitted!");
$("#result").html(data);
}).fail(function () {
//alert("Error submitting forms!");
})
});
});
</script>
I am having difficulty with a specific JQuery $.post call to a PHP-based processor. I created a test page with the code below located here: http://goo.gl/Bg7H2u
Note this is located on a subdomain, but we are not doing cross-domain posting. Everything should be included on the subdomain.
There do not seem to be any JS errors as reported in the error console.
The processor /get-data.html is the general purpose PHP processor, and, if you load the processor page with the right value, it returns a dataset from the MySQL database in JSON format. We have this working on the main domain without issue, and other $.post calls seem to work OK from this subdomain (not to this /get-data.html processor, but other processors that process form content).
See the actual processor output here: http://goo.gl/yOzrm2
I must be missing something obvious, but I am coming up empty. Thoughts?
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=320px, initial-scale=1">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var prices;
$(document).ready(function(){
$.post( "/get-data.html", { table: 'prices' },
function( data ) {
prices = data;
alert(prices);
}, 'json');
});
</script>
</head>
<body>
<div style="overflow-x: hidden;" id="divMain">
</div>
</body>
</html>
Thanks for any advice you can provide.
If you do View Source on the processor output, you'll see that your script is returning:
<p>{"Basic Plan":["349"],"Basic":["349"],"Premium Plan":["549"],"Premium":["549"],"Standard Plan":["429"],"Standard":["429"],"Bonus Plan":["175"],"Additional Central AC System":["99"],"Additional central heating system":["99"],"Central Vacuum":["99"],"Whole home humidifier":["49"],"Pool (in-ground)":["179"],"Spa (in-ground)":["179"],"Septic System":["99"],"Sump Pump":["99"],"Well pump":["99"],"Whole home water softener":["99"],"Lawn sprinkler system (in-ground)":["99"],"Wine refrigerator":["49"],"Ice maker (free standing)":["49"],"Home phone (unlimited)":["49"],"TV Protection (Flat screen up to 60 inches)":["99"],"PC Protection (laptop or desktop)":["49"]}</p>
There's <p> at the beginning and </p> at the end. This is not valid JSON. You need to fix the server script so that it doesn't print anything other than the JSON (whitespace is OK, that's it).
1.confirm that /get-data.html is the correct relational url for your file location.
If you navigate directly to the /get-data.html, does it produce the results that you are after.
try running the same code without , 'json' and see if it works.
hope this helps
I need to inject some JavaScript into an existing application.
The application is normally embedded with an iframe like this:
<html>
<body>
<iframe src="http://webchat.quakenet.org/" width="647" height="400"></iframe>
</body>
</html>
It is an opensource JavaScript based IRC Client http://webchat.quakenet.org/ (source).
Now I like to inject some JS to Highlight special messages for example. For this I already found the HilighterClass to override.
The problem is, how could I do that? I guess injecting JS into an iFrame is not "allowed" by modern browsers, or?
If the iFrame is a problem, maybe I can add the client like they do:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<base />
<title>QuakeNet Web IRC (qwebirc)</title>
...
<script type="text/javascript">
var ui = new qwebirc.ui.Interface("ircui", qwebirc.ui.QUI, {"appTitle":"QuakeNet Web IRC","dynamicBaseURL":"/dynamic/leibniz/","baseURL":"http://webchat.quakenet.org/","validateNickname":false,"networkServices":["Q!TheQBot#CServe.quakenet.org"],"nickValidation": {"maxLen":15,"validSubChars":"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_[]{}`^\\|0123456789-","validFirstChar":"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_[]{}`^\\|","minLen":2},"staticBaseURL":"/static/leibniz/","loginRegex":"^You are now logged in as [^ ]+\\.$","networkName":"QuakeNet"});
</script>
</head>
<body>
<div id="ircui">
<noscript>
<div id="noscript">Javascript is required to use IRC.</div>
</noscript>
</div>
</body>
</html>
Requirements:
The client should connect into the quakenet.org Servers. That could be a problem because of some Cross-Site-Scripting restrictions.
The best would be if no other plugin's for my users are required.
You could a Proxy server like Privoxy which can inject JavaScript into pages. Unfortunately your users would have to do all their browsing through Privoxy, so that might not be an option.
Or you set up your own reverse proxy (e.g. Squid) and change the contents before relaying. You'd replace the requests to the JavaScript library with a call to your own library which contains the original JavaScript plus your highlighting code.
Ans surely you heard of Greasemonkey, which is a browser plugin which can do exactly that - inject content.
you cannot manipulate the contents of an iframe. cross site scripting is not the problem here.
To make the injection easiest you can the the Gatejs SPDY/HTTP proxy and use the injection gatejs opcode - it works both on forward and reverse proxy.
Gatejs injection will try to add you html code into a content of type HTML (text/html).
Below a forward proxy example using injection.
var serverConfig = function(bs) { return({
hostname: "testServer0",
runDir: "/tmp/gatejs",
dataDir: "/path/to/dataDir",
logDir: "/var/log/gatejs",
http: {
testInterface: {
type: 'forward',
port: 8080,
pipeline: 'pipetest'
},
},
pipeline: {
pipetest: [
['injection', {
code: "<h1>w00t injection</h1>"
}],
['proxyPass', { mode: 'host', timeout: 10 }]
],
}
})};
mk-
I read Google Chrome Extensions Developer's Guide carefully, it told me to save options in localStorage, but how is content_scripts able to get access to these options?
Sample:
I want to write a script for a couple of domains, and this script should share some options on these domains.
content_scripts:
//Runs on several domains
(function(){
var option=getOptions();
//Get options which have been set in options.html
if(option){
doSome();
}
})
option_page:
<html>
<head>
<title>My Test Extension Options</title>
</head>
<body>
option: <input id="option" type="text" /><br />
<input id="save" type="submit" /><br />
<span id="tips">option saved</span>
<script type="text/javascript">
(function(){
var input=document.getElementById('option');
var save=document.getElementById('save');
var tips=document.getElementById('tips');
input.value=localStorage.option||'';
// Here localStorage.option is what I want content_scripts to get.
function hideTips(){
tips.style.visibility='hidden';
}
function saveHandler(){
localStorage.option=input.value||'';
tips.style.visibility='visible';
setTimeout(hideTips,1000);
}
hideTips();
save.addEventListener('click',saveHandler);
})();
</script>
</body>
</html>
I would think you could use the chrome.extensions.* API to create a line of communication to a background page that is running under your extension ID, thus giving you local storage.
I think this is possible because the Content Script docs specify that the chrome.extensions* API's are available to content scripts. But I have never tried this.
You would then just have to send messages from the background page to the content script when a connection is made. You could even send one message with all the settings in a literal object.
Here is an example of creating two way communication I wrote about earlier. You could implement this or create a custom solution but I think this is how you would achieve what you are looking for.