So I noticed when I ran my react app's production build's login screen from create-react-app that all of the source code for the app was available within the static/js folder. Basically, the code doesn't look any different from the code in my ide, on the production build.
I am wondering if there is a way to hide this behind a login screen? So that a user can't directly access these files unless the login is successful. I have looked around and was unable to find anything of use.
The js files from the production build should be minimized which would look a lot different than in your IDE. I assume what looks "the same" is looking at the source using developer tools. The solution for that is to not deploy the source map files (*.js.map). Those are the files that allow developer tools to transform the minimized code back to its original look.
Removing source maps makes it difficult for someone to learn from the code easily, but if there is sufficient motivation to do so, it can still certainly be reverse-engineered. There are also some parts that wouldn't be obfuscated much at all such as the URLs for API calls which would then give someone a lot more information to use as the basis for hacking attempts.
If you need to prevent seeing any version of the source for people that are not logged in, I would recommend building your app as two apps -- one that just contains the login portion and one with the rest. Code-splitting within one app won't do the trick (at least not without using a solution that is quite a bit more complicated to manage than the two-app option), because it just makes the download process lazy and it is still pretty easy for someone to determine what the other files are and download them. However, even splitting this into two apps only helps if you host the second app differently. This will require server-side protection that only serves the JavaScript files for the second app for a user that is logged in. This means either using a different sub-domain for the second app or at least a different directory on the server that has those protections baked in. How you would implement that protection depends on the details of your authentication approach and the technology stack being used on the server. Most likely, it means using a cookie set by the login process and then having the JS files for the second app served up by something that verifies the cookie before allowing the JS files to be served to the browser.
To overcome displaying your source code in production's build, try to build your app with
GENERATE_SOURCEMAP=false npm run build
Related
I'm currently working on a web project(js, html, php with no frameworks) using AWS technology, including AWS version control. I work locally with Xampp and when I push my code to the master branch there is a trigger that deploys the code to the Production environment.
My main problem now is that I need to manually change the development-production urls or use a html tag and relative URLs, and it's a mess.. When working on development my url is something like: "192.168.64.2/web" and when production it's "myweburl.com". So I need something that checks out my actual URL and change all those over the project. Something like a global variable with the URL to use.
I've read about using "dotenv" and "dotenv-webpack" for environment manage, but I do need to install it on the server, as well as nodejs, and configure .gitignore, and I expect an easier solution. I would like to avoid nodejs. I've searched about my question all around internet but I just find ways that do not convince me, but if this question is repeated just redirect me there.
Is there any secure approach just using javascript, php or a config file?
The objective is having something that depending on my URL (DEV, TEST, PROD) changes all the URLs of my project, and protect the other environment URLs from being seen.
Thank you
I am a relative beginner to working in Apostrophe. I'd like to start off by saying its a pretty great ecosystem and I've enjoyed the experience so far. However, I've run into an issue thats a bit confusing.
I've been using it to build a site for a client and I've run into a very odd issue. I have installed an instagram widget that I found via npm (https://www.npmjs.com/package/#kwsites/cms-instagram-widgets) and used it on my local host with relatively no issues, it worked and I moved on with my life.
However now I'm trying to deploy the site and the Instagram widget is not showing up in the browser when viewing on the server. Again the widget shows up perfectly fine in the browser when viewing off my local host which would indicate it did not install correctly on the server but after following all of the post install steps on the linked npm package, I am completely unsure of what to try next.
I have confirmed that the #kwsites package folder is in public/modules/ directory
Any help/tips from any of the Apostrophe experts out there would be appreciated.
I am using stagecoach for deployment (again, a great product) and mechanic to manage nginx. I don't know if any of this matters but the widget is making some API calls to Instagram, don't know if they would be affected by either of those tools.
EDIT: Inspection in safari yielded the following from my local host
And the following from my server
It just looks like the widget is not being generated and I cannot find any errors in the console. Note I can add and remove a widget, I just can't get any content to generate on the server (but can on local host).
So as noted in the comments, I believe the issue was due to instagram's legacy api requiring site authorization. However with Facebook pushing the new Instagam Basic Display API, the legacy is going to be killed at the end of this month anyway/apps will stop working. So I found this blog post and found it easily adaptable to an Apostrophe module. It requires signing up for Zapier but a basic account is free and its a really interesting tool. This solved my needs
I have started working on a project that needs a re-write. So, instead of doing a big bang release
we have decided to use Strangler Pattern which means the following
The current application (stack details below) will be running as is under the existing domain https://app.com
The existing (and new) features will be re-written in a new stack (details below) and deployed in parallel to the existing app (under the same domain https://app.com)
The requirements are
The end-user always works with the same domain https://app.com
Any existing feature migrated to a new app or a new feature is available by the under the same domain https://app.com
The stack and architecture of the current app is
HTML files with hardcoded data
CSS files
font files
PDFs
images
flash files
among other things.
Thee application is static. It has no database. It makes calls to other 3rd party APIs but does not have its own database (other than the files, and the images)
It sits under a directory and is served by running a web server (Apache) on a private dedicated server.
The stack and architecture of new re-write will
Use React or Gatsby
A standard build system that generates the static files
The data (PDF, Images) hosted somewhere else
Flash files (until we figure out a better way)
Given these requirements, I thought of having 2 versions of the app using some sort of load balancer such as Nginx and serve the URL patterns using a proxy.
For example
a request coming to https://app.com/productPage.html goes to existing app deployment (assuming it is not migrated)
a request coming to https://app.com/profilePage goes to existing app deployment (assuming it is migrated)
Now, considering this situation, I want to ask the following question
Is this approach looks sane? Are there better ways to deal with this situation?
How to implement such a reverse-proxy based system (considering Nginx)? (or if there is a better way)
I would love to hear out ideas and any resources/books/github that can help me learn and implement this.
Thanks a lot in advance!
I would recommend to create a v2 of pages that has been migrated to new functionality. And all links to the page should be updated to point to v2.
If anyone has done bookmark to old links, then those pages can simply redirect the user to the v2 ones by simply redirecting them using JS - window.location(url_of_target_page);
My understanding is that Webpack will bundle all of your code and its dependent libraries (such as React) into a js file. Then when someone visits your site, they will download this bundle which has everything and then run it. Does that mean that even if the visitor has visited some other site that ran on React before, he will still download your bundle that has React in it and run it? Isn't that causing an unnecessary download since that user already has React?
One of the uses of Webpack is bundling all your code in a file to reduce the time of download. In http it's much more efficient to make a request for a big file than dozens of requests for small files.
Answering your first question: yes, an user who has navigated to another react app will always have to download your scripts too.
And for your second question: no, it does not cause an unnecesary download. There are a lot of things that make your bundle unique and it would be very hard (and very insecure) to implement a cache between apps of different domain. Imagine a site whose react code has malicious code in it. You do not want the browser reusing this code in your own app.
For improving performance, however, you can use the browser cache to save your bundles in the client pc whenever they download them. Thanks to that, they will not need to download the scripts each time they visit your app, only when the bundles expire or change.
Maybe this link can help you understand how to add catching to your webpack build.
I develop an angular-php web application which I have it running online, for different users, on 5 different subdomains, such us:
sub1.mydomain.com
sub2.mydomain.com
sub3.mydomain.com
sub4.mydomain.com
sub5.mydomain.com
Problem:
My problem is that I still develop the web-app local and whenever I change files(php, js,tpl.html,css or when add new ones) I have to upload them on each subdomain.
Question:
Is there a way/library/API whatever that I can use to make something like package (with the updated or new files) and just call it from each subdomain url , and make the appropriate updates?
Or should I just copy them to each subdomain?
Do I make myself clear, in other words just like on cms systems that we press the update button and we update a component/module.
If anyone knows a way of doing that please enlight me. Thanks.
I tried to depict what i mean.
What you are describing is called deployment.
There are a lot of ways to create a deployment mechanism so there is not a single answer to your question. Depends of the tools that you are using, the servers where your app is hosted, etc.
If not, I advise you to use Git to make versions of your app (with Github or Gitlab) and automate the deployment process when you push a new piece of code.
You can make your own scripts to deploy or use online services (surely what you need because of "systems that we press the update button").
I can't advice you one particular service but you would find what you need in Googling "deployment automation github".
I would do it with config files. Considering the code for all my substations is the same. I would have config for each sub-domain and fetch the core files from the same location but serving different data If your structure allows it.