Suppose we have a login page where, in the first stage, we are asked to enter our email. We send this information to the server, which searches whether there is an account with this email, and if there is, our goal is to change the state of the page, to a page where the user is asked to enter the password for this account. If, on the other hand, there is no account with that email, the state of the page changes to one where the user signs up. And let's say that, for the sake of aesthetics, all this happens using the same url.
My question is, what is the correct way to inform the client's page to what stage to go into?
Sending the whole html code is an option, but this seems like it will put too much pressure on the server. Is there a cleaner way, that we can send less information, and still be able to have the same result?
I am new to django and web dev so please explain thoroughly.
For a browser engine submitting a form with email is a new page request and a new rendering of HTML after that. The source of new HTML code is your server with Django, so you should generate a new HTML with a relevant template and send it as a response.
Such user provoked events change a state of your application for a given user session, not a page.
For speed you can use caches for styles, for menus, for HTML snippets (headers and footers).
Also you can make a one-page application, but you must use JavaScript framework for it. Then your JavaScript code executing in client's browser can request concise JSON with necessary information instead of full HTML.
Then your JavaScript framework is responsible for a correct insert new dynamic HTML elements in the current document object model (DOM).
Related
Background:
I need to allow users to create web pages for various products, with each page having a standard overall appearance. So basically, I will have a template, and based on the input data I need the HTML page to be generated for each product. The input data will be submitted via a web form, following which the data should be merged with the template to produce the output.
I initially considered using a pure templating approach such as Nunjucks, but moved to ReactJS as I have prior experience with the latter.
Problem:
Once I display the output page (by adding the user input to the template file with placeholders), I am getting the desired output page displayed in the browser. But how can I now obtain the HTML code for this specific page?
When I tried to view the source code of the page, I see the contents of 'public/index.html' stating:
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
Expectedly, the same happens when I try to save (Save As...) the html page via the browser. I understand why the above happens.
But I cannot find a solution to my requirement. Can anyone tell me how I can download/save the static source code for the output page displayed on the browser.
I have read possible solutions such as installing 'React/Redux Development Extension' etc... but these would not work as a solution for external users (who cannot be expected to install these extensions to use my tool). I need a way to do this on production environment.
p.s. Having read the "background" info of my task, do let me know if you can think of any better ways of approaching this.
Edit note:
My app is currently actually just a single page, that accepts user data via a form and displays the output (in a full screen dialog). I don't wish to have these output pages 'published' on the website, and these are simply to be saved/downloaded for internal use. So simply being able to get the "source code" for the dislayed view/page on the browser and saving this to a file would solve my problem. But I am not sure if there is a way to do this?
Its recommended that you use a well-known site generator such as Gatsby or Next for your static sites since "npx create-react-app my-app" is for single page apps.
(ref: https://reactjs.org/docs/create-a-new-react-app.html#recommended-toolchains)
If I'm understanding correctly, you need to generate a new page link for each user. Each of your users will have their own link (http/https) to share with their users.
For example, a scheduling tool will need each user to create their own "booking page", which is a generated link (could be on your domain --> www.yourdomain.com/bookinguser1).
You'll need user profiles to store each user's custom page, a database, and such. If you're not comfortable, I'll use something like an e-commerce tool that will do it for you.
You can turn on the debugger (f12) and go to "Elements"
Then right-click on the HTML tag and press edit as HTML
And then copy everything (ctrl + a)
Imagine that in a HTML file I have a disabled button. I might as well use Firebug to enable this button and so do the submission.
My question is: is there any way I disable this button and not allow this submission even when I modify the disabled property of the button in Firebug?
Should I always have to treat this problem on server side, thinking that this possibility could happen?
Yes, you should always validate server-side . The client-side validation is just to facilitate correction by the customer and provide interactivity with him, thus preventing him submit all data and only then discover the correct format or a missing field and then be forced to repopulate all the fields.
The form may have been easily incorporated into another web site and then the action of the form directed to your website or the user inject some malicious code/data in the form. (See: Wikipedia XSS )
Any malicious user can easily bypass a disabled HTML button to activate it by making Firebug or worse, even if you could prevent it, he can simply create an HTML page and point to your destination URL in the form action, or even without creating a page, make an AJAX request. He may even develop a tool for this using PHP with cURL (or sockets ) library or any other programming language like . NET using a WebClient/WebRequest or Java with HttpURLConnection which in both cases are exactly what a browser would do to request a page or send data to another... (And this task can be done in 5 minutes by any Junior Developer)
You should never rely on the user and should never consider client-side validation as a part of security flow, since by being client-side, any information from there can easily be manipulated as has exemplified above.
I am trying to add a hyperlink to an area of another website requiring login to view files. The target website will be a photo gallery website which then will be accessible on my website.
My question is this. Is it possible to encode login information into a hyperlink therefore bypassing login when hyperlink is clicked? Please let me know your thoughts.
Short answer: Client-side, this would be near-impossible, considering you cannot send form data via a hyperlink (though you can receive it, but then that gets dynamically added to the URL via method POST.) You can do this, however, by using Javascript by using a submit button (if the page doesn't have protection against csrf) which can dynamically inject parameters via a form, but then you would need a POST request cross-domain which is where my point with needing admin access comes in;
If you were to attempt to do this server-side, you would have to have admin access to both sites, certainly not just to site A. From then you can inject parameters into the hyperlinks via server-side scripting languages such as PHP or Python, which would then add the required information to the form upon landing on site B. But you must (must) be careful, this opens up the potential of a serious security compromise depending on how you allow users to log in to your site. Assuming it's yours. Either way, this is still a bad idea, which concludes to my
Shorter answer: No.
I would like to have a html form that will have the user input values, i.e. module ID for a DEMO, desired dimensions of the mask and which environment the demo should be loaded. Then from hitting submit a new page would pop up with the desired information filling in the rest of the link.
I hope this makes sense, if not I can try to explain more.
Try writing a dynamic web page where the link in the HTML is constructed on the server-side based on the information provided in your form on the previous page. Some popular dynamic web page languages are JSP, ASP, and PHP. Note that dynamic web pages have to be hosted on a web server.
I'm creating a web page based on user input from a form. After the user sees the generated page I want to allow them to press the back button and make changes to the form. I would like to display the form as they had filled it out previously. What is the best way to get this behavior (with cross browser support)?
After the user sees the generated page I want to allow them to press the back button and make changes to the form. I would like to display the form as they had filled it out previously.
There is no need to add any clever fancy code; that is what browsers will do by default, unless you take active steps to prevent it, such as:
breaking the cache with Cache-Control/Pragma headers
generating the form page itself from the response to a POST (use POST-Redirect-GET instead)
generating the form elements from script
Cookie solutions are fragile and need special handling if you don't want two tabs open at once to get very confused. Make it easy for yourself: let the browser do the work.
JQuery has a nice cookie plugin which i used to keep exam data while the user browsed the site for the answers in place.
Store the saved information in cookies as delimited data. If the cookie exists, repopulate the form.
If you use document.formName.fieldName syntax, there are no cross-browser issues.
As a fall-back if cookies are disabled, you can store it on the server and do the same with AJAX.