Express.js partial: Pressing 'back' in browser - http

My tech stack: Node.js, express.js, backbone.js.
My web app is a two page app (you can hit two express routes to get fully rendered pages). Let's call them page A and page B. When I load page A and click on a link to load page B and then I press the back button, I only get a partially rendered page A (the part of the page that I can also deliver as an express.js partial with res.partial (not partial() within a template) via XHR).
From what I've debugged so far, pressing back in the browser doesn't hit an express route. When I inspect what Javascript is loaded there are no resources loaded. I was thinking I could do some debugging with the fronend routes (I'm using Backbone.js), but all I see is the partial HTML loaded on page A with no CSS styling and no JS resources.
Any direction on how to debug this issue?

Related

Broken styles issue with React-snap

We have created a web app using react native web. We want to add a server-side rendering to our app. We have added a code to render the page server-side, but it's not working, I can see the blank white page in the network preview tab and the server only sends my index.html file as a response.
I found some articles that are suggesting to use prerendering of the app.
To add prerendering to our app I tried react-snap (https://www.npmjs.com/package/react-snap), a snapshot is created but when I started the app it's only loading the first page(landing page) of the app, No events are working on this page(click events) and styles are also missing, there is no way to navigate in the app.
Expectations: The app should be server-side rendered, I should see the snapshot of the page in the network preview, the server should return a snapshot of the page in the response.
Can anyone suggest a solution to fix this?

ERR_SSL_PROTOCOL_ERROR with image sources Razor pages

I am currently working on an ASP.NET Core application with Razor pages. The API endpoints are hosted in pre-production server. When I get an image link which is stored in the same server as the apis, through api, and want to display it in the razor page the image can't be shown due to ERR_SSL_PROTOCOL_ERROR. When I inspect element and get the src of the image tag and open it in a new tab it will open. Also if I use that source in a html page it still opens. Since the pre-production server does not have ssl certificate configured, is there any chances the PageModel abstract class of the razor page to have any validation on that, since it is working on plain html?
EDIT:
I am providing from the API the image tag as html:
<a href ="http://imagesourceIPExample">
<img src="http://imagesourceIPExample">
</a>
I am getting that string from an ajax request
$.ajax({
//ajax call params,
success: function(data){
$(`#messageDiv`).append(data.message);
}
}).
Now when I inspect the page and click the link in the anchor tag I would open fine. Also if I click it from the view. But the image isn't showing and the console shows that SSL_PROTOCOL_ERROR. And image link is http.
First of all, razor PageModel doesn't validate image loading.
It seems like you are working with secured https site and then when you append plain http image links, browser refuses to load them due to its Mixed Content policy. But when you load image in a separate window it will load just fine because the "mixed content" problem is gone, you load only http resource, no https involved.
Consider converting you image links to https, it should fix the problem.

Route to /login and /{PageName} in an asp.net app not working

In an ASP.NET Blazor App with Identity I have a page with the page routing
#page "/{PageName}"
When I change the page routing of the login page in Areas/Identity/Pages/Login.cshtml to
#page "/login"
and enter the URL 'localhost:44397/login', the login page shows up as expected.
However, if I follow the link in header bar that I have adapted in LoginDisplay.razor to Log in, the URL changes to 'localhost:44397/login' as expected, but the login page does not appear. Instead, the above page is rendered, where the PageName parameter is set to 'login'.
Endpoint routing obviously works if the URL is entered manually but fails when clicking a link, as if half of the routing middleware would have been bypassed. I tested this with a fresh Blazor template and have no more ideas where to look for the bug.
Accoring to this article, a click on a hyperlink in a Blazor component is intercepted automatically. While the URL in the browser is updated, the request is not sent to the browser but the page is renderd by Blazor. In my case, Blazor can find a suitable page (the one with the #page "/{PageName}" directive) and renders it.
To force loading of the page, NavigationManager can be used:
Login
The href is necessary to render the link with the typical layout. It's probably not the most elegant solution but at least it works.

Page Inspector doesn't handle New Windows from Javascript

I have an ASP.NET application I've inherited and am trying to debug. I'm using Page Inspector in VS 2012 Express to work on a particular page that has lots of JS in it. Unfortunately, that page is opened as a popup whose URL is dynamically generated by JS. Page Inspector does not seem to handle this well.
If it just popped out into the new window, that would be OK because I could then get the URL and paste it back into the main PI window. However, it seems to lose the session reference when it pops up, because it logs me out of the application, and when I log back in I lose the location I was at.
I've tried changing the function that does the URL generation / window opening to a window.location.href, but that doesn't seem to work either; it just stays on the same page.
The references to the URL generation functions are done in such a way that it would be a lot of work to switch it from calling a JS function to just a straight link on the page, especially since I would have to switch it back for production.
Any ideas on how I can configure Page Inspector to handle popup windows better?
Thanks.

Session variable trounced by Chrome and FF

In my asp.net web application on page load I grab the current page url and store it in a session variable to track which page the user is on so they can return to it if they enter an admin area, do some navigating around etc. They can then click the return button and will be taken to the page they were on before entering the admin.
This all works in IE8; however in FF and Chrome when in the admin the return link redirects to the custom 404 page I have for the web app.
For testing purposes I added the code I wrote below in with my page load event:
Response.Write((string)Session["navurl"]);// displays "http://somedomain.com/customerror/default.aspx"
Session["navurl"] = currentUrl;//ex. currentUrl = "http://somedomain.com/contact/"
Response.Write((string)Session["navurl"]);//ex. currentUrl = "http://somedomain.com/contact/"
Again this works without a problem in IE, but in FF and Chrome on page load the session variable displays the 404 page link and after setting it displays the correct link. I used fiddler to see what was going on and Chrome is throwing a 404 in the GET header for the favicon.ico file, which I am not using in this web app.
I added the faviocon file and the link in the head of the site.master file and Chrome and FF now work fine; I'm still not sure why this is happening. Anyone have an ideas why or how my Session variable is getting overwritten by Chrome or FF?
As a side note I have stepped thru the process debugging and currentUrl is the proper url.
Well, if you are using the .NET handler to serve all pages (ie. all file extensions), then it makes sense that when your browser will make a request for favicon.ico (google to understand what this is), the server fails to find it, and it redirects to a 404. Which in turn modifies the Session variable as "the last page served" : 404.
Now when you render you admin page, and query the Session for "the last page served" what do you get ? "404".
I'd suggest checking the URL to see if it reffers to a user-navigationable page before storing it in session
if (IsAUserPage(currentUrl)
Session["navurl"] = currentUrl;
When you access your admin, are you preserving your session? Using Fiddler have you seen another request for your page? Look for image tags with src="", or iframes.
You must set the Session var on every front end page, but, you never must never set it on the admin pages, only getting to build the "Back" link. If you are using Global.asax events, take care to avoid change the var when serving admin pages.

Resources