So I am trying to find a way to send data from the back end to the front end securely.
My application is about posting images, and each post has a name, id, comments, etc..
The problem is that I want to prerender all my posts using pug, but also send all the data of those posts securely to the front end. I know that you can send data using the dataset attributes, but I don't want a client to see this data - I want it to be secure.
I just want to know if this is even possible, and if there is a secure way to implement this
E.g. Server sends data of 50 posts. Those 50 posts can be accessed in a front end js file, but cannot be accessed through the console in inspect element, or any other way.
Once the data hits the browser (e.g. front-end) it is available to the user. You can see the data in the Network tab of the dev tools in Chrome. I am not to sure what you mean by securing it in the front-end. It seems like you are trying to override browser functionality which is not possible. You can use javascript to a certain extend to stop people from getting the context menu on images etc, however, if a users looks hard enough it is easy to get the data that has been loaded.
Related
Im kind of new to this and looking to expand pulling API results and displaying them on page, whether it's from a blog resource or content generation.
For example, I want to pull from VirusTotal's API to display returned content. What is the best way to capture that in an input tag and display it in a DIV. And what if it were an option to pull from different API's based on drop down selection?
An example of the API to pull content would be here https://developers.virustotal.com/reference#api-responses under the /file/report section.
To call the data from the API, you need to send a request. However, there is a problem with CORS. Basically, you can't call the website from inside your web browser from a page on your local machine, because your browser blocks the request. The web browser will only allow calls to and from the same server, except for a few exceptions.
There's two ways to approach this.
The simplest one is to make a program that calls the API and outputs an HTML file. You can then open that HTML file to read the contents. If you want to update the info, you would need to run that program once again manually. You could easily do this building off the python they provided.
The other, little bit more complex way, is where you host a server on your PC. When you go to the webpage on that server, it sends a request to the website, and then provides the latest information. There's tons of frameworks and ways to do this. For an absolute beginner on this subject, ExpressJS is a good start. You can make a hello world program, and once you do that you can figure out how to call the API whenever a page is loaded, and display the results.
I am a frontend guy, but I am working on a project in which I need to process lots of data in my nodeJS backend (my front is reactJS).
But once the data that needed to be processed in the backend is processed, I have the choice of either reprocessing this data in node or in react (knowing that in the end, I need this data in frontend).
Example: An array of links has been created in my backend, but I need to extract a single link from this array, in order to display it in React. I have the choice, pass the array to react and process the data there, or do it directly in node.
Is there a common fashion to fix this dilemma? What should I take into account to make a decision?
It's not good to send excessive information from your backend to your frontend. If you're going to send data to your frontend from your back-end and a lot of it isn't going to be used, then it's probably best to adjust your backend so that it only returns information that's going to be actually used by your frontend.
Alternatively, if your frontend isn't going to use all the the information sent by your backend right away, but potentially might use it later (based on user input), then it's better to send all the data from your backend and process it on the front end as needed to avoid making future requests to your backend.
Taking an array of links as an example:
If the user requests to see a link based on certain criteria, and that's the only link that they are going to see (based on the design of your application), then your backend should process that request and return only the link that your user wants to see to be displayed on the front end.
If the user can request to see a link, but could potentially request to see another link later, then your backend should send a full array of links that might need to be displayed at some point. Then your frontend can display the links at the appropriate time without having to make a request to your backend each time the user wants to see a new link.
In my opinion, if the logic doesn’t need to be done by the browser, then do it on the server. It will help you with reducing the size of your app in the long run. You want your final, bundled .js file to be as small as possible. That’s just one small step you can take to contribute to that.
The short answer is that it all depends on your business logic. Regarding how best to handle an array of items to be sent from backend to front-end, if a user will only ever need to see this one item, for example, then by all means, have the backend parse the array of data on its end and send that single item to the client front-end. If, on the other hand, you anticipate that you'll need to work with an array of items to be presented to the user at some point in the app, it would be reasonable to simply have the backend send the array of items. Furthermore, that array of items could be, for instance, a filtered version of the items that would be relevant to this particular user.
Context:
The page I'm making should take in graph data from a JSON format from an outside application/webpage. Queries to Parse.com will gather the initial data, so I can avoid setting up the graph page with a connection to the Parse database.
A webpage OR android application currently submits a request to the Parse system and get back a response formatted in JSON, then it must send that information to a webpage with graphing JavaScript for it to read and build the graph from.
I've explored the possibility of sessions or cookies, but it doesn't seem compatible with the android application end (unless webview can do something?). GET looked like a good alternative originally but the size of some URI query strings would easily be too large. POST, upon review, is impossible for me to use in this case.
Question:
Is there still another way to send this information without AJAX, PHP or some other server-side code? Or would i need to scrap the idea as it stands, and just implement it all on the graph page anyway?
My Angular application loads JSON files as search material using $http
$http.get('my.json').success(function(data){ ... };
Unfortunately, this method loads the JSON file in to the browser and allows the user to see it's content.
Screenshot from Safari
I'd like to hide that file from the user.
To refine my question. I know that I won't be able to totally hide that data from the user.
A user can easily write a script to scrape the data off my site.
I just don't want to hand those files to the user so easily, to just let them sit there for him to just copy and paste.
Everything you sent to client is anyhow visible by client. There is no way to absolutely hide it from him.
All you can do is .zip or encode data on server and unzip or decode it on client. But even in this case all decoding mechanisms will be available to user and if he wishes and has some skills, he can decode it and access all data you send him.
UPD:
Ok, you want to uglify your data so client couldn't see it simple way.
You need to somehow encode data on server, send it encoded to the client, and decode on client so you could use it.
Checkout lz-string - it's js library that can archive / unarchive json strings, converting them to binary format, so data becomes unreadable. And it's pretty fast (I haven't noticed any delays encoding/decoding 2Mb strings - I use it to compress data and store it in localStorage).
It's as easy as LZString.compress(JSON.stringify(data)) to compress json and JSON.parse(LZString.decompress(data)) to decompress.
Only thing you need in addition - to find a server-side library that uses exactly this format. If you use NodeJS at your server, you can take lz-string itself. Otherwise, quick googling gave me solution for php - I think it's pretty possible to find solutions for other languages..
If you want the user to see only parts of the document, you should filter it on the server.
Create some kind of service/Api-function/etc. which loads the document and pass it the user information via ajax request. Now filter it depending on this user information and return the filtered data.
I am working on a seemingly simple Facebook integration to allow my client (a local restaurant) to display their daily specials on their website. To make this work properly I need to sort through their posts, find the most recent post that has a certain string of characters (to distinguish from other posts they make), and display the post on the webpage. I know how to do this part but I am having trouble getting the data in the first place.
My question: How do I access the data for this Facebook page's posts? This needs to work
Without logging into Facebook
Preferably client-side
I would also like to use the JSON from the Graph API but I need an access token according to all the research I have done so far which would force me to go server-side. The Facebook social plugins are not specific enough to do what I want. Any help using the Graph API or another method to retrieve the page's posts is very much appreciated.