Skip to content

Instantly share code, notes, and snippets.

@khornberg

khornberg/index.html

Created July 26, 2013 16:44
Show Gist options
  • Save khornberg/6090373 to your computer and use it in GitHub Desktop.
Save khornberg/6090373 to your computer and use it in GitHub Desktop.
Download ZIP
Encrypt form fields on the client side before submission such as a password field. Just a concept.
Raw
index.html
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<!-- Use the .htaccess and remove these lines to avoid edge case issues.
More info: h5bp.com/i/378 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<!-- Mobile viewport optimized: h5bp.com/viewport -->
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->
<link rel="stylesheet" href="css/style.css">
<!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->
<!-- All JavaScript at the bottom, except this Modernizr build.
Modernizr enables HTML5 elements & feature detects for optimal performance.
Create your own custom Modernizr build: www.modernizr.com/download/ -->
<script src="js/libs/modernizr-2.5.3.min.js"></script>
</head>
<body>
<!-- Prompt IE 6 users to install Chrome Frame. Remove this if you support IE 6.
chromium.org/developers/how-tos/chrome-frame-getting-started -->
<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
<header>
Concept page to <a href="http://code.google.com/p/crypto-js/">encrypt</a> data on the client side without sending data to the server. This encrypts sensitive data before it is transmitted. <br />
Yes, man-in-the-middle attacks could still mess up the data.
</header>
<div role="main">
<form action="" id="form1">
<input type="text" name="" id="user" autocomplete placeholder="username">
<input type="password" name="" id="pwd" placeholder="password">
<input type="button" value="Submit" id="submitButton">
</form>
<div id="results"></div>
</div>
<footer>
Based on <a href="http://html5boilerplate.com/">http://html5boilerplate.com/</a>
</footer>
<!-- JavaScript at the bottom for fast page loading -->
<!-- Change this to the encryption standard you want to us -->
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/sha3.js"></script>
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/components/core-min.js"></script>
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/components/enc-utf16-min.js"></script>
<!-- scripts concatenated and minified via build script -->
<script src="js/plugins.js"></script>
<script src="js/script.js"></script>
<!-- end scripts -->
</body>
</html>
Raw
script.js
/* Author:
khornberg
Testing client encryption - kinda of, maybe
*/
$("#submitButton").click(function(event) {
// Change this to the encryption standard you want to us
var hash = CryptoJS.SHA3($("#pwd").val());
var data = "<br />User: " + $("#user").val() + " Hash: " + hash.toString(CryptoJS.enc.Hex);
$("#results").append(data);
event.preventDefault();
})
@Sarfroz
Copy link

Sarfroz commented Jun 18, 2017

i have some questions regarding this. if you can help me, I will be really grateful.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment