Hiding Password field content from users - javascript

I'd like to know if its possible for me to do something from the following :
1) Replace the source code visible in view source , with an image , or nothing at all.
2) Hide the value attribute of <inpt type="password" ....> tag , so that the password entered by the user is not visible to anyone .
Thanks in advance.

You can minify your HTML to make it slightly unreadable, but it's trivial to unminify it. You can't do anything further to "remove" or "hide" it.
You mean to hide the value attribute after the user types something in, or to hide the value sent from the server? If the former, you could use JavaScript to extract the value as it's typed into some variable and replace the value with gibberish. If the latter, then the obvious answer is to not send that value.

View source is a representation of static HTML, so if you create any element dynamically, it will not be displayed in view source.
Note: These fields will still be accessible using dev tools.
Following is a sample code:
JSFiddle
function submit() {
var uName = document.getElementById("txtUserName").value;
var uPass = document.getElementById("txtUserPass").value;
console.log(uName, uPass);
}
function addPasswordField() {
var passInput = "<input type='password' id='txtUserPass' />";
document.getElementById("content").innerHTML += passInput;
}
(function() {
addPasswordField();
})()
<div id="content">
<input type="text" id="txtUserName">
</div>
<button onclick="submit()">submit</button>

There is no way to hide source code in a browser since that is how these things are built. The web is an open platform and developers working with the web need to have the view source functionality while working on their project(s). May I ask why you feel the need to hide the source code and the password?

To answer the first question: No. This is how browsers are designed and there are lots of other ways to request the page to see the source. For example, you could use Fiddler to see the traffic passing between the server and the browser.
As for the second question...why are you trying to hide the password?
Using the password input type will prevent anyone from seeing the password on the screen. so I assume this is to stop the data being viewed in transit?
If you want to secure your connection between the client and the server, you should consider using a secure (https) connection. Thanks to LetsEncrypt this is free, so it is no longer a costly option.

Related

How do I pass an email into the site tracking Javascript code?

does anyone here have any idea how to set up Site Tracking by passing a contact's email address into Javascript Code?
I am on Wordpress using the visual builder Elementor's native contact form.
Here's the contact form: https://www.bestseo.sg/free-report/ (Bottom of the page)
I have already inserted ActiveCampaign's site tracking code sitewide.
However, it does not seem to start site tracking even after the form submission.
According to ActiveCampaign's documentation(https://help.activecampaign.com/hc/en-us/articles/221542267-An-overview-of-Site-Tracking#how-to-pass-a-contact-s-email-address-into-javascript-code), I believe I have to add this line of code:
vgo('setEmail', 'Email_Address_Goes_Here');
above
vgo('process');
But I have no idea what to replace 'Email_Address_Goes_Here' with, in order to call the actual contact's email after form submission.
Any help would be much appreciated!
Thank you.
So the plugin used to insert these JavaScript codes is https://wordpress.org/plugins/header-and-footer-scripts/ - I’d suggest to maybe just keep using that, and keep the scripts in the footer, so that this does not require too much modication.
Inside your template, you have to output the email addresse somewhere, where the JS can read it from - via a custom data attribute added to the body element for example.
The header.php of your theme should contain something similar to
<body <?php body_class(); ?>>
Modify that, to add a custom data attribute to store the email address entered in the from:
<body <?php body_class(); ?> data-freereportemail="<?php echo !empty($_POST['form_fields']['email']) ? esc_attr($_POST['form_fields']['email']) : ''; ?>">
If the POST parameter by that name is set, then it will be output as content of this attribute, otherwise it’ll simply stay empty.
Then modify the JavaScript code you insert via the plugin like this,
var freereportemail = $('body').attr('data-freereportemail');
if( freereportemail != '' ) {
vgo( 'setEmail', freereportemail );
}
This assumes that jQuery has already been loaded at this point, but I think that should most likely be the case.
If the attribute contained an email address, then this will execute the vgo tracker function, if the attribute value is empty, then it will simply skip this call.
This is not the most sophisticated approach, but it should do.
(Only if you had other forms on the site as well, that use a form field of that exact same name, you might be tracking more than intended. In that case, you’d need to find some additional criterion, to be able to differentiate between these different forms.)
A person at the AC support gave me thsi code :
jQuery('form').submit(function() {
var userEmail = jQuery("form input[type='email']").val();
vgo('setEmail', userEmail);
vgo('process');
});
I hope it'll help you.
I use FluentForms, so i just went on the form specific Custom JS/CSS to apply it (so i had no problems of proper targeting...)

