How to prevent manual URL change from reloading the angularjs application? - javascript

I'm trying to hide a sensitive data from the url from a incoming href redirect. The problem arises when the url is manually changed from inside the angularjs controller, which leads to the page reloading.
Catch: I do not have control to add code to the application that has the href containing the url.
For eg:
external url redirect"www.sample.com/subpath?sensitiveNumber=123456789"
I expect the url to be changed to
"www.sample.com/subpath"
I did try to reference solutions from the following SO thread:
Can you change a path without reloading the controller in AngularJS?
problem at using reloadOnSearch is when another url comes with a different url data as parameters, it would not reload with the new data.
another method I tried was to store the incoming data into a localStorage of the browser, so that it is not necessary to know the sensitive data when the page reloads on url change; but that would result in all the Async functions to be recalled, impacting performance.
Here is the routing snippet of the current code
.when('/subpath') {
template: '<templatePath>',
controller: '<controllerName>',
reloadOnSearch: false
}
thanks in advance

change get request to post request.So that data is not sent in the url.

Thanks for the responses. The only way we had to overcome this issue is provide and encryption service in between the service layers and performed decryption in our application front-end. As of this date, we do not have a correct verified solution for this problem

Related

react router with dynamic routes give 404 on a browser direct link

I have a React Front-end connected to Wordpress API and the routes are defined in clientside with React Router. When i use Link to direct them to dynamic routes they work fine. But when i use browser address bar directly to access the links pressing enter, or i refresh.i get
404 page not found
and i got to know that is because a direct call to server is happening and the there's no javascript to manipulate the react-router actions on the shared host when we have a PHP Server on that.
Thought about react-snapshot but its not going to suit the dynamic nature from the API.Please can anyone i give a possible way to go around this issue?
Check this out: https://github.com/rafrex/spa-github-pages
The concept might help you.
When the GitHub Pages server gets a request for a path defined with frontend routes, e.g. example.tld/foo, it returns a custom 404.html page. The custom 404.html page contains a script that takes the current url and converts the path and query string into just a query string, and then redirects the browser to the new url with only a query string and hash fragment.

Refreshing a page with cookies in Play

I have a drop-down selection of available languages. Currently, clicking on a language is mapped to a method in controller which updates the Play Session (which is a cookie under the hood) with the selected language and returns index page.
View:
English
Controller:
def setLanguage(language: String): Action[AnyContent] = Action { implicit request =>
val updatedSession = request.session + (("lang", language))
Redirect(routes.Application.index()).withSession(updatedSession)
}
As you can see, I redirect to index page and it's working fine. However, as the language selection is available at all times on my page, it may be clicked from /resource1, /resource2, /resource3 etc. and I would like to refresh that particular view instead of being returned to home page. I cannot simply get request.uri in the controller and refresh whatever it's pointing to because setLanguage() is mapped to its own route, so my request URI is always /language?lang=whatever.
So, how do I know that prior to invoking GET on /language, client was on, say, /items so I can reload items page instead of returning him to home page? Should I send a GET request with resource as a parameter (e.g. ?lang=en&location=items) to know which page to render? Should I make an ajax request and call window.location.reload() on success? Do I even need to go to server or can I simply update the PLAY_SESSION cookie manually from the client?
I'm using Play 2.3.7.
No you cannot update the PLAY_SESSION cookie from the client side, since it is signed by play with the application secret.
So I think the easiest solution would be, as suggested, to send the current resource as parameter and trigger a redirect.
There is an HTTP header called Referer that contains the url from which the request was made. As far as I know it's supported and used by all modern browsers when you navigate from a page to another.
You can simply redirect to that Referer url.
Another solution is to track in a session or a cookie all pages that are accessed by an user, by using some kind of interceptor in Global.scala or a custom Action builder that you use everywhere. Then in case of language change you can simply redirect to the last page that was accessed by the user.

How can I dynamically change the meta data of a MEAN.JS application before it loads the client?

Using the MEAN.JS framework, I am trying to dynamically change a page's meta data by modifying the app.locals variables in the app/config/express.js file. Does anyone have experience with trying to do this?
If it's an inner page being requested such as /t/elonmusk, I want to include the path (elonmusk) in the meta title and have a different title if they are requesting the home page. I tried simply using an if statement on req.url in the app.use function but this will not work because it sends the home page request ('/') after requesting '/t/elonmusk'. I can't find a way to see the original url that is being requested by the server.
Is there a better way to modify the meta data server side?
Edit: I'm using URL rerouting to remove the hashbang so the actual full URL is indeed being sent to the server.
Since the part of URL after # in your case /t/elonmusk is not send to the server, there's no way you could do this server-side, however , you can change the title on the client once the page loads.
I ended up solving this by storing the previous URL in a variable. If the current URL is '/' and previous URL contains '/t/' then I know an inner page is being loaded and can then update the meta data appropriately.

How to pass parameters in a url without page refresh?

I want to pass different parameters on my webpage without page refresh. Is this possible by any means?
For example:
My current webpage is "currentpage.php". After interact with some form elements -using jquery/ajax or any other- the url becomes "currentpage.php?x=foo&y=bar"
So that I can use $_REQUEST['foo'] or $_REQUEST['bar'] for some work on my currentpage.
If there's no page refresh, then no request to server. But behavior you are describing is similar to SPA. Sample here.
If you want to do so, use sessions and store your variables in
$_SESSION['foo1']=$_REQUEST['foo'];
In this manner you may be able to save your data and then pass parameters using javascript with window.location.href or by submitting forms.

changing window.location without triggering refresh

I have an AJAX form that submits GET requests. Because these are all GET requests these should be easily bookmark-able. Preferably I'd make my Ajax request, update the screen and then update window.location.href to be the URL for the new page.
Unfortunately this reloads the page. Is there any way I can get around this? Basically I'd like the URL bar to be a permalink bar, but it needs to be able to change to keep up with the state of the page.
window.location.hash is no good because that doesn't get sent to the server.
window.history.replaceState( {} , title, new_URL );
This will update the current page URL with a new one without refreshing.
Arguments:
Data object (must be one that could be serialized to text)
The new title of the changed window URL
The URL to change to (without refreshing)
The you could use the window.onpopstate = function(event){...} to listen to events when a user goes back or forward in the browser history and change things however you wish.
The hash is the way to go. Because, as you point out, changes to the hash don't get sent to the server, you have to send an async request to the server as well as updating the hash.
As a simple example, if your URL is http://server.com/page?id=4, when the user triggers the action you send an AJAX request for http://server.com/page?id=4, and set the page URL to http://server.com/page#id=4.
Furthermore, you have to have something to restore the state if the user reloads. This would usually be done by reading the hash value client-side and sending an async request to the server based on the state represented by the hash value.
if you want to do which works in current browser, you can't change window.location.href without reloading the page
your only option is to to change window.location.hash.
you can do that each time you make an ajax call. if you're using jquery, you can bind a function which update the hash each time an ajax call is made.
if you choose that you'll have to look for the hash on page load (actually don't know/think you can do that server side) and make that call to have your page on the state corresponding to the hash.
-- update
there is now an API which provide this functionality look for history.pushState, history.replaceState and window.onpopstate : https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history#Adding_and_modifying_history_entries
it's not availlable everywhere yet ( http://caniuse.com/#feat=history ), there is a few polyfill that you can use for the moment that will use this API if it's available and fall back using the url hash
Consider this JavaScript library: https://github.com/browserstate/history.js
Use jquery. It can do ajax requests. You cant use window.location because that is made to change the url.

Categories

Resources