SecuritySpy has a built-in web server that allows remote viewing of live camera streams as well as access to previously-captured footage and settings. We sometimes get asked by customers how to customise the appearance of these web pages for various reasons, such as to change colours, add branding, modify text etc. The procedure is quite simple, though it does require some knowledge of HTML and CCS.
All the files used for SecuritySpy’s web interface are stored within its application bundle. Right-click on the SecuritySpy application icon and select Show Package Contents.
Within the SecuritySpy application bundle, navigate to Contents/Resources/Web/ – all the files SecuritySpy uses for its web interface are stored here.
It’s important that you don’t modify these files directly; instead, for any file that you want to customise, copy it to the ~/SecuritySpy/Web/ folder. To get to this folder, click the Go menu in the Finder, select Home, then navigate into the SecuritySpy folder. (Note: in older versions of SecuritySpy, the location of this folder is ~/Documents/SecuritySpy/Web/).
Then, modify the file in this user location. When SecuritySpy looks for a resource to deliver via the web server, it will first check this user location, and if the file doesn’t exist there, it will use the file from its application bundle web folder.
Here are some of the main files used in the web interface:
- index.html – the main page that is displayed when opening the web interface
- live.html – the page that displays the live camera feeds
- download.html – the page that displays the list of captured footage
- mainlogo.png – the image that is displayed at the top of the main page
There are settings pages too, but these change from time to time with SecuritySpy software updates, so it’s not recommended that you create your own.
Thanks for your quick reply! Now it is much more simple!
Can you give us any assurances that SecSpy is not vulnerable to the new Bash shell exploit on OSX/Unix based systems, Shell Shock? One of the attack vectors is server side scripting, does SecSpy’s web interface use server side scripting?
Hi Shawn, I can confirm that SecuritySpy is not affected by this Bash bug. The Shellshock bug primarily affects CGI scripts invoked by the Apache web server. SecuritySpy does not use CGI, Bash, or Apache for its web interface, in fact it does not implement server-side scripting at all.
Mmm, I copied the live.html file into my ~/Documents/SecuritySpy/Web/ folder, made some small changes (like tot he “Live” header (h1), and some random text in the body, but the changes are not being served. I restarted SecuritySpy too (do you have to normally?) and it made no difference.
Hi Nunuv, sorry, this appears to be a bug, I’ll make sure this is fixed for the next update!
Hey Ben. I wanted to change the mainlogo graphic, but it looks like the graphic is now differently sized and named icons. Are those icons also overridden by alternates in the user’s SecuritySpy/Web folder?
Hi Kirk – any file can be overridden by putting an alternative with the same name in the users’s ~/SecuritySpy/Web folder. If you are talking about the logo on the top of the main index.html page, this uses the png files “icon_128x128.png”, “icon_256x256.png”, and “icon_512x512.png”. The “apple-touch-icon” files are used by iOS when you save one of SecuritySpy’s web pages to your home screen as a shortcut.
After following these instructions I cannot get the logo at the top of the main index.html page to change.
Hi Tim, the filename of the logo at the top of the page is “icon_128x128.png”, so if you put your own version of this file at the location ~/SecuritySpy/Web (i.e. the Web folder within the SecuritySpy folder within your Home folder), your version will replace the default one.