In the interest of data integrity and security, modern web browsers impose constraints on JavaScript code running within that browser's environment. I ran into two of them very early on: CORS and Mixed Content. They restrict how content from different web servers are allowed to interact with each other, which was a situation I stumbled into by hosting a HTTP endpoint on my ESP32 and hosting my browser UI files on my desktop computer: these are different servers!

The easiest way to avoid tripping over constraints like CORS or Mixed Content is to serve everything from the same server. In my case, that meant I should serve my browser UI HTML/JavaScript alongside AS7341 HTTP endpoint on the same ESP32. Sadly, this isn't as easy as I had hoped because Arduino doesn't really have the concept of uploading files to a board. When we choose "Upload Sketch" it will compile and upload executable code, but there's no way to also send my index.html and script.js files for serving over HTTP. Probably because such support varies wildly across different Arduino-compatible microcontrollers.

For ESP32 specifically, a section of flash memory can be allocated for use like a disk drive via a mechanism called SPIFFS. It is possible to put HTML and JavaScript files in SPIFFS to be served via HTTP. (Example: ESPAsyncWebServer can serve files from SPIFFS.) I implemented this concept for an ESP32-based Micro Sawppy controller, but that was using Espressif's ESP-IDF framework inside the PlatformIO environment. There's no direct counterpart for Arduino framework and Arduino IDE. Somebody has written an Arduino IDE extension to upload files to ESP32 SPIFFS, but that was last released in 2019 and as of writing is not yet compatible with latest version of Arduino IDE.

I could embed those files as strings directly in source code, but that means I have to review my HTML and JavaScript to make sure I'm not using any special characters. The most obvious requirement is exclusive use of single quotes and no double quotes. Any backslash would also have special meaning in Arduino source code. This can get annoying very quickly.

An alternative is to treat those files as binary files and embed them in source code as hexadecimal values. I've done this for embedding animated GIF data inside an Arduino sketch, and there's a handy command to do so: "xxd -i index.html index.html.h" This uses xxd, a hex dump command-line utility included in Ubuntu distributions by default. I still have to modify the output file, though:

  1. Add "const" keyword to make sure it goes into flash storage instead of RAM.

  2. Remove "unsigned" keyword to fit with signature for WebServer server.send().

  3. Add a 0x00 to the end of the hex dump to null-terminate the string. (Technically it means I should add 1 to the "length" value as well, but I'm not using that value.)

This works, but still quite cumbersome. I'm not sure it's better than the hassle of writing HTML and JavaScript in a C string compatible way. There has to be something better than either of these options, but until I find it, I'll jump through these hoops. Fortunately, I only have to do this when updating files served by my ESP32. Most of the time I'm updating code and seeing how they work served from my development desktop, a much simpler process that made debugging challenges less of a headache than they already are.

Code for this project is publicly available on GitHub