Skip to content

Add Subresource Integrity (SRI) support #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jroark-envoy wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add Subresource Integrity (SRI) support #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b531dad
Add Subresource Integrity (SRI) support to website
jroark-envoy Jan 20, 2026
c72157e
Add automated Webflow deployment via API
jroark-envoy Jan 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 38 additions & 10 deletions .github/workflows/auto-tag.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,21 @@
# This GitHub Action workflow automates the process of incrementing a version number stored in a .version file
# every time a push is made to the main branch. It performs the following steps:
# This GitHub Action workflow automates the complete deployment process every time a push is made to the main branch.
# It performs the following steps:
# 1. Checks out the repository code.
# 2. Reads the current version from the .version file and increments it.
# 3. Commits the updated .version file back to the main branch.
# 4. Creates a new git tag with the incremented version number.
# 5. Pushes the new tag to the remote repository.
# 3. Generates SRI (Subresource Integrity) hashes for all JS/CSS files.
# 4. Commits the updated .version file and sri-hashes.json back to the main branch.
# 5. Creates a new git tag with the incremented version number.
# 6. Pushes the new tag to the remote repository.
# 7. Deploys all scripts to Webflow with updated SRI hashes via the Webflow API.
# 8. Publishes the Webflow site automatically.

# To deploy a new version of code all you have to do is push to the main branch.
# The version number will be incremented and a new tag will be created and pushed to the remote repository.
# Then, in GitHub Releases, you can create a new release based on the tag that was just created.
# Finally, update the CDN script (jsDelivr) to point to the new version number.
# The workflow will automatically:
# - Increment the version number
# - Create a new tag
# - Register scripts with Webflow including SRI integrity hashes
# - Publish the updated site
# The scripts will be served via jsDelivr CDN with the new version number.

name: Auto Increment Version

Expand All @@ -32,15 +38,37 @@ jobs:
echo "NEW_VERSION=$NEW_VERSION" >> $GITHUB_ENV
echo $NEW_VERSION > .version

- name: Set up Node.js
uses: actions/setup-node@v3
with:
node-version: '18'

- name: Generate SRI hashes
env:
VERSION: ${{ env.NEW_VERSION }}
run: |
node generate-sri.js > sri-hashes-output.txt
echo "SRI hashes generated for version ${VERSION}"

- name: Commit and Push Changes
env:
VERSION: ${{ env.NEW_VERSION }}
run: |
git config --global user.name 'GitHub Action'
git config --global user.email 'action@github.com'
git add .version
git commit -m "Increment version to ${{ env.NEW_VERSION }}"
git add .version sri-hashes.json
git commit -m "Increment version to ${VERSION} and update SRI hashes"
git push origin main

- name: Tag New Version and Push Tag
run: |
git tag ${{ env.NEW_VERSION }}
git push origin tag ${{ env.NEW_VERSION }}

- name: Deploy to Webflow
env:
WEBFLOW_API_TOKEN: ${{ secrets.WEBFLOW_API_TOKEN }}
WEBFLOW_SITE_ID: ${{ secrets.WEBFLOW_SITE_ID }}
run: |
echo "Deploying scripts to Webflow..."
node deploy-to-webflow.js
12 changes: 12 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
# SRI hash generation output
sri-hashes-output.txt

# Node modules if anyone runs this locally
node_modules/

# macOS
.DS_Store

# Editor directories
.vscode/
.idea/
80 changes: 71 additions & 9 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,24 +16,86 @@ These scripts are used for various purposes including but not limited to:

## Setup

The repo has a Github action (auto-tag.yml) to automatically manage versions.
The repo has a Github action (auto-tag.yml) to automatically manage versions **and deploy to Webflow**.

Versions are tracked in the .version file as an auto-incrementing integer. Each time you push code, the version will update by 1.
### Automated Deployment

Every time you push to the main branch, the Github action creates a tag.
Every push to the `main` branch triggers a fully automated deployment:

With the tag, you can create new releases and use jsdelivr to serve the scripts.
1. **Version Management**: The `.version` file auto-increments by 1
2. **SRI Generation**: SHA-384 integrity hashes are generated for all scripts
3. **Git Tagging**: A new git tag is created with the version number
4. **Webflow Deployment**: Scripts are automatically registered with Webflow via API
5. **Site Publication**: The Webflow site is published with updated scripts