How can I modify the query from a user submitted search input with a Chrome extension?

So, I'm writing a Chrome extension for a school assignment and I'm stuck on this part where I think I need to parse a string. This is my first time working with HTML, CSS, and JS, so I'm just scouring the web for tips on how to make this happen.
Basically, in our assignment we need to create an extension for Chrome which essentially opens up a new page where we have a search bar. There's this website, https://www.manualslib.com/, and the terms we input into that search bar need to be used to directly search that site.
The problem is that this website's URL for searches is a bit different than what I'm used to: when you search for something, the website takes the first letter of my search term, puts it in between slashes, and then adds at the end the whole search. For example, if you search genetics there, the URL will look like https://www.manualslib.com/g/genetics.html.
So I guess I need to parse the string somehow to get the search term's first character, right? According to w3schools, using the split() method would be a good idea. The problem is I'm not really sure how the syntax works here. As I said, it's my first time dabbing in web developing, so I'm not familiar at all with the way people do stuff here. Any help is appreciated.
This is the code I have for the search bar (this code merely redirects to the webpage, it doesn't search anything):
<div id="tfheader">
<form id="tfnewsearch" method="get" action="https://www.manualslib.com/">
<input type="text" class="tftextinput" name="str" ; size="21" maxlength="120">
<input type="submit" value="search" class="tfbutton">
</form>
</div>
What kind of changes do I have to make? Do I need to create a .js file where I write the function that parses the string? Or is the parsing function written inside the HTML file? Any help is appreciated, thanks in advance!
var query = 'genetics';
var url = 'https://www.manualslib.com/{0}/{1}.html'
.replace('{0}', query.substring(0, 1))
.replace('{1}', query);
console.log(url);
The onsubmit event might help you.
To redirect to another site, just set window.location, like this:
search_form.onsubmit = function() // will be called as soon as the form is submitted
{
var searchText = typehead.value; // the text entered in the search bar
var redirectTo = "https://www.manualslib.com/"+searchText[0]+"/"+searchText+".html";
window.location = redirectTo;
}

How to download files in bulk from browser console using JavaScript?

I have no experience with web programming, so my question would be a very simple one. I want to download a lot of files by filling out forms in a web page. The web page's extension is .aspx, and I am interested in only one field and a button. By fooling around with the console in my browser, I figured out that executing:
document.getElementById('TxtRegNo').value = 'blahblah`;
will fill the concerned field. Also doing a
__doPostBack("ImageButton1","Click");
will download the .pdf file curresponding to blahblah. The actual value which needs to be entered is a sequence like PAG-1200 to PAG-1900. I tried using a for loop, like this:
for (var i = 21618; i < 21621; i++)
{
document.getElementById('TxtRegNo').value = 'B14-' + i;
__doPostBack("ImageButton1","Click");
}
but it doesnot work as expected. only the last document gets downloaded, and I get this in the console:
Thought this error does not come whe nI run in FireFox's console, I can still run only one file. Could anyone tell me how to do this?
Try this:
Inject jQuery to the page via the console, as explained here: Include jQuery in the JavaScript Console
In your for loop clone the form, set the values as you wish and submit the form jQuery('form').clone().find('#TxtRegNo').val('blah').parent('form').submit();
If the page contains more than one form, you should specify it. 'form' works like css selectors here. This will find all forms on the page. Just use '#elementId' or '.elementsClassName' to be more concrete, if necessary.
Maybe you also need to change the name of the form (to be able to submit the forms simulatiously). I didn't try it, this is just a guess.
If you want to split the code to several lines you can also do this:
var myFormClone = jQuery('form').clone();
myFormClone.find('#TxtRegNo').val('blah');
myFormClone.attr('name', 'uniquename_' + iterationVariableOfForLoop);
myFormClone.submit();
If the submit failes, try:
myFormClone.get(0).submit();
Good luck!

Transfer possibly unsafe user input from hidden input field to DOM

The following is a simplified example of a page a user has created at a site (they created it by filling out a form and then they get a URL for the page; the below is the HTML for the page they created).
In the example, I'm taking the value of a hidden input field and then putting it into the DOM as is. That results in an alert, simulating an XSS attack.
What's the best way to prevent things like this? The value of #sourceinput was previously input by the same or a different user who's viewing the page below, and the user's input wasn't filtered to remove tags. (The actual case involves the jquery.tooltip.js plugin and it's bodyHandler callback; on mouseover a bodyHandler callback would get the hidden input and display it to the user.)
One way to deal with this would be to strip tags on input; I control what goes in the hidden textfield so that would seem to solve it.
Another way would be to strip tags in Javascript, but some of these don't seem to be 100% effective:
Strip HTML from Text JavaScript
Is there some sort of best practice that I'm missing, or are those two the best ways?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<title></title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>google.load("jquery", "1.7.1");</script>
<script>
$(document).ready(function() {
var badHTML = $('#sourceinput').val();
$('#destinationdiv').html( badHTML );
//$('#destinationdiv').text( badHTML );
});
</script>
</head>
<body>
<input type="hidden" id="sourceinput" value="<script>alert('hi');</script>" />
<div id="destinationdiv" style="width:10px;height:10px;background-color:red;"></div>
</body>
</html>
UPDATE: The solution I'm going with for now has three parts:
When the page the user has created is saved, I run PHP's strip_tags() on their input. These are just short text strings like titles and blurbs, so few users will expect they can enter HTML. That might not be appropriate for other situations.
When the page the user created is displayed, instead of putting what the user had entered in an input value attribute, I put their input inside a div.
I take the value out of that div using .text() (not .html() ). I then run that through the underscore function (see below).
Testing this out - including simulating skipping the first step - seems to work. At least I'm hoping there isn't something I missed.
Here's the escape function used by Underscore.js, if you don't want to use the entire Underscore library of functions:
var escape = function(string) {
return (''+string).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"').replace(/'/g, ''').replace(/\//g,'/');
};
Used like
var safe_html = escape("<b>Potentially unsafe text</b>"); // "<b>hello</b>"
$("#destination").html(safe_html);
It's written well and is known to work, so I'd advise against rolling your own.
I would say what you commented out (using text() from jquery is the better option). That will make sure the text stays text which is what you want. Filtering or stripping may have unwanted side effects like removing a mathematical expression in the input (" x is < 5").
Do Nothing.
You are trying to protect the user from himself. There is no way the user A can harm user B. And for all you care, user A might as well type javascript:alert('hi') on the address bar and xss himself. And no matter what javascript escape function you create, a savvy user can always bypass it. All in all, its a pointless pursuit.
Now, if you start saving what the user entered on the server side, then you should definitely filter things. Don't build anything on your own. Depending on your server side language, there are several options. OWASP's AntiSammy is one such solution.
If you do choose to save user entered html on the server side, make sure to run it by antisammy or a similar library before saving it to the database. On the way out, you should simply dump the HTML without escaping, because you know whatever is in the database is sanitized.

Non-AJAX jQuery POST request

I am trying to use the jQuery POST function but it is handling the request in AJAX style. I mean it's not actually going to the page I am telling it to go.
$("#see_comments").click(function() {
$.post(
"comments.php",
{aid: imgnum},
function (data) {
}
);
});
This function should go to comments.php page with the aid value in hand. It's posting fine but not redirecting to comments.php.
#Doug Neiner Clarification:
I have 15 links (images). I click on a link and it loads my JavaScript. The script knows what imgnum I opened. This imgnum I want in the comments.php. I have to use this JavaScript and no other means can do the trick. The JavaScript is mandatory
Your method successfully POSTs the aid value. But in the comments.php when I try to echo that value, it displays nothing.
I am using Firebug. In the Console, it shows the echo REQUEST I made in Step (2) successfully.
I know what you are trying to do, but its not what you want.
First, unless you are changing data on the server, don't use a POST request. Just have #see_comments be a normal <a href='/comments.php?aid=1'>...
If you have to use POST, then do this to get the page to follow your call:
$("#see_comments").click(function() {
$('<form action="comments.php" method="POST">' +
'<input type="hidden" name="aid" value="' + imgnum + '">' +
'</form>').submit();
});
How this would actually work.
First $.post is only an AJAX method and cannot be used to do a traditional form submit like you are describing. So, to be able to post a value and navigate to the new page, we need to simulate a form post.
So the flow is as follows:
You click on the image, and your JS code gets the imgnum
Next, someone clicks on #see_comments
We create a temporary form with the imgnum value in it as a hidden field
We submit that form, which posts the value and loads the comments.php page
Your comments.php page will have access to the posted variable (i.e. in PHP it would be $_POST['aid'])
$("#see_comments").click(function () {
$('<form action="comments.php" method="POST"/>')
.append($('<input type="hidden" name="aid">').val(imgnum))
.appendTo($(document.body)) //it has to be added somewhere into the <body>
.submit();
});
While the solution by Doug Neiner is not only correct but also the most comprehensively explained one, it has one big problem: it seems to only work at Chrome.
I fidgeted around for a while trying to determine a workaround, and then stumbled upon the second answer by devside. The only difference is the extra code appendTo($(document.body)). Then I tested it in firefox and it worked like a charm. Apparently, Firefox and IE need to have the temporary form attached somewhere in the DOM Body.
I had to do this implementation for a Symfony2 project, since the path generator inside the .twig templates would only work with GET parameters and messing with the query string was breaking havoc with the security of the app. (BTW, if anyone knows a way to get .twig templates to call pages with POST parameters, please let me know in the comments).
i think what you're asking is to get to 'comments.php' and posting aid with value imgnum. The only way to do this is to submit this value with a form.
However, you can make this form hidden, and submit it on an arbitrary click somewhere with jquery.
html necessary (put anywhere on page):
<form id='see_comments_form' action='comments.php' action='POST'>
<input id='see_comments_aid' type='hidden' name='aid' value=''>
</form>
js necessary:
$("#see_comments").click(function(){
$('#see_comments_aid').val(imgnum);
$('#see_comments_form').submit();
);
this will redirect to 'comments.php' and send the proper value imgnum (that i assume you are getting from somewhere else).
Actually, $.post() sends some data to the server. It does not cause any redirection unless you do it in your server side code which handles the POST request. I can suggest two solutions:
To go to comment page, instead of using JQuery post, you can simply use a 'anchor' tag - Show Comments.
Or if you are want to go through JQuery, you can use this code snippet: $(location).attr("href", "comments.php?aid=1");
didnt exactly solve the problem. but did manage to work around it. i had to do a lot modification to the JS to make this work, but the core problem of this question was solved by doing this:
$("#see_comments").attr({href: "comments.php?aid='"+imgnum+"'"});
this appended the aid value to the URL as #Doug Neiner initially suggested me to do.
Thanks a lot Doug for all the effort. I really appreciate. +1 and accept to your answer for the effort.

Categories