career_conversation / test_iframe.html
toonvang's picture
Upload folder using huggingface_hub
824f609 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Domain Restriction</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
h1 {
color: #333;
}
.test-section {
margin: 30px 0;
padding: 20px;
border: 2px solid #ddd;
border-radius: 8px;
}
iframe {
width: 100%;
height: 600px;
border: 1px solid #ccc;
border-radius: 4px;
}
.info {
background: #f0f0f0;
padding: 15px;
border-radius: 4px;
margin-bottom: 15px;
}
</style>
</head>
<body>
<h1>Domain Restriction Test</h1>
<div class="test-section">
<h2>Test 1: Direct Embed (localhost)</h2>
<div class="info">
<strong>Expected:</strong> Should work ✅<br>
<strong>Reason:</strong> localhost is in the allowed domains list
</div>
<iframe src="http://127.0.0.1:7860"></iframe>
</div>
<div class="test-section">
<h2>Test 2: Check Browser Console</h2>
<div class="info">
<strong>Instructions:</strong><br>
1. Open browser DevTools (F12)<br>
2. Go to Network tab<br>
3. Send a message in the chat above<br>
4. Look at the request headers - you should see "Referer" or "Origin" headers<br>
5. The app will check these headers and allow/block accordingly
</div>
</div>
<div class="test-section">
<h2>How it works when deployed:</h2>
<div class="info">
<strong>Allowed:</strong> Requests from toonvangelderen.com or www.toonvangelderen.com<br>
<strong>Blocked:</strong> Requests from any other domain<br>
<br>
When someone embeds your Gradio Space iframe on another website, the browser will send that website's domain in the headers, and your app will block it.
</div>
</div>
</body>
</html>