Unable to Execute JavaScript Action

[mino922]

Hello,

I have an Angular 10 application running on SSR. In Builder I have configured a javascript action to execute when a button is clicked. My site has a content security policy implemented and it is allowing https://cdn.builder.io in the script-src directive. It appears that any JS that comes from Builder goes through this string-to-function when ran on the client. https://github.com/BuilderIO/builder/blob/a2833826352efa32ef5252b2d529951a18ef5e1e/packages/react/src/functions/string-to-function.ts.

In my case, this fails because executing a string as a code is insecure. I'm unsure how to get around this without allowing unsafe-eval of scripts on my site (which is not a good option). It would seem that any JS that is configured on Builder should be served from your CDN, rather than converted at run time.

Any help or direction here would be great.

[steve8708]

Hey @mino922 - thanks for the feedback!

You're right, right now how our Angular SDK works is some of the snippets of code are evaluated at runtime. This is because precompiling angular code and sending it as Javascript directly doesn't play nicely with how Angular does AOT compiling. So as a result we fall back to using the Function constructor and evaluating small pieces of code at a time at runtime, only when needed.

Our JSX Lite aims to solve this (by providing fully pregenerated code that we can send over a CDN directly like you mention) but there are still some challenges with Angular specifically, as ideally we don't want you to have tho ship the JIT compile code with your production app (for performance reasons)

So in the meantime we fetch the JS with fetch (similar to how System.js and other dynamic JS module loaders) though we use the Function constructor instead of eval to not give access to parent scope

We are also working with the Angular team to find a good way to support dynamic templates over the wire that play nice with the AOT compiler.

In the meantime, if it's critical to disallow unsafe-eval, you'll need to avoid using actions and other custom JS in Builder directly. Potentially consider using Angular elements registered with Builder to encapsulate custom logic as components that you can use in the Builder editor, if that fits your use case

[mino922]

Thanks for the feedback! I know this isn't a support forum, but I tried following the example and using BuilderBlock to create a component, however, the component does not appear in the editor to be used. Do I need to add it or will it automatically show up when the component is bootstrapped?

[steve8708]

No worries at all.

First thing to check for not seeing your component show up - have you set up your preview URL so you are editing directly on your site?