ermmmmm
ermmmmm

Reputation: 23

Why is my proxy displaying, "You are not connected to the Internet?"

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}')">&#x1F50D;</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')">&#x1F50D;</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

Answers (0)

Related Questions