for example, to use the form-handlers.js script you can use the following URL:
**To deploy new code, simply push to main:**
```bash
git push origin main
```

The GitHub Action will handle everything automatically, including:
- Updating script tags in Webflow with new version numbers
- Updating SRI integrity hashes for security
- Publishing the live site

### Initial Setup Required

To enable automated deployment, you need to configure GitHub Secrets. See [WEBFLOW_SETUP.md](WEBFLOW_SETUP.md) for complete setup instructions.

**Required secrets:**
- `WEBFLOW_API_TOKEN` - Your Webflow API token
- `WEBFLOW_SITE_ID` - Your target Webflow site ID

### How Scripts Are Served

Scripts are served via jsDelivr CDN using GitHub tags:

```
https://cdn.jsdelivr.net/gh/envoy/webflow-website@<tag>/src/utils/form-handlers.js
https://cdn.jsdelivr.net/gh/envoy/webflow-website@<version>/src/utils/form-handlers.js
```

In Webflow site-wide custom code settings, you'll see this:
The Webflow API automatically updates the custom code settings with the new version and SRI hash on each deployment.

## Subresource Integrity (SRI)

This repository includes SRI (Subresource Integrity) support to ensure that the scripts loaded on your website haven't been tampered with. SRI uses cryptographic hashes to verify that fetched resources match what you expect.

### Why Use SRI?

- **Security**: Protects against CDN compromises and man-in-the-middle attacks
- **Integrity**: Ensures the exact files you tested are what users receive
- **Best Practice**: Recommended by security standards for external resources

### Generating SRI Hashes

SRI hashes are **automatically generated** by the GitHub Action on every push to `main`. You can also generate them manually:

```bash
node generate-sri.js
```
<script defer src='https://cdn.jsdelivr.net/gh/envoy/webflow-website@30/src/utils/form-handlers.js' type="text/javascript"></script>

This will:
- Generate SHA-384 hashes for all JS and CSS files in the `src/` directory
- Save hashes to `sri-hashes.json` for reference
- Output ready-to-use HTML tags with integrity attributes

### Automated SRI Updates

The deployment workflow automatically handles SRI:

1. **Generation**: SRI hashes are generated for all scripts
2. **Registration**: Scripts are registered with Webflow including integrity hashes
3. **Application**: Webflow applies the scripts with proper `integrity` and `crossorigin` attributes
4. **Publication**: The site goes live with updated, secure scripts

**Example of what gets deployed:**
```html
<script defer src="https://cdn.jsdelivr.net/gh/envoy/webflow-website@59/src/utils/form-handlers.js" integrity="sha384-6Vy4eUTu94zY4tZ9vzvA+yoBBwm25j9QS0YO37GtFp51R5bxvHQdpC9jkr6l5r4D" crossorigin="anonymous"></script>
```

It's a minimal approach to version control and serving scripts to the website.
### Important Notes

- **Fully Automated**: No manual updates needed in Webflow
- **Version-specific**: SRI hashes are tied to specific file versions
- **Security**: Every deployment includes updated integrity hashes
- **Verification**: Check `sri-hashes.json` after each push to see current hashes
174 changes: 174 additions & 0 deletions WEBFLOW_SETUP.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,174 @@
# Webflow API Deployment Setup Guide

This guide explains how to set up automated deployment to Webflow using the GitHub Actions workflow.

## Overview

The automated deployment workflow:
1. Automatically increments version numbers
2. Generates SRI (Subresource Integrity) hashes for all scripts
3. Registers scripts with Webflow via API (including integrity hashes)
4. Publishes the Webflow site
5. All triggered by a simple push to the `main` branch

## Prerequisites

Before setting up automated deployment, you need:

1. A Webflow site with an active plan
2. Access to your GitHub repository settings
3. Webflow API credentials with appropriate permissions

## Step 1: Create a Webflow API Token

1. Go to your Webflow workspace settings
2. Navigate to **Integrations** > **API Access**
3. Click **Generate API Token**
4. Name it something like "GitHub Deployment Bot"
5. Select the following required scopes:
- `sites:read`
- `sites:write`
- `custom_code:read`
- `custom_code:write`
6. Click **Generate Token**
7. **IMPORTANT**: Copy the token immediately - you won't be able to see it again

