Best way to include apikey for img-source

my plugin should load an image via a blueprint-defined API.

<img data-bind="attr: {src: $root.snapshotUrl( snapshotFilename )}" >

In the end it looks like this:


BUT the server response via 403...of course!

First approach was to use the OctoPrint.options.apikey in the Javacript-Function onAfterBinding, but the result was undefined.

My current solution is to send the APIKey from the server to the client and then I can build a correct image source url:


Do you know other options to add an apikey to the image?

Btw. ajax-calls via jquery works, because octoprint extends these calls and add the X-Api-Key Header. I have no clue how jquery get the current api-key.

In your plugin's JavaScript file, you should have access to a variable that's pre-supplied:


Hi @OutsourcedGuru
thx for your feedback!

The variable is not undefined, but it is an empty string in my development setup. I use Version 1.3.11.
I tested it on my real printer, running 1.3.10 and it is working!

So, I looked into the last changelog ( and found this hints:

  • Remove UI_API_KEY and API disabling. With the inclusion of the ForceLogin plugin that doesn't serve a real purpose anymore in most cases, and it was only ever more of a rate limiting feature than an actual security measure anyhow. Plus it lead to a ton of false security alarms.
  • Define empty UI_API_KEY for backwards compatibility with third party plugins

hmmm...I think I need to ""stick" on my solution....or is there an other option/flag?

1 Like

How about using a route hook instead of a blueprint? I used that in one of my plugins here and don't get 403 errors.

What @jneilliii suggests is the clean solution.

So my gitfiles plugin is broken now...?