I have a problem that is hard to describe. The problem is reproduced in 2 cases.
Old browser tab (not closed from yesterday's session).
After the token is expired, I redirect to the login page, and if I click back in the browser, the problem appears.
What is the problem?
On such a tab, requests are no longer sent, but the content is drawn from the old data. I don't cache data anywhere.
The query logic is simple. For requests i used axios.
const getSomeData = async () => { const res = await axios.get('/url')}
useEffect(() => getSomeData(), [])
On such a tab, useEffect does not run. Reloading the page doesn't help. hard reboot too.
In the network tab, I see my request, but it is not marked as Fetсh / XHR and the very first one is loaded, before the scripts are loaded
sceen all request
headers request
Also in this request, it goes to the localhost and not to the domain, and the token is not sent.
In preview i get the following:
preview request
I think that javascript works because the logic of pressing buttons, opening modal windows works, but requests are not sent on such a tab. But due to the fact that requests are not sent, it does not work, I cannot try to process such a tab
I tried to search this error, but I did not find anything that would help my problem. I also failed to process through useEffect.
Related
I have a simple react app, and I'm trying to redirect the user to a login page if they came directly without logging in.
App.js
useEffect(() => {
if (document.referrer === "") {
window.location.replace("../loginpage.php");
} else {
console.log("user came through login")
}
})
This works perfectly for Chrome and Edge.
The problem
When I refresh the pages, Mozilla directs me back to the Login page whereas Chrome and Edge stays on the same page.
For some reason document.referrer is not working as expected in Mozilla. Any help is appreciated. Thanks !
Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1324860.
Though what you are trying to do it quite odd from a user experience perspective. Usually you would only redirect to logon if they didn't have a session, and you would make an API call to check that server side.
Typically, relying on referrer for anything at all raises flags since the referrer header is easily manipulated by the client.
The React website has following requirements:
Stay logged in when opening a page of the current website in new tab.
Log out if browser is closed and reopened.
Stay logged in on page refresh.
IE11 support :(.
If I keep auth token in sessionStorage, it meets the 2 requirement but not the 1.
If I use localStorage - 1 but not 2.
If I use:
window.onunload = () => {
localStorage.removeItem('authtoken');
};
it meets 1 and 2 conditions but it also clears storage when I refresh the page which shouldn't happen too!
This solution to check if the page is refreshing can't be used in IE11
https://stackoverflow.com/a/53307588/12994741
So how should I keep the auth token? Any way to make it? Maybe it's possible to prevent unload event on refreshing in React?
You can use session cookies.
It keeps its value when you open a same website in different tabs.
They are expired once the browser exits.
https://stackoverflow.com/a/8894280/15881471
It keeps its value on page refresh.
It works for IE11, though there are some caveats.
https://github.com/cmp-cc/vue-cookies/issues/29
I'm back (Refreshing React with Express server). I am hoping to figure out this issue.
Quick recap: I am trying to refresh my react website. If I go to www.domain.com/about I will get the:
Not Found
The requested URL was not found on this server.
same if I click on the button to get to /about and hit refresh I will get this error.
My goal
To be able to go to my site, click on another page (i.e. domain.com/anotherpage) hit f5 for refresh and get the same page.
I understand:
The problem is that React just changes the URL when I click on my React app button or link to go to a different page. Then when I refresh it looks for www.domain.com/whatever. Since there is nothing for it, it returns 404.
I also know that if I can get my React app to direct all traffic to index.html. React will handle the rest.
What I have tried:
In my previous post, it was suggested to use my hosting site to redirect traffic to index.html. However, my hosting site lets me adjust the DNS for subdomains but nothing after it. (ie. www.subdomain.domain.com works fine but www.domain.com/whatever doesn't) which I expected but I thought I would try.
I do have an express app however, it doesn't serve the files it just waits for a button to be pressed and then does stuff. I don't need to the server to run to have the website up.
I have tried creating a route in express for this and it looks like:
app.get('/*', (req, res) =>{
res.sendFile(path.join(__dirname + '/public/index.html'));
});
I still get the same 404 error with this.
I have also added an index.html to my server. Thinking it needed the .html file to send. (Thought it might be good).
What I don't know
Where does React look for index.html in production? When I look in the build files under asset-manifest.json there is an "index.html": "/index.html" line of code. Is there where it finds the index file? If so, can I change this to go to index.html on every page request?
Obviously I want the user to be able to refresh the page and get back to it. Can someone point me in the right direction?
Thanks in advance!
I am using Testcafe to test my application. I have a page on which there is a button. When I click the button the page redirects to another page which contains a bunch of images and where a server call happens. Then when the call has been resolved, the page redirects again to another page.
I am trying to test this middle page which shows only for a few seconds.
I want to test that the URL was changed when Page A went to Page B.
I want to test that the page was shown and images were shown.
The problem is that when I automate click on the button on Page A, it goes to Page B and then after a few seconds it goes to Page C and then the test executes and just hangs.
I have tried setting the
await t.setPageLoadTimeout(0)
.wait(200000)
.eval(() => window.location.pathname)
.expect(window.location.pathname)
.contains('/gatheringDetails', 'The response was ok', {timeout: 500});
So, I can control the page load timeout to help catch the middle page but it doesn't work.
Can someone help? Please.
The solution is to use a request hook that will listen to page B request and intercept the response. See Intercepting HTTP Requests
So i used Intercepting HTTP Requests and introduce a delay in response so i can stay on the page B longer to test the visuals on it.
I have the following code I execute in Chrome with Tampermonkey, which I use to login to digitalocean.com.
setTimeout (function() {
document.querySelector("input[type=submit]").click();
}, 3000);
For some reason, this code sometimes work and sometimes it doesn't: That is, sometimes I'm logged in and sometimes (most cases) I get DigitalOcean's 404 webpage.
My login details are already saved in local storage and appear on the form.
By principle, this problem can be reproduced by registering to DigitalOcean, installing Tampermonkey, and executing the code with it, with the match:
https://cloud.digitalocean.com/login*
Might something be missing to ensure human-like behavior in the eyes of the machine?
OK, it took some digging, but I see what's going on.
There is an authentication token in the form.
If the token is not what the server expects, it kicks you to a 404 error at https://cloud.digitalocean.com/sessions.
If your browser loads the login page from cache (usually because you got to it by clicking the "back" button in your browser) you'll be submitting an invalid token (the one you got back when the page was put in the cache).
Sometimes it's wrong for some other reason I haven't figured out.
To deal with the cache-loaded page issue
I'd edit your script check if the page was loaded from cache, and refresh the page instead of triggering the click event:
if (window.performance.navigation.type === 2)
{
location.reload();
} else {
document.querySelector("input[type=submit]").click();
}
The other issue is probably an issue with DigitalOcean's back-end
I'd recommend that you report the fact that their login page seems to occasionally get a bad authentication token, as the issue can intermittently be reproduced by clicking (with the mouse) on the "Log In" button of a freshly loaded copy of the page.
(I wouldn't mention the script or they'll blame it and then you'll be out of luck.)
In the mean-time
As a stop-gap until they fix their issue, you could make a new script matching https://cloud.digitalocean.com/sessions (it sends me to that page exactly, but add a * if it's needed) that sends you back if you came from the login page, and got a 404 error:
if (document.referrer.startsWith("https://cloud.digitalocean.com/login") && document.title.endsWith(" (404)"))
{
history.back();
}
Note that document.title.endsWith(" (404)") only works because the contents of their 404 page's <title> tag ends with (404).
It seems to be a bug in Tampermonkey as the reported behavior doesn't happen in Greasemonkey.
Anyway, 3D1T0R's answer provides an interesting workaround with the current situation (would thumb up if I could).