admin管理员组

文章数量:1122832

I've been trying to make a proxy server, and I'm having trouble requesting data from Google and displaying it. As mentioned in the title, it just says, "www.google refused to connect." I'm mostly a beginner at JS- learned Java when I was in 5th grade and started JS in 7th. However, I only have experience with Pure JS, and not HTML/CSS. Here's the code I used- HTML/CSS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabbed Interface</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=".png" alt="Google Logo" class="logo">
    <div class="search-box">
        <input type="text" placeholder="Search Google or type a URL">
        <button>&#x1F50D;</button>
    </div>
    <div class="buttons">
        <button>Google Search</button>
        <button>I'm Feeling Lucky</button>
    </div>
</div>

<script src="index.js"></script>

</body>
</html>

JS (Only the "subtabbing" works. The request doesn't):

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=".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 id="${newTabId}-search-btn">&#x1F50D;</button>
        </div>
        <div class="buttons">
            <button>Google Search</button>
            <button>I'm Feeling Lucky</button>
        </div>
        <div id="${newTabId}-results" class="search-results">
            <!-- Iframe for displaying the Google page -->
            <iframe id="${newTabId}-iframe" class="search-iframe" style="width: 100%; height: 80vh; display: none;" frameborder="0"></iframe>
        </div>
    `;
    document.body.appendChild(newTabContent);
}

I've looked at other proxies (e.g. Rammerhead web-proxy, link: /), but I just don't understand how they get it to work. I think they use HTTP/HTTPS requests instead of direct fetches to Google's API, but I'd greatly appreciate it if anyone could get this to work (requesting and loading the data from Google)!

I've been trying to make a proxy server, and I'm having trouble requesting data from Google and displaying it. As mentioned in the title, it just says, "www.google.com refused to connect." I'm mostly a beginner at JS- learned Java when I was in 5th grade and started JS in 7th. However, I only have experience with Pure JS, and not HTML/CSS. Here's the code I used- HTML/CSS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabbed Interface</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 type="text" placeholder="Search Google or type a URL">
        <button>&#x1F50D;</button>
    </div>
    <div class="buttons">
        <button>Google Search</button>
        <button>I'm Feeling Lucky</button>
    </div>
</div>

<script src="index.js"></script>

</body>
</html>

JS (Only the "subtabbing" works. The request doesn't):

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 id="${newTabId}-search-btn">&#x1F50D;</button>
        </div>
        <div class="buttons">
            <button>Google Search</button>
            <button>I'm Feeling Lucky</button>
        </div>
        <div id="${newTabId}-results" class="search-results">
            <!-- Iframe for displaying the Google page -->
            <iframe id="${newTabId}-iframe" class="search-iframe" style="width: 100%; height: 80vh; display: none;" frameborder="0"></iframe>
        </div>
    `;
    document.body.appendChild(newTabContent);
}

I've looked at other proxies (e.g. Rammerhead web-proxy, link: https://freenomisratelimitingme.gq/), but I just don't understand how they get it to work. I think they use HTTP/HTTPS requests instead of direct fetches to Google's API, but I'd greatly appreciate it if anyone could get this to work (requesting and loading the data from Google)!

  • javascript
  • req
Share Improve this question edited Nov 23, 2024 at 0:26 ermmmmm asked Nov 23, 2024 at 0:13 ermmmmmermmmmm 236 bronze badges
Add a comment  | 

1 Answer 1

Reset to default 1

I think your key issue here is what you specifically understand to be a “web proxy”.

TL;DR: an <iframe> is not at all functionally the same as an actual web proxy, as the tool you linked is using in the background. This may seem to you an exercise in pedantry, but the technical functionality and intended uses of both are quite different.

In your code, the <iframe> element essentially instructs the user’s browser to go out and fetch the contents of an arbitrary URL and display it within the broader context of the containing webpage. The use of <iframe>s to conduct clickjacking attacks led browser vendors to implementing support for the X-Frame-Options header around 2009-ish (later on codified as RFC 7034) to let servers indicate to the requesting client browsers whether a page should be viewable from within an <iframe> element.

The contemporary web’s support of Content Security Policy headers and its frame-ancestors directive has largely superseded the use of X-Frame-Options, but the point remains that webmasters can and often do use these mechanisms to prevent the use of their pages in arbitrary third party <iframe>s like yours. Google is telling your browser: “Hey, if this was something you were told to load to an <iframe>, don’t do that please.”

On the modern web, there is very little value in allowing your site to be included in an <iframe> by random third parties, so anyone like Google with an ounce of concern for users’ security will implement one or both of these mechanisms as a standard.

A proper proxy server, on the other hand, is not a browser and does not, by design, implement respect for either of these mechanisms. There are many different types of proxies for solving different challenges; in a nutshell, an actual proxy will serve as a direct intermediary between the resource (page at a URL) and you:

  1. You talk to the proxy and tell it what it is you’re requesting from the target
  2. The proxy talks to the target
  3. The target responds to the proxy
  4. The proxy responds to you with the contents of the target’s response

If you’re looking to bypass the aforementioned restrictions on using <iframe>s in the way it seems you’d like to, you’ll need a backend proxy server that your HTML and JavaScript interacts with directly to then retrieve the contents of URLs only your behalf to make this work.

本文标签： javascriptIs there a way to get aroundquotwwwgooglecom refused to connectquotStack Overflow

版权声明：本文标题：javascript - Is there a way to get around, &quot;www.google.com refused to connect?&quot; - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1736300256a1930750.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。