Preventing passwords showing in source code - javascript

I am doing a password manager web app (like LastPass etc), one of the things that has occurred to me is that after using PHP to retrieve the passwords from a db and decrypting them and then using JS to display them in the UI, the variables containing their passwords are visible if someone looks at the source code. Even if I did not use JS and used echo instead it would still be in the source code. Does anyone know of a, hopefully not too complex, way that can prevent the passwords from being in the source code?

If you're talking about the HTML source code, this is normal. But there is a few way to avoid it:
If you just want not to have it in your HTML when it is received by the user, then you can implement it via an Ajax request in javascript, to update the DOM with the text.
If you want that when the user do inspect on the page he doesn't see the password you can use an input and set in javascript the value of it. then you set the input as disabled so the user cannot modify it. You can even change the type as password when needed so it's displayed as ****** when you want to hide it.
Another way could be to add in javascript a css :after and tu put the value inside it. But it will still be visible somewhere I think.

You can use JavaScript to send an HTTP request (using xhr or fetch) to your backend, then you can manipulate the DOM to show the password.

Related

How to prevent users from embedding custom HTML

In my site, there is a div that gets updated dynamically by my system.
Through Ajax, that div contents is retrieved and sent to my server.
This is done through
$("div").find("script").remove();
var data = $("div").html();
////ajax request
How can I prevent users from adding their own HTML via inspect element, I've done so through the script tags but not sure how secure that is.
Note, the custom html must be removed, not converted into html entities or url encoded or something
I don't think there's a 100% secure way, but is there a way to make it difficult at least for users to do so.
If users add custom html through inspect element, it shouldn't be removed. Only when the ajax request is made, any custom html should be removed
Mutatiion Observer can help to prevent changing html via dev-tools.
However in my opion is better to expect correct data on backend side instead of attempts do something extra on frontend which is oftenly untrusted zone.

Is getting an echo'd username using Javascript with display none CSS bad for security?

I have a PHP page that can only be accessed by logged in users. Each page is unique to that particular user and is used for collection tracking.
Through PHP I have the username and user id echo'd and then wrapped in a display:none div.
I then have a couple of ajax calls that pass the username and user id when they do specific tasks (update collection, add to, delete, etc etc). This is passed to a PHP file which uses prepared statements.
I do this since I can't seem to find another way to grab the username and user id in Javascript.
Since each page is accessed only by that particular user, I'm thinking it's safe since you can't get access to another users username or ID. However I can't help but feel that this is extremely bad practice. I'm completely open to suggestions on this!
EDIT: I should also point out that I am using WordPress for authentication.
One thing to think about is ensuring you sanitise the values when you read them. For example what would happen if someone manually set the username in that div to DROP ALL TABLES; - a sql injection attack. Also why not have it as a JS variable by echoing it in a script rather than a hidden div? Otherwise it seems fine, indeed most web applications serialise data into html template to be read by scripts.

How to ensure HTML input remains required?

If you create a form using HTML inputs and make the input required using the "required" attribute (<input type="text" required>), what is stopping a user from manually deleting the attribute by using their web browser's built in developer tools or by loading JavaScript by some other means (such as a bookmarklet)?
In other words, how can you ensure the required input remains required?
The client/browser has little control over the request that is sent to the server. A request can be constructed and passed to the server without involving a browser, therefore its the server side code's responsibility to ensure that the required parameters were provided with the request (as well as validate the parameters).
You need to consider a few things:
Everything on the client side can be modified by the client: nothing is stopping me from using my browser console or modifying the source code to change parts of your page, and you can't do anything to stop that. For instance, look how many upvotes your question has:
Obviously that doesn't actually do anything, but that's because all of the heavy lifting is done by Stack Exchange's servers.
Even if you make a field required, people can still fill in the field with a space or asdf and move on. Just because input is required doesn't mean that it is valid.
So, with that in mind, realize that you'll need to work on the server side to validate input. People can't mess with servers (easily) and it's the safest way to validate input. You'll need to deal with validation when your server receives the data because the client side is always vulnerable to user modification.

Javascript form hidden visible actions

Im trying to make a "coupon" form. So that when my users go to the text field and type in 'hello' persay it then in turn will open the form that corresponds to the code. I am going to make various words/codes to use for the coupon. I'd like to make it so that there is no way they can bypass this, and that they can not see this javascript if they click the view source file. Can someone help me. It seems simple I believe, though I do not know anything about javascript. so //comments would be perferred so that I understand each command and statement happening for further use.Thanks ahead of time.
You can't hide javascript because the javascript has to be accessible for the browser to execute it. And if it is accessible to the browser then it is possible for anyone to access it manually through the URL.
If you don't want users to see the code that handles coupon values, you need to do it in the server-side, not in javascript.
You can use javascript to make an ajax call that sends to the server the coupon value entered. The server side can use this value to choose and return the HTML that corresponds to the coupon value. But the code that checks the coupon value has to be in the server-side if you want it to be hidden.

Popping up a window for the user to show some data?

I have a webapp where my users might want to get some data from me in xml format. The flow I was thinking of:
User clicks a button named "export"
I generate a long xml string using javascript.
Pop up a new window and just paste the xml string into it.
I would prefer saving the xml string into a text file for the user, but I don't think this is possible with javascript (security reasons).
Are there any other best practices for doing something like this? I guess this will work fine,
Thanks
You can add a hovering text field to the page and paste the XML into that. To make things more simple for the user, set the focus to the field and select everything (so they only have to press Ctrl+C).
If you can access server-side pages, you can generate the XML string using javascript, make an ajax call to give the server your string, then make the user download the generated file.

Categories

Resources