How to Create a Controlled Web Environment Using Webfuse's Lockdown App

This tutorial will walk you through creating a virtual web session where user activity is restricted to only the URLs you specify. We'll be using Webfuse and its powerful Lockdown app to achieve this.

Our Goal: To set up a controlled Browse environment. Imagine you want a user to only access specific company tools or a particular set of research articles. This is what we'll build!

What You'll Need:

• A Webfuse account and a space to work in.
• A web browser with developer tools (like Chrome, Firefox, or Edge).
• jq command-line tool (optional, for easily extracting URLs from HAR files). You can find installation instructions for jq online for your operating system.

Let's get started!

Step 1: Plan and Record Your Allowed Web Journey

Before we configure anything, we need to know exactly which web pages and resources the user should be able to access.

1. Launch Your Browser: Open your favorite web browser.
2. Open Developer Tools:
   
   • Right-click anywhere on a webpage and select "Inspect" or "Inspect Element."
   • Navigate to the "Network" tab.
   • Crucial: Look for an option like "Preserve log" (or "Persist logs") and make sure it's checked. This ensures that all web requests are recorded, even if you navigate from one page to another. (Illustrative image - your browser's UI might differ slightly)
3. Simulate the User's Path: Now, carefully browse only the websites and click only the links you want to allow. For example:
   
   • Go to https://www.webfuse.com
   • Navigate to the "Blog" section.
   • Open a specific blog post. As you do this, you'll see the Network tab filling up with all the web requests being made in the background (HTML pages, CSS files, JavaScript files, images, API calls, etc.).
4. Export the HAR File: Once you've completed the entire allowed journey:
   
   • In the Network tab of your developer tools, look for an export icon (it often looks like a downward arrow ⇩ or might be labeled "Export HAR").
   • Click it and save the file to your computer. Let's name it allowed_journey.har. This HAR file is a recording of everything your browser loaded.

Step 2: Extract All Accessed URLs from Your Recording

Now, we'll pull out all the individual web addresses (URLs) from the allowed_journey.har file.

1. Open Your Terminal or Command Prompt.
   
   
2. Navigate to the Directory where you saved allowed_journey.har. For example, if it's in your "Downloads" folder, you might type cd Downloads.
   
   
3. Run the Extraction Command: Type the following command and press Enter: cat allowed_journey.har | jq -r .log.entries[].request.url

