Executing inline script

Hi all!

I’ve developed an extension that works very nice in my local Twitch Developer Rig. What it basically does:

  • accessing an external API to grab some data (via fetch)
  • filter this data based on user search input
  • click on filtered data to load a webpage

A few notes:

  • I do not need any backend services
  • I’m using AlpineJS to handle data and filter it (loaded from /public folder, so it is locally hosted)

When moving the extension to Hosted Test, the extension is not working anymore. The error is:
1. Alpine Error: "EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' https://myclientid.ext-twitch.tv https://extension-files.twitch.tv https://www.google-analytics.com"

Which are my options to make it work?

Thank you!

Like the error says, your code is trying to do eval() and eval() is not allowed

See section 2 https://dev.twitch.tv/docs/extensions/guidelines-and-policies

Edit: was about to loop back and update this post with how to fix but @BehEh beat me

The problem you face is that if Alpine is doing it under the hood and you can’t change it to not use eval(), then you can’t use AlpineJS for Twitch Extensions.

Which are my options to make it work?

This is hard to say without knowing why you’re using eval in your code or where it’s coming from. There’s a few possibilites:

  • Your build pipeline wraps eval around the code. That should be easy to fix.
  • AlpineJS uses eval internally. You’ll have to find a way around that, either by configuring the library differently, if such an option exists, or by using a different library
  • You’re using eval in your code to execute user search input (maybe something homegrown like myValues.filter(x => eval("x." + userInput.replace(/=/, "=="))). You won’t be able to use this at all, and will need to come up with a different filtering strategy, such as manually parsing the input and looking at the various fields.

There is no way to publish a Twitch extension containing eval at all, you will need to either remove it or write code to replace it. eval is dangerous because your API could theoretically inject code to be executed after the extension has been released, and then it bypass approval. So by replacing it with manual filters or something the Twitch team can be sure that anything from the API cannot be actually run as code, only used as a string for comparison or similar.

Thank you for your support! I’ve decided to drop the AlpineJS completely and moved to VanillaJS. Works fine now.