[HELP] Technical Question on CEF Browsers

[EhsanFox]

Hey Everyone, I was creating my own framework from scratch, and I wanted to use CEFs as HUD's and obviously Login pages and stuff
As I was going through, I wrote the perfect browser manager for myself,
But for some reason, my events from the JS to LUA are not being triggered,
Even tho I opened the dev console, and I saw that "window.mta" with the "triggerEvent" function inside that exists.

So Idk, is this normal to not be able to trigger an event on a remote URL?
And if not, I was thinking about the structure of how it should be,
I know that if it's true, then I should be able to load my login/huds of the browsers somehow and let them connect to the server as well

First Solution:
- Load the remote login page -> React web page API calls to Backend -> Backend talks to MTA Server 
But obviously, how? The MTA doesn't provide us with any resources to at least create an API server on a server-side resource, so we can manage that, and it's impossible 
Or maybe you have an idea about what I can do in this solution

2nd Solution:
- Load a local HTML Page that has an iframe inside it, set the iframe to max width and max height, load a JS file as well, and inside that JS file, provide a bunch of functions written, such as loadURL to change the URL of that iframe, etc.
Now this custom HTML loads, works (at least fine, I have to change my frontend obviously, do not know if it's good to use for HUD's either. But it works, and in this solution, as I am writing this, I can't feel sorry for myself,
But I don't know how to load that HTML File XD
I have a resource called "[core]", inside this has a folder of resources called "browser", and inside that we have a folder called "ui" with index.html and other files inside it.And I have no idea how to load it, or  even how the loading of the JS scripts should be written inside it

If you can help me with my solution, and recommend me a way via this solution, I would appreciate it.

[IIYAMA]

46 minutes ago, EhsanFox said:

So Idk, is this normal to not be able to trigger an event on a remote URL?

It should be for security concerns. You wouldn't want to visit a site that is designed to look for 'new functions' and starts call them.

 

46 minutes ago, EhsanFox said:

But obviously, how? The MTA doesn't provide us with any resources to at least create an API server on a server-side resource

If you take a look at this page:
https://wiki.multitheftauto.com/wiki/Meta.xml
You can see that it is possible to call an export function over http

Quote

http: Can the function be called via HTTP (true/false)

What syntax do you need for calling an export function?

http://<your IP>:<your port>/<resource_name>/call/<exported_function_name>

https://wiki.multitheftauto.com/wiki/Resource_Web_Access

 

How does authentication works?

https://en.wikipedia.org/wiki/Basic_access_authentication#Client_side

A 'basic' authentication should the way to go. It requires login credentials of an MTA user account with the correct permissions. This has to be passed every request.

 

When you connect through the browser: 
http://127.0.0.1:22005/resourcebrowser/

You more or less understand what to expect.
 

There is also a section about 'Router', which is new. Might be useful.

https://wiki.multitheftauto.com/wiki/Resource_Web_Access#Router

 

---

 

For inspiration https://community.multitheftauto.com/index.php?p=resources&s=details&id=18781
This resource is about fetching data from MTA to a (remote) host. This is the opposite of what you are trying to achieve, but probably still useful.

• Fetching from MTA to remote host
• Creating a MTA user (installation_s.lua) that only has the correct permissions.

 

 

 

 

[EhsanFox]

Quote

There is also a section about 'Router', which is new. Might be useful.

Seems like there are a lot of things that I must see and learn again from the docs, thanks for pointing that out. 
With this information, I can update my frontend code to connect to the API resources I will create, which will handle everything; there will be no further events between the browser and the client.

But as I wrote a test API server, it seems that I have to pass in the Basic Authentication on every request,
Since I won't be using the default account system, it's fine for me to just pass a basic token, but generating it is the question for me at the moment. As you provided the link on Wikipedia, I don't know what I should send in the headers. There was a client ID and a client-secret-key. Should I just create an account on my MTA server, place the username instead of the client ID, and the password instead of the secret key, and generate a Basic auth key?
Then, what header should I send it with?
Because if I send a normal GET request on a resource I created with httpRouter, it asks me for username and password on my alert, I put the true creds, but after submitting, I see the server logs saying that I logged in, but the API asks again.

So a little help on this part would be much appreciated.

[IIYAMA]

1 hour ago, EhsanFox said:

I see the server logs saying that I logged in, but the API asks again.

Not sure what kind of backend you use. But here is an npm packets that could be used for inspiration. Probably some dependencies are deprecated.

https://github.com/4O4/node-mtasa/tree/master

The authOptions:

https://github.com/4O4/node-mtasa/blob/aeac8ab9417a7b6a65f117491d1e648a6ad62422/src/client.ts#L107C17-L107C28

Using it in request:

https://github.com/4O4/node-mtasa/blob/aeac8ab9417a7b6a65f117491d1e648a6ad62422/src/client.ts#L62

 

But under the hood (in JS) it is something like this:

const credentials = `${username}:${password}`;
const encodedCredentials = Buffer.from(credentials).toString('base64');

const result = "Authorization: Basic " + encodedCredentials

The header is: Authorization

The value is something like: Basic bWlqblVzZXI6Z2VoZWltV2FjaHR3b29yZA==