I have a progressive web appliacation. on the home page i have a loging modal. If a user logs in the application reloads and now instead of the login button the server renders the user profile. now the problem am experiencing is that when i implemented the pwa, It caches the homepage and everything in it so the new page from the server is not rendered after the user logs in.
My application backend is in Nodejs(REST API) and is use javascript to consume the api but i use ejs to render the pages. How can i solve this?. For now i decided not to cache the homepage where i have the login modal. After doing this i realized the application is now not meeting PWA installation requirements.
You can cache everything in the service worker.
When you need to display different content for an authenticated user vs unauthenticated user you can render that as needed either in the UI code or even in the service worker.
A common example would be to show/hide the login, logout and profile link in the header. This is all doable with a few lines of code as the page is loaded.
These examples are mostly classList.[add|remove|toggle]. The profile might use a simple template and setting the innerHTML of a wrapper.
It is not that complicated in the end, I do this all the time for applications.
It sounds like you shouldn't configure your service worker to cache your normal HTML. Instead, you can use a service worker that will always go to the network when online, and will display custom "Sorry, you're offline" HTML when there's a navigation request that fails.
Here's a live example of following this pattern:
https://googlechrome.github.io/samples/service-worker/custom-offline-page/
Doing this will is sufficient to meet the "add to homescreen" PWA installation requirements.
Related
I have a website, running on Laravel 8 and Vue.js 3. Admin panel's front-end is completely on Vue, while guest users are served with Laravel's blade.
I have worries about unauthorized client's possibility to inspect admin panel's code on login page, as it's part of Vue.
Of course, client will not get any information from server, without authentication. All she/he can see is blank panel with no information at all.
So the problem is, client can analyze a whole functionality of code, view all routes that is used to manage site content. This gives full information to security researchers where to target, what to send and what to expect.
Also, I know about Asynchronous Components, but this is not answer here, as those component's are named by predictable names. So it's possible to get whole working code anyway.
If I will make subdomain separately, those subdomains can be also scanned and exposed. As managers are working from separate locations, denying of route, based on IP address is also not solution.
How to control this from Laravel, so only authenticated users can see panel's code? Should I try to fix this at all?
The way I do is by compiling two differents files using webpack and a logical test whitin the blade file.
So, depending on the user type, the page will load differents files, but I do not mind them staying in the public directory. I put every administrator request inside an administrator middleware.
You can make laravel moving files from public directory and an another one using some sort of control. Exposing your admin files only when an administrator request a page and until the load is done. I know this is possible, I never tested it myself.
I'm currently building a private app for Shopify. I've successfully passed the authorization step and get an appropriate response for it.
However, unlike other apps that I've seen, I'm not redirected to the Shopify's admin panel followed by my response page in the frame.
Instead, the redirection happens directly to my ngrok-generated address.
If you'd like to load your app within the Shopify admin then you can implement the Embedded App SDK.
I have a web service that is being invoked by an ajax call in the JavaScript of my page, but when users view the source, they can see the path to the ASMX file, which they can type into the address bar. I want users to be restricted in viewing and/or accessing the methods of this web service. I want only the JavaScript file to be able to use those methods. Is this possible? These users are not behind any log in.
Thanks in advance!
You can't.
You shouldn't be worried about users knowing your webservices URL, but you should protect what you return with a logged in key or something provided by your website.
The rule is: you don't want people to do something? Check that before on the server side and then return "you are not authorized" or another access error. Even if you try to do a very good job in your JS, it is very easy to monitor what you are accessing with the browser debug features: press F12.
I've got a windows phone 8/8.1 app which contains a page with an embedded web browser on it. I build a list of articles extracting information from the website and all of this works fine but note that I only use this web browser to display an article when a user has clicked on the item in my list.
The article in question provides a button to allow user to leave comments via twitter. At the bottom of each article there is a "Twitter Log in" button. When I click on it, it brings me to the authorizing page and it displays the news website as the app I want to authorize.
After entering my twitter credential and clicking on the "Authorize App", I get the following error:
Exception of type 'Microsoft.Phone.Controls.WebBrowserNavigationException' was thrown.
Then a Twitter webpage gets displayed display the following:
There is no request token for this page. That's a special key we need from applications asking you to use your Twitter account. Please go back to the site or application that sent you here and try again. It's probably just a mistake.
It definitely authenticated me as I can see my Twitter account picture but it failed to authorize the app.
I understand that my app is not the original website as it is a wp8/8.1 app but what I'm calling in the web browser is the page that contains all the original code from the news website and therefore you would assume everything would work as if I was calling the website directly from a browser.
If I call the website from the browser that comes with wp8/8.1, it works as expected!! Strangely enough they have the same functionality but using facebook and this works as expected.
I've had a look at html the "twitter authorized page" when called from my phone and when called directly from my web browser on my laptop and while I can clearly see the form contains an hidden field for authenticity_token with a value and a oauth_token with another value, they do differ.
I don't know if they're suppose to be identical but as I said, I don't understand why this wouldn't work as when I display the article in the embedded web browser, you'd assume that everything else that goes on after this would behave as it would in a regular web browser and when this 'authorize app' button is clicked, you'd assume that all values would be passed as normal and the app would get authorized but nope!!
Any suggestions on how I could possible resolve this problem?
Thanks.
I can't really tell what's going on, but it looks like you would have to implement Twitter OAuth. Luckily for you there is already a library that can do that - https://github.com/konradbartecki/TwitterAutherino
I am the author of this library, so let me know if you need some support or non-existent features.
Using GAE with Python for this project.
I am creating a page with a chart of statistics that updates(refreshes) itself (every 10 sec) using AJAX. It is my first time using AJAX.
What I am thinking is, that I should create a private page that will give the needed information for the statistics chart. Then I simply get the info using AJAX.
Is that the way to go about it? If so how do I make a private page in GAE, I don't want users to be able to go to that page.. Thanks
What are the security concerns for a production quality application?
AJAX is simply Javascript sending HTTP requests. From a server point of view, there is no way to differentiate between user requests and Javascript requests. So there is no such thing as "private page".
You can simply require a login for your private page and your AJAX handler and set the login level to admin. You may require a login for one or more Urls.
Edit
Set login: required, which will require users to login via their Google Accounts, but still all users with Google Accounts will be able to access it. Then in the AJAX handler check if the user is one of the users that you have given access to: https://developers.google.com/appengine/docs/python/users/