Reputation: 23
I have a live server on a proxy, and whenever I search something up, it just says, "You are not connected to the Internet" or something like that. I think it may be due to the use of an iFrame and the X-Frame-Options HTTP header, but I'm not sure how to avoid it. Here's the relevant parts of the code: Server.js:
const express = require('express');
const https = require('https');
const http = require('http');
const app = express();
const port = 5500;
app.use(express.static('public'));
const rewriteUrls = (html, baseUrl) => {
return html.replace(/(href|src)="([^"]*)"/g, (match, attr, url) => {
const absoluteUrl = new URL(url, baseUrl).toString();
return `${attr}="/proxy?url=${encodeURIComponent(absoluteUrl)}"`;
});
};
app.get('/search', (req, res) => {
const query = req.query.q;
const googleSearchUrl = `https://www.google.com/search?q=${encodeURIComponent(query)}`;
https.get(googleSearchUrl, (response) => {
let data = '';
response.on('data', chunk => {
data += chunk;
});
response.on('end', () => {
const rewrittenData = rewriteUrls(data, googleSearchUrl);
res.send(rewrittenData);
});
}).on('error', (err) => {
res.status(500).send('Error: ' + err.message);
});
});
app.get('/urls', (req, res) => {
let targetUrl = decodeURIComponent(req.query.url);
const client = targetUrl.startsWith('https://') ? https : http;
console.log(`Fetching URL: ${targetUrl}`);
client.get(targetUrl, (response) => {
let data = '';
response.on('data', (chunk) => {
data += chunk;
});
response.on('end', () => {
res.send(data);
});
}).on('error', (err) => {
console.error('Error fetching URL:', err.message);
res.status(500).send('Error: ' + err.message);
});
});
app.listen(port, () => {
console.log(`Server is running at http://localhost:${port}`);
});
Index.js:
let tabCount = 1;
function showTab(tabId) {
const tabs = document.querySelectorAll('.tab-content');
tabs.forEach(tab => tab.classList.remove('active'));
document.getElementById(tabId).classList.add('active');
const tabElements = document.querySelectorAll('.tab');
tabElements.forEach(tab => tab.classList.remove('active'));
event.target.classList.add('active');
}
function addNewTab() {
tabCount++;
const newTabId = `tab${tabCount}`;
const newTab = document.createElement('div');
newTab.className = 'tab';
newTab.textContent = `Tab ${tabCount}`;
newTab.setAttribute('onclick', `showTab('${newTabId}')`);
document.querySelector('.add-tab').before(newTab);
const newTabContent = document.createElement('div');
newTabContent.id = newTabId;
newTabContent.className = 'tab-content';
newTabContent.innerHTML = `
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google Logo" class="logo">
<div class="search-box">
<input type="text" id="${newTabId}-search-input" placeholder="Search Google or type a URL">
<button onclick="browse('${newTabId}')">🔍</button>
</div>
<div class="buttons">
<button onclick="browse('${newTabId}')">Google Search</button>
</div>
<div class="search-results">
<div id="${newTabId}-content-display" class="content-display"></div>
</div>
`;
document.body.appendChild(newTabContent);
}
function browse(tabId) {
const searchInput = document.getElementById(`${tabId}-search-input`);
const iframe = document.getElementById(`${tabId}-iframe`);
const inputValue = searchInput.value.trim();
if (!inputValue) return;
const isUrl = /^https?:\/\//i.test(inputValue);
let fetchUrl;
if (isUrl) {
if (inputValue.includes('youtube.com/watch')) {
const videoId = new URL(inputValue).searchParams.get('v');
fetchUrl = `https://www.youtube.com/embed/${videoId}`;
} else {
fetchUrl = `/urls?url=${encodeURIComponent(inputValue)}`;
}
} else {
fetchUrl = `/search?q=${encodeURIComponent(inputValue)}`;
}
console.log('Fetching URL:', fetchUrl);
iframe.style.display = 'block';
iframe.src = fetchUrl;
}
document.addEventListener("keydown", function (event) {
if (event.key === "Enter") {
const activeTab = document.querySelector('.tab-content.active');
const activeTabId = activeTab.id;
browse(activeTabId);
}
});
Index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thing</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f1f3f4;
}
.tabs {
display: flex;
justify-content: center;
align-items: center;
background-color: white;
border-bottom: 1px solid #ccc;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
padding: 10px 0;
position: sticky;
top: 0;
z-index: 10;
}
.tab {
padding: 10px 20px;
margin: 0 5px;
cursor: pointer;
font-size: 16px;
color: #5f6368;
border-bottom: 3px solid transparent;
transition: border-color 0.3s;
}
.tab:hover {
color: #202124;
}
.tab.active {
color: #1a73e8;
border-bottom: 3px solid #1a73e8;
}
.add-tab {
font-size: 24px;
font-weight: bold;
cursor: pointer;
color: #5f6368;
padding: 0 10px;
transition: color 0.3s;
}
.add-tab:hover {
color: #202124;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
text-align: center;
margin-top: 50px;
}
.logo {
margin: 20px auto;
}
.search-box {
margin: 20px auto;
width: 60%;
display: flex;
align-items: center;
border: 1px solid #dfe1e5;
border-radius: 24px;
background-color: white;
padding: 5px 15px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.search-box input {
flex: 1;
border: none;
outline: none;
font-size: 16px;
padding: 10px;
}
.search-box button {
background: none;
border: none;
cursor: pointer;
color: #5f6368;
font-size: 18px;
}
.buttons {
margin: 20px auto;
}
.buttons button {
margin: 5px;
padding: 10px 20px;
font-size: 14px;
color: white;
background-color: #1a73e8;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
.buttons button:hover {
background-color: #1669c1;
}
</style>
</head>
<body>
<div class="tabs">
<div class="tab active" onclick="showTab('tab1')">Tab 1</div>
<div class="add-tab" onclick="addNewTab()">+</div>
</div>
<div id="tab1" class="tab-content active">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google Logo" class="logo">
<div class="search-box">
<input id="tab1-search-input" type="text" placeholder="Search Google or type a URL">
<button onclick="browse('tab1')">🔍</button>
</div>
<div class="buttons">
<button onclick="browse('tab1')">Google Search</button>
</div>
<div class="search-results">
<iframe id="tab1-iframe" class="search-iframe" style="width: 100%; height: 80vh;" frameborder="0"></iframe>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
Upvotes: 0
Views: 29