Brenton Cleeland

Embedding my current status on my homepage

Published on

Screenshot of my current status on my homepage with a gradient background. The status is: Writing up a quick post about how I've embedded on my homepage while keeping the Content Security Policy as strict as I'd like.

Keen to embrace the fun that is and play with more of these 2023 Indie Web vibes, I wanted to get my status onto my homepage. Luckily, lets you embed your status with a unique Javascript file for each user.

<script src="" async></script>

If you have a quick look at that file you'll see that it includes that current status. For me this has a big pro, and a smaller con.

The pro is that it means that the script doesn't need to make any other HTTP requests to show your status. The con is that the hash of the script can't be known in advance. Unfortunately that con means that we can't force subresource integrity (SRI) for this script.

I've gone all in on a strict Content Security Policy (CSP) for this site, which makes adding third party javascript to the site trickier. In order to allow this script to execute I've added the full URI ( to the script-src directive in my CSP. Adding the full URI means that other scripts on the domain can't be accidentally embedded. Luckily I haven't been enforcing SRI on this site, but it's something I'd like to look into in the future - at that point I might need to review this approach.

The fact that the script embeds the content of the latest statues means that we can avoid having to modify our connect-src directive. This directive lets you enforce rules for HTTP requests initiated by Javascript on the page.

By default the system emoji will be used. Adding ?fluent as a query parameter will tell to use the much more consistent Fluent Emoji1 set. These emoji are loaded from the content delivery network (aptly named ""), which means that we have to add that to our img-src directive. My updated img-src looks like this:

img-src 'self'

The status is on the page now but we have to deal with styling. Adding another query parameter (pretty) will add inline styles to the HTML tags added by the script. Including unsafe-inline is a deal breaker for me - even for styles. Instead I chose to copy the styles into my own CSS file. Thankfully includes class names on each div is adds. Here's the CSS that I extracted from the script when using the pretty query parameter:

.statuslol {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  background: #e7ebf3;
  color: #111;
  border-radius: 0.5em;
  padding: 1em;

.statuslol_emoji_container {
  min-width: 94px;
  flex: 0 0 1em;
  font-size: 3em;
  padding-right: 0;

.statuslol_content {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  margin: -0.5em 0 0 0;
  text-align: left;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;

The final trick for me was to make sure that the page doesn't look funny if the script fails to load or loads slower than the rest of the site.

To do that I have wrapped the script in yet another <div> and applied styling to it to make it work as a placeholder.

<div class="statuslol_wrapper">
    <script src="" async></script>

And the CSS looks like this:

.statuslol_wrapper {
  min-height: 106px;
  background: #e7ebf3;
  border-radius: 0.5em;

This all might look like a lot of steps but in the end it was a few minutes of work and lets me embed a live-updating status widget on my otherwise pretty boring homepage. I'm super keen to experiment with more features as the come out, I'm loving everything that's happening over there - it's making me excited about these sorts of indieweb experiments again!

  1. As much as I like the consistency of the Fluent Emoji set, they do unfortunately remind me a little too much of $WORK and Microsoft Teams. I will look into using Twemoji in the future.