generated from nathanwoodburn/python-webserver-template
242 lines
8.9 KiB
JavaScript
242 lines
8.9 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
// Get references to elements
|
|
const curlButton = document.getElementById('curl');
|
|
const curlUrlInput = document.getElementById('curl-url');
|
|
const resultsContainer = document.getElementById('curl-results');
|
|
|
|
// Add click event listener to the button
|
|
curlButton.addEventListener('click', function () {
|
|
// Get the URL from the input
|
|
const url = curlUrlInput.value.trim();
|
|
|
|
// Validate URL
|
|
if (!url) {
|
|
showMessage('Please enter a URL', 'error');
|
|
return;
|
|
}
|
|
|
|
// Update the url
|
|
var params;
|
|
if (window.location.search){
|
|
params = new URLSearchParams(window.location.search);
|
|
params.set('url', url);
|
|
}
|
|
else {
|
|
params = new URLSearchParams();
|
|
params.append('url', url);
|
|
}
|
|
history.pushState(null, null, `?${params.toString()}`);
|
|
|
|
// Show loading state
|
|
curlButton.disabled = true;
|
|
curlButton.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Loading...';
|
|
|
|
// Clear previous results
|
|
resultsContainer.innerHTML = '';
|
|
showMessage('Fetching content...', 'info');
|
|
|
|
// Make the request
|
|
handleCurlRequest(url);
|
|
});
|
|
// Add enter key listener to input
|
|
curlUrlInput.addEventListener('keyup', function (event) {
|
|
if (event.key === 'Enter') {
|
|
curlButton.click();
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Handle the curl API request
|
|
* @param {string} url - The URL to curl
|
|
*/
|
|
function handleCurlRequest(url) {
|
|
// Encode the URL for the API endpoint
|
|
const encodedUrl = encodeURIComponent(url);
|
|
const apiEndpoint = `/api/v1/curl/${encodedUrl}`;
|
|
|
|
fetch(apiEndpoint)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
// Clear loading message
|
|
resultsContainer.innerHTML = '';
|
|
|
|
if (data.success === true) {
|
|
// Create a result card with iframe
|
|
const resultCard = document.createElement('div');
|
|
resultCard.className = 'card shadow border-0 rounded-lg mb-5';
|
|
|
|
resultCard.innerHTML = `
|
|
<div class="card-header bg-success text-white py-3 d-flex justify-content-between align-items-center">
|
|
<h3 class="h5 mb-0">Result for ${escapeHtml(url)}</h3>
|
|
<div>
|
|
<button class="btn btn-sm btn-light ms-2" id="new-tab">
|
|
<i class="bi bi-code-slash me-1"></i>View in new tab
|
|
</button>
|
|
<button class="btn btn-sm btn-light ms-2" id="view-source">
|
|
<i class="bi bi-code-slash me-1"></i>View Source
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<iframe id="result-iframe" style="width:100%; height:600px; border:0;"></iframe>
|
|
</div>
|
|
`;
|
|
|
|
resultsContainer.appendChild(resultCard);
|
|
|
|
// Get reference to the iframe and buttons
|
|
const iframe = document.getElementById('result-iframe');
|
|
const viewSourceButton = document.getElementById('view-source');
|
|
const newTabButton = document.getElementById('new-tab');
|
|
|
|
const cleanedHtml = removeScripts(data.result);
|
|
|
|
// Create a blob URL from the cleaned HTML content
|
|
const blob = new Blob([cleanedHtml], { type: 'text/html' });
|
|
const blobUrl = URL.createObjectURL(blob);
|
|
|
|
// Set the iframe src to the blob URL
|
|
iframe.src = blobUrl;
|
|
|
|
|
|
// Add event listener to view source button
|
|
viewSourceButton.addEventListener('click', function () {
|
|
// Show source code in a modal or new window
|
|
const sourceWindow = window.open('', '_blank');
|
|
sourceWindow.document.write(`
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Source for ${escapeHtml(url)}</title>
|
|
<style>
|
|
body { font-family: monospace; white-space: pre-wrap; padding: 20px; }
|
|
</style>
|
|
</head>
|
|
<body>${escapeHtml(data.result)}</body>
|
|
</html>
|
|
`);
|
|
sourceWindow.document.close();
|
|
});
|
|
|
|
// Add event listener to new tab button
|
|
newTabButton.addEventListener('click', function () {
|
|
// Get URL from window.location
|
|
const proxyurl = `${window.location.protocol}//${window.location.host}/proxy/${url}`;
|
|
|
|
// Open host/proxy/url in new tab
|
|
window.open(proxyurl, '_blank');
|
|
});
|
|
|
|
// Set up cleanup when iframe is no longer needed
|
|
window.addEventListener('beforeunload', function () {
|
|
URL.revokeObjectURL(blobUrl);
|
|
});
|
|
} else {
|
|
// Show error message
|
|
showMessage(data.error || 'Failed to get content', 'error');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
showMessage(`Request failed: ${error.message}`, 'error');
|
|
})
|
|
.finally(() => {
|
|
// Reset button state
|
|
curlButton.disabled = false;
|
|
curlButton.innerHTML = '<i class="bi bi-shield-check me-2"></i>HTTP Request';
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Remove all script tags and event handlers from HTML content
|
|
* @param {string} html - The HTML content
|
|
* @returns {string} - HTML content with scripts removed
|
|
*/
|
|
function removeScripts(html) {
|
|
// Create a DOM parser to work with the HTML
|
|
const parser = new DOMParser();
|
|
const doc = parser.parseFromString(html, 'text/html');
|
|
|
|
// Remove all script elements
|
|
const scripts = doc.getElementsByTagName('script');
|
|
while (scripts.length > 0) {
|
|
scripts[0].parentNode.removeChild(scripts[0]);
|
|
}
|
|
|
|
// Remove inline event handlers from all elements
|
|
const allElements = doc.getElementsByTagName('*');
|
|
for (let i = 0; i < allElements.length; i++) {
|
|
const element = allElements[i];
|
|
const attrs = element.attributes;
|
|
const attrsToRemove = [];
|
|
|
|
// Collect all event handler attributes (on*)
|
|
for (let j = 0; j < attrs.length; j++) {
|
|
if (attrs[j].name.toLowerCase().startsWith('on')) {
|
|
attrsToRemove.push(attrs[j].name);
|
|
}
|
|
}
|
|
|
|
// Remove the collected attributes
|
|
attrsToRemove.forEach(attr => {
|
|
element.removeAttribute(attr);
|
|
});
|
|
}
|
|
|
|
// Return the cleaned HTML
|
|
return doc.documentElement.outerHTML;
|
|
}
|
|
/**
|
|
* Display a message in the results container
|
|
* @param {string} message - The message to display
|
|
* @param {string} type - Message type (error, success, info)
|
|
*/
|
|
function showMessage(message, type) {
|
|
// Clear previous content
|
|
resultsContainer.innerHTML = '';
|
|
|
|
// Create alert element
|
|
const alert = document.createElement('div');
|
|
alert.className = `alert alert-${getAlertClass(type)} shadow-sm`;
|
|
alert.innerHTML = message;
|
|
|
|
// Add the alert to the results container
|
|
resultsContainer.appendChild(alert);
|
|
}
|
|
|
|
/**
|
|
* Get Bootstrap alert class based on message type
|
|
* @param {string} type - Message type
|
|
* @returns {string} - Bootstrap alert class
|
|
*/
|
|
function getAlertClass(type) {
|
|
switch (type) {
|
|
case 'error': return 'danger';
|
|
case 'success': return 'success';
|
|
case 'info': default: return 'info';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Escape HTML special characters to prevent XSS
|
|
* @param {string} text - Text to escape
|
|
* @returns {string} - Escaped text
|
|
*/
|
|
function escapeHtml(text) {
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
// Check if params are present
|
|
if (window.location.search) {
|
|
const params = new URLSearchParams(window.location.search);
|
|
const url = params.get('url');
|
|
if (url) {
|
|
// Add url to input
|
|
curlUrlInput.value = url;
|
|
// Show loading state
|
|
curlButton.disabled = true;
|
|
curlButton.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Loading...';
|
|
handleCurlRequest(url);
|
|
}
|
|
}
|
|
}); |