## Step 2: Get Your Webflow Site ID

### Option A: Using the Webflow API
1. Use your API token to call:
```bash
curl -X GET "https://api.webflow.com/v2/sites" \
-H "Authorization: Bearer YOUR_API_TOKEN" \
-H "accept: application/json"
```
2. Find your site in the response and copy its `id` field

### Option B: Using the Webflow Designer
1. Open your site in the Webflow Designer
2. The site ID is in the URL: `https://webflow.com/design/{SITE_ID}`
3. Copy the alphanumeric ID

## Step 3: Add GitHub Secrets

1. Go to your GitHub repository
2. Click **Settings** > **Secrets and variables** > **Actions**
3. Click **New repository secret**
4. Add the following secrets:

**Secret 1:**
- Name: `WEBFLOW_API_TOKEN`
- Value: (paste the API token from Step 1)

**Secret 2:**
- Name: `WEBFLOW_SITE_ID`
- Value: (paste the site ID from Step 2)

5. Click **Add secret** for each

## Step 4: Configure Script Deployment

The `deploy-to-webflow.js` script contains a `SCRIPT_CONFIG` object that defines which scripts should be deployed and how. Review and modify this configuration based on your needs:

```javascript
const SCRIPT_CONFIG = {
'src/utils/form-handlers.js': {
displayName: 'Form Handlers',
location: 'header', // 'header' or 'footer'
attributes: { defer: 'true', type: 'text/javascript' }
},
// Add more scripts as needed
};
```

**Configuration options:**
- `displayName`: Human-readable name shown in Webflow
- `location`: Where to inject the script (`'header'` or `'footer'`)
- `attributes`: HTML attributes for the script tag (defer, async, type, etc.)

## Step 5: Test the Deployment

1. Make a small change to any file in the repository
2. Commit and push to the `main` branch:
```bash
git add .
git commit -m "Test automated deployment"
git push origin main
```
3. Go to **Actions** tab in GitHub
4. Watch the workflow run
5. Check your Webflow site to verify the scripts are updated

## Workflow Details

### What Happens on Push to Main

1. **Version Increment**: `.version` file increments by 1
2. **SRI Generation**: SHA-384 hashes generated for all scripts
3. **Git Operations**: Changes committed and tagged
4. **Script Registration**: Each configured script is registered with Webflow including:
- jsDelivr CDN URL with version tag
- SRI integrity hash
- Version number
- Display name
5. **Script Application**: All scripts applied to the site
6. **Site Publication**: Webflow site published with new scripts

### Manual Deployment

You can also deploy manually by running:

```bash
# Generate SRI hashes
node generate-sri.js

# Deploy to Webflow
WEBFLOW_API_TOKEN=your_token WEBFLOW_SITE_ID=your_site_id node deploy-to-webflow.js
```

## Troubleshooting

### Authentication Errors (401)

- Verify your `WEBFLOW_API_TOKEN` is correct
- Check that the token has the required scopes
- Ensure the token hasn't expired

### Site Not Found (404)

- Verify your `WEBFLOW_SITE_ID` is correct
- Check that the API token has access to this site

### Script Registration Errors

- Ensure the jsDelivr CDN URL is accessible
- Verify the SRI hash matches the file content
- Check that the version number is valid (semantic versioning)

### Rate Limiting (429)

- Webflow has rate limits on API calls
- The workflow handles most scenarios, but if you're deploying frequently, you may hit limits
- Wait a few minutes and try again

## Security Best Practices

1. **Never commit API tokens**: Always use GitHub Secrets
2. **Limit token scopes**: Only grant required permissions
3. **Rotate tokens periodically**: Update tokens every few months
4. **Monitor deployments**: Check GitHub Actions logs regularly
5. **Use SRI hashes**: Always include integrity hashes for security

## Additional Resources

- [Webflow API Documentation](https://developers.webflow.com/data/reference)
- [GitHub Actions Security](https://docs.github.com/en/actions/security-guides/security-hardening-for-github-actions)
- [Subresource Integrity (SRI)](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity)
- [jsDelivr CDN](https://www.jsdelivr.com/documentation)

## Support

For issues related to:
- **Webflow API**: Contact Webflow support or check their developer community
- **GitHub Actions**: Check the Actions tab logs for error details
- **This workflow**: Open an issue in this repository
Loading
Loading