Complex: having API call within widget

eeeee

Investigation so far:
...
Edited: Turned out not to be reverse proxy issue

phenomlab

@eeeee the difference here is that the public script isn't called by NodeBB itself, but the local browser. The reverse proxy expects traffic from NodeBB itself, whereas an external script will be called by the browser.

As you know, I had the same issue with the phrase generator, and as soon as I placed it externally, it worked fine.

What you could do as a test is to host the JS external file on your own forum and call it externally that way for your friends forum. It would effectively be the same thing and work well from the proof of concept perspective.

eeeee

@baris I'm not having great luck with work around solutions. Is there a way of making this so that API calls don't fail when they are in Widget?

<baris>

What's the endpoint? How are you making the call and what's the error message?

eeeee

Ive tried it with numerous API calls, even simple ones like GET random image, that requires no parameters

fetch(
`https://api.unsplash.com/photos/random?client_id=${key}`
)

These work from github or any host, but nothing returns when same code is in a widget.
The error is always response undefined, when called from widget

<baris>

Well the request from nodebb doesn't seem to send a proper client_id. The request url looks like this https://api.unsplash.com/photos/random?client_id=$ What is the code you use in the widget?

eeeee

@baris

const key='q_8d...' // redacted key
 fetch(
`https://api.unsplash.com/photos/random?client_id=${key}`
)

<baris>

Try with

const key='q_8d...' // redacted key
 fetch(
'https://api.unsplash.com/photos/random?client_id=' + key
)

The {} is probably getting replaced by benchpressjs because it thinks it is a variable.

eeeee

@baris
It works! Thanks so much!

As a side question, is Benchpress.js really worth Nodebb using?, clearly its irritating if you have to be careful with brackets.

So pleased to get this sorted though!

phenomlab

@eeeee said in Complex: having API call within widget:

clearly its irritating if you have to be careful with brackets.

Not at all. It just means you need to refractor your code to suit the environment you are using. Benchpress is the standard for NodeBB.

Also, as I mentioned on sudonix, another issue is the security implications of allowing remote code to run inside a widget.

Poorly constructed code can easily introduce severe vulnerabilities on the target site which you wouldn’t actually see.

It’s due to that reason that by default you cannot execute arbitrary code in the post editor unless you override that which is at your risk.

eeeee

Update: It was really worth getting to bottom of this as other Widget code I once tried hadn't worked either. It didnt contain an API call, but did have an if statement with { } braces after.
Refactoring that code, (you can have one statement inline if without the braces) , and now that works.
This Benchpress anomoly (if I can call it that) is worth being aware of, as even simpler widgets can be affected by any {} !

Further update: Reading up on Benchpress.js, I realise now that @baris wrote it! So sorry if I put my foot in it by questioning it! I read the documents on escaping the { } to retain the raw meaning of { }
I tried
if(){{ ...}}
if(){ {{ ... }} }
if(){{ { ... } }}
But couldnt find a way to get the code to work
So went back to the inline if with no braces.

<baris>

Actually benchpressjs(was called that templates.js before) was written by @psychobunny first and then rewritten by @PitaJ https://community.nodebb.org/topic/11025/introducing-our-new-templating-engine

eeeee

@phenomlab said in Complex: having API call within widget:

Benchpress is an industry accepted standard which is why it's used in thousands of other projects aside from NodeBB.

@phenomlab is it though? I'm wondering if you were thinking about Bootstrap being an industry standard, because Benchpress isn't used anywhere else than Nodebb from what I can see?

Using { in this template language is an unfortunate choice of symbol IMO.
Historically this template language used some form of < > tags.
The { substitutions conflict with widget js code if you're not careful.

phenomlab

@eeeee said in Complex: having API call within widget:

@phenomlab is it though?

Sorry - I did actually mean Markdown and I've modified the original post.

PitaJ

Benchpress/templates.js has always used a single { to wrap variable substitution.

I agree before is not commonly used, but using { is an industry standard for format strings and templates.

Not sure what documents you read about escaping, it appears I don't actually have that documented. But to escape you should be able to add a single backslash before the opening {:

if (something) \{ stuff() }

But even just putting a semicolon in there should work

if (something) { stuff(); }