@gramercytech/gx-toolkit
Version:
Dev tools for create platform plugins
190 lines (169 loc) • 8.85 kB
HTML
<html>
<head>
<title>Mixed Content Proxy Test</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; max-width: 800px; }
.test-section { margin: 20px 0; padding: 20px; border: 2px solid #ddd; border-radius: 8px; }
.error { border-color: #dc3545; background: #fff5f5; }
.success { border-color: #28a745; background: #f8fff8; }
.warning { border-color: #ffc107; background: #fffbf0; }
.info { border-color: #17a2b8; background: #f0f9ff; }
.code { background: #e9ecef; padding: 8px; font-family: monospace; margin: 8px 0; word-break: break-all; }
.results { background: #f5f5f5; padding: 10px; margin: 10px 0; border-radius: 4px; max-height: 300px; overflow-y: auto; }
button { padding: 10px 15px; margin: 5px; cursor: pointer; background: #007bff; color: white; border: none; border-radius: 4px; }
.status-indicator { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; }
.blocked { background: #dc3545; }
.allowed { background: #28a745; }
.warning-icon { background: #ffc107; }
</style>
</head>
<body>
<h1>🔒 Mixed Content Proxy Test</h1>
<div class="test-section info">
<h2>🌐 Current Page Security</h2>
<div id="pageInfo"></div>
<div class="code" id="currentUrl"></div>
</div>
<div class="test-section warning">
<h2>⚠️ Mixed Content Policy</h2>
<p><strong>Browser Security Rule:</strong> HTTPS pages cannot make requests to HTTP endpoints</p>
<ul>
<li><span class="status-indicator blocked"></span><strong>BLOCKED:</strong> HTTPS → HTTP (Subresources)</li>
<li><span class="status-indicator warning-icon"></span><strong>WARNING:</strong> HTTPS → HTTP (Navigation)</li>
<li><span class="status-indicator allowed"></span><strong>ALLOWED:</strong> HTTPS → HTTPS</li>
<li><span class="status-indicator allowed"></span><strong>ALLOWED:</strong> HTTP → HTTP</li>
</ul>
</div>
<div class="test-section">
<h2>🧪 Mixed Content Tests</h2>
<button onclick="testHttpsToHttp()">Test HTTPS → HTTP Fetch</button>
<button onclick="testHttpsToHttps()">Test HTTPS → HTTPS Fetch</button>
<button onclick="testImageLoad()">Test HTTP Image Load</button>
<button onclick="testScriptLoad()">Test HTTP Script Load</button>
<div id="testResults" class="results"></div>
</div>
<div class="test-section error">
<h2>❌ Common Scenarios That Fail</h2>
<div class="code">
# Page: https://example.com<br>
# Proxy rule: api.service.com → http://my-proxy.local:8080<br>
# Result: ❌ BLOCKED - Mixed content violation
</div>
</div>
<div class="test-section success">
<h2>✅ Working Solutions</h2>
<h3>Option 1: Use HTTPS for Proxy Target</h3>
<div class="code">
# Proxy rule: api.service.com → https://my-proxy.com<br>
# Result: ✅ WORKS - Both HTTPS
</div>
<h3>Option 2: Setup HTTPS on Local Proxy</h3>
<div class="code">
# Use mkcert or similar to create local HTTPS<br>
# Proxy rule: api.service.com → https://localhost:8443<br>
# Result: ✅ WORKS - HTTPS to HTTPS
</div>
<h3>Option 3: Browser Flags (Development Only)</h3>
<div class="code">
# Chrome: --disable-web-security --disable-features=VizDisplayCompositor<br>
# Firefox: security.mixed_content.block_active_content = false<br>
# Result: ⚠️ WORKS but INSECURE
</div>
</div>
<div class="test-section info">
<h2>🔧 Extension Capabilities</h2>
<table style="width: 100%; border-collapse: collapse;">
<tr style="background: #f8f9fa;">
<th style="border: 1px solid #ddd; padding: 8px;">Request Type</th>
<th style="border: 1px solid #ddd; padding: 8px;">HTTPS → HTTP</th>
<th style="border: 1px solid #ddd; padding: 8px;">Extension Override</th>
</tr>
<tr>
<td style="border: 1px solid #ddd; padding: 8px;">Main Frame Navigation</td>
<td style="border: 1px solid #ddd; padding: 8px;">⚠️ Warning shown</td>
<td style="border: 1px solid #ddd; padding: 8px;">✅ Can redirect</td>
</tr>
<tr>
<td style="border: 1px solid #ddd; padding: 8px;">fetch() / XHR</td>
<td style="border: 1px solid #ddd; padding: 8px;">❌ Blocked</td>
<td style="border: 1px solid #ddd; padding: 8px;">❌ Still blocked</td>
</tr>
<tr>
<td style="border: 1px solid #ddd; padding: 8px;">Images / CSS</td>
<td style="border: 1px solid #ddd; padding: 8px;">❌ Blocked</td>
<td style="border: 1px solid #ddd; padding: 8px;">❌ Still blocked</td>
</tr>
<tr>
<td style="border: 1px solid #ddd; padding: 8px;">Scripts / Modules</td>
<td style="border: 1px solid #ddd; padding: 8px;">❌ Blocked</td>
<td style="border: 1px solid #ddd; padding: 8px;">❌ Still blocked</td>
</tr>
</table>
</div>
<script>
function log(message, type = 'info') {
const results = document.getElementById('testResults');
const timestamp = new Date().toLocaleTimeString();
const icon = type === 'error' ? '❌' : type === 'success' ? '✅' : type === 'warning' ? '⚠️' : 'ℹ️';
results.innerHTML += `<div>${timestamp} ${icon} ${message}</div>`;
}
function updatePageInfo() {
const protocol = window.location.protocol;
const isHttps = protocol === 'https:';
const pageInfo = document.getElementById('pageInfo');
const currentUrl = document.getElementById('currentUrl');
pageInfo.innerHTML = `
<strong>Protocol:</strong> ${protocol} ${isHttps ? '🔒 Secure' : '🔓 Insecure'}<br>
<strong>Mixed Content Policy:</strong> ${isHttps ? '✅ Active' : '➖ Not applicable'}
`;
currentUrl.textContent = window.location.href;
}
async function testHttpsToHttp() {
log('Testing HTTPS page → HTTP endpoint...');
try {
const response = await fetch('http://httpbin.org/get?test=mixed-content');
log(`✅ Request succeeded: ${response.status}`, 'success');
} catch (error) {
if (error.message.includes('mixed content')) {
log(`❌ Mixed content blocked: ${error.message}`, 'error');
} else {
log(`❌ Request failed: ${error.message}`, 'error');
}
}
}
async function testHttpsToHttps() {
log('Testing HTTPS page → HTTPS endpoint...');
try {
const response = await fetch('https://httpbin.org/get?test=secure');
log(`✅ Request succeeded: ${response.status}`, 'success');
} catch (error) {
log(`❌ Request failed: ${error.message}`, 'error');
}
}
function testImageLoad() {
log('Testing HTTP image load...');
const img = new Image();
img.onload = () => log('✅ HTTP image loaded successfully', 'success');
img.onerror = () => log('❌ HTTP image blocked by mixed content policy', 'error');
img.src = 'http://httpbin.org/image/png?test=image';
}
function testScriptLoad() {
log('Testing HTTP script load...');
const script = document.createElement('script');
script.onload = () => log('✅ HTTP script loaded successfully', 'success');
script.onerror = () => log('❌ HTTP script blocked by mixed content policy', 'error');
script.src = 'http://httpbin.org/base64/Y29uc29sZS5sb2coJ0hUVFAgc2NyaXB0IGxvYWRlZCcpOw==';
document.head.appendChild(script);
}
// Initialize page
updatePageInfo();
// Show initial warning if on HTTPS
if (window.location.protocol === 'https:') {
log('⚠️ This is an HTTPS page. HTTP requests will be blocked by mixed content policy.', 'warning');
} else {
log('ℹ️ This is an HTTP page. No mixed content restrictions apply.', 'info');
}
</script>
</body>
</html>