User Extendable Front-end With Web Technologies - javascript

About My App
I have a spring boot application which I develop for desktop. The embedded server runs on end-user's computer, not on hosting provider's server. After server starts, application opens localhost with the default browser. Then the user is greeted with my front-end.
My Problem
I have some entity/model(will be provided by my back-end) which I want to represent on my front-end with a view (Which is just a part of my layout). Now, I want my end-user to be able to write his/her own views with JS, HTML, CSS while having access to this entity/model and somehow register this view to my application. Then my application should be able to insert it as a view when needed. But I have no idea how to implement such a system. My best guess was to use a iframe and embed it inside my layout. Which still begs the question: How to register it?
Questions
How would one design a system like this?
Is there any example application which does something like this?
Any tip or source is welcomed.
Thanks in advance.

Related

How to generate and host node.js app from a pre-made one on a website?

The title maybe a little confusing, so here is what I mean. I have a website where I can allow users to create discord bots, a node.js app basically, but I'm running into a problem. I have the node.js app (bot) saved in a folder on my computer, and for each bot a user creates on the website I want to generate a template of the app and change it's content based on the user's needs which then can be hosted to be online.
I just want to know how I can generate a template for this folder based on the user's needs, how it could be hosted on a service like Heroku, aws, etc., and what are some services/things that could make this process easier.
Here is an illustration to better show what I want to do:
I'm not allowed to embed images, so link it is
I'm not asking for direct steps, just asking for suggestions because I'm kind of lost right now.
If you have a better way of doing this, I would be more than happy to hear about it.
Thanks,
Maybe you can try:
Building a Docker-Image of your Node.js base app
Transfer the changes supplied by the user to a Dockerfile or such
Reference the base image in the Dockerfile as FROM...
Build & Push the images to a container registry
Use the customized images to host them in heroku/kubernetes/swarm etc.

back4app | How secure is the visible APPLICATION ID in website

I program with JavaScript, Node JS, html, css.
Building a web app I'm trying to figure out, how to use back4app.com as database. Starting with the examples, I've created a connection.
Now I'm wondering how secure this solution is? Following the back4app example "YOUR_APP_ID" and "YOUR_JS_KEY" are visible in the code of the index.html.
How can I guarantee security for all user data? I would like to save the sign-in data and progress of the users.

support to login with javascript or

I am developing a web application using Facelets and Entity-Controller-EJB structure. In the application, there are contents which are reachable only if you are logged. A bean checks the login state every time you click on a button/link for the restricted contents, and redirects you either to the selected page or to the login page.
I thought that this way is not safe, as you can write the link directly in the browser instead of generating it from a button that checks the bean. So what should I do? Is there a render option embeddable in each page or should I write a javascript function? In this case, what should I do? I have studied js fundamentals but don't really know how to implement this control!
Thank you for reading!
You cannot rely only on frontend to deny access to some parts of a web application.
This because all the HTML/CSS/Javascript is downloaded on users' browser, so they can read your code and your authentication mechanism, and understand how to bypass it (or just disable it).
More on this: Why are browsers allowed to display client-side source code?
What you need is implementing some security mechanism in the backed.
The simplest one is to delegate this to your webserver (here the instructions for Apache) and then use something similar to this to do login.
Another way is to have a proper backend: you send data to it (email/password) and it provides you a token that you use to access protected resources.
Or also, dinamically create your documents on server side, only if the user is authenticated.

Generating a PDF from a Tomcat-served webpage

I'm having issues trying to figure out how to generate on server side a PDF from a javascript-heavy webpage that is served from Tomcat (the application is Pentaho CE). The content is a dashboard that responds to user interaction. Pentaho (the application) replaces divs dynamically with various content through AJAX calls. I'd like to export to pdf whatever state the user has the dashboard at. There are no restrictions on what I can put on the server, but I need to avoid having the client install anything.
I've taken a look at this, along with a bunch of other google-fu:
JSP/HTML Page to PDF conversion
wkhtmltopdf seems to be a popular choice; before I start banging my head against it, I have a few questions:
Can wkhtmltopdf handle going to password protected jsps where authentication is handled by the application? Would the dynamically loaded divs break it?
Is there a way to perhaps return the client view to the server for processing? I read about screen capturing...
Another option that could work out would be to automate a local access to the dashboard on the server through a server-hosted web browser and generate a PDF that way...is this possible, given the constraints of Tomcat and password protection that's handled by the application? The javascript components that Pentaho generates cannot be accessed outside of the application.
Thanks!
EDIT:
Good news! wkhtmltopdf works! Kind of. I got past the password authentication through putting the login details through a query string, and I'm getting a pdf of the correct page now. The issue is that no javascript components are showing up... (they work for pages like yahoo.com, so maybe I'm missing something here).
If you have a lot of AJAX calls you should wait for them. Use the --javascript-delay x argument, where is x is the time to wait.

How to build an interactive Ajax Web Widget?

I am looking to create a web widget that can be easily integrated into any website using javascript and posts a form to my server, returns the data and displays the results appropriately. This will all happend in a small area of the host websites screen, like google adsense. I am aware that this is XSS and also the cross domain issues with ajax.
What I need help with is cementing the flow of such a widget. Has anyone done anything like this before?
The general process is:
Website embeds javascript - external js
Javascript renders a form
User submits form with POST data
POST data is sent to external server
Server responds and updates widget to display tabular data
Is this possible? How could it be achieved? Should I use / avoid using a JS framework such as Prototype / JQUery for this project?
If anyone knows any good tutorial resources for building widgets that would be great.
Any help would be greatly appreciated.
using a library like jQuery is not possible, since you don't know whether the website that uses your widget has the jQUery-library referenced.
If you use an iframe, and show something of your own host, you are able to use a library if I'm not mistaken.

Categories

Resources