(If you don't have jq, you'd need to manually inspect the HAR file, which is more complex as it's a JSON file, and copy out each URL from the request objects.)

4. Review the Output: You'll see a long list of URLs. This is every single resource that was requested during your recorded journey. It will look something like this:

https://www.webfuse.com/blog/how-to-build-a-web-native-ai-agent-with-webfuse-and-copilot-part-2
https://cdn.prod.website-files.com/66fa5c211b77ce188d5275f6/css/webfuse-staging.webflow.shared.891bbd6aa.min.css
https://plausible.io/js/script.file-downloads.outbound-links.js
https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=917275&theme=dark&t=1742329317111
https://cdn.prod.website-files.com/66fa5c211b77ce188d52762a/67a0e9a3624015478068060e_how%20to%20built%20a%20web-native%20ai%20agent%20with%20webfuse.avif
https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=66fa5c211b77ce188d5275f6
...and many more

‍

Important Note on URLs and Domains: Look closely at your list. You'll see main page URLs (like https://www.webfuse.com/blog/...) but also many URLs for assets like images, stylesheets (CSS), and scripts (JavaScript). These assets often come from Content Delivery Networks (CDNs) like cdn.prod.website-files.com or d3e54v103j8qbb.cloudfront.net.

Notice that the path for a script like jquery-3.5.1.min.dc5e7f18c8.js might change if the website updates its jQuery version. To make our rules more robust, we often want to allow the entire domain (e.g., d3e54v103j8qbb.cloudfront.net) or even all subdomains of a primary CDN (e.g., all *.cloudfront.net sites). Keep this in mind for the next step.

Step 3: Create a "Gatekeeper" - Your Regular Expression

A Regular Expression (or "regex") is a special sequence of characters that defines a search pattern. We'll create one to tell the Lockdown app exactly which URLs are okay.

1. Generate the Regex (The Easy Way - Use AI!):
   
   
   
   • Take the list of URLs you extracted.
     
     
   • Go to an AI assistant (like ChatGPT, Gemini, Claude, etc.).
     
     
   • Use a prompt like this:
     
     "Generate a JavaScript-compatible regular expression that will match ALL of the following URLs. Prioritize matching the domains, and for common CDNs like cloudfront.net or jsdelivr.net, try to allow all subdomains or common paths if it makes sense. Here's the list: <paste your full list of URLs here>"
     
     
   • The AI should give you a regular expression pattern. For example, a very simple regex to match https://example.com and https://sub.example.com might be ^https:\/\/(sub\.)?example\.com. Yours will be more complex.
     
     
2. Test Your Regex (Crucial!): Don't skip this! A bad regex can either block too much or allow too much.
   
   
   
   • Go to an online regex tester like https://www.debuggex.com/.
   • Paste Your Regex: Find the field for the "Regular Expression" and paste the pattern you got from the AI (or wrote yourself).
   • Add Test URLs: Find the "Test String" or "Sample Text" area and paste your original list of URLs that you extracted from the HAR file.
   • Analyze:
     
     • Does it match all your URLs? The tool should show you which URLs pass the test.
     • Is it too greedy? For example, if you only want to allow https://mycompany.com/docs, make sure your regex doesn't accidentally allow https://mycompany.com/admin.
     • Is it too strict? If a website loads resources like image.jpg?version=123 and then image.jpg?version=456, a regex that's too strict on the query parameters might fail. You might need to make it more flexible for such cases, often by allowing any characters after a certain point or focusing on the domain and path.
   • Refine: Adjust your regex as needed. This can be iterative. If you allowed *.cloudfront.net, make sure it's actually matching domains like d3e54v103j8qbb.cloudfront.net.
3. A good regex is the heart of this setup! Take your time here.

‍

Step 4: Configure the Lockdown App in Webfuse

Now we take our regular expression and tell the Webfuse Lockdown app to use it.

1. Go to Your Webfuse Space: Log in to Webfuse and navigate to the space where you want to apply these restrictions. If you don't have a dedicated space, you might want to create a new one for this purpose.
   
   
2. Install the Lockdown App.
   
   
3. Access Lockdown App Settings: Once installed, open the configuration settings for the Lockdown app.
   
   
4. Prepare the JSON Configuration: The Lockdown app needs the regular expression in a specific JSON format.
   
   
   
   • Open your web browser's developer tools again.
   • In the "Console" tab, type the following JavaScript code, carefully replacing "YOUR_REGEX_PATTERN_HERE" with the actual regular expression you finalized in Step 3.

let myPattern = "YOUR_REGEX_PATTERN_HERE"; // e.g., "^https:\\/\\/(www\\.)?webfuse\\.com\\/.*"
JSON.stringify({"pattern": myPattern, "type": "all"});

Press Enter. The console will output a JSON string.

Product Demo

Enter the JSON into Lockdown App:

• Copy the JSON string that was outputted in the console. Make sure to copy the entire string.
• Go back to the Lockdown app configuration page in Webfuse.
• Find the input field for the "Allowlist".
• Paste the JSON string into this field.

Save the Lockdown app configuration.

Step 5: Test Your Restricted Web Session

This is the final and most important step: checking if it all works.

1. Launch a New Webfuse Session: Start a new virtual web session using the Webfuse space where you just configured the Lockdown app.
2. Test Allowed Sites:
   
   • Try to navigate to the websites and pages that were part of your original recorded journey (from Step 1). These should load and function correctly.
   • Click around, interact with elements. Make sure all necessary images, scripts, and data are loading.
3. Test Disallowed Sites:
   
   • Now, try to go to a completely different website, one that was not in your recorded journey and should not match your regular expression (e.g., https://www.randomsite.com).
   • This attempt should be blocked by the Lockdown app. 
4. Troubleshoot if Needed:
   
   • If something allowed is blocked: Your regex might be too strict, or you missed a dependent resource URL during the HAR recording. You may need to:
     
     • Re-examine the HAR file for missed domains/URLs.
     • Adjust your regular expression to be slightly more inclusive.
     • Update the JSON in the Lockdown app configuration.
   • If something disallowed is accessible: Your regex is too permissive. You'll need to refine it to be stricter and then update the Lockdown app configuration. Re-testing with Debuggex (Step 3.2) is highly recommended here.

Congratulations! You've now set up a Webfuse session with URL restrictions using the Lockdown app. This is a powerful way to enhance security and guide user activity within a controlled web environment.

Remember that websites and their underlying resources can change. You may need to revisit and update your HAR captures and regular expressions periodically to ensure the setup remains effective.

‍