maxwellbo.github.io/fullscreen-proxy.html at master · MaxwellBo/maxwellbo.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Fullscreen Proxy</title>
  <meta name="robots" content="noindex">
</head>
<body>
  <header hidden id="toolbar">
    <div>
      <p>Loaded URL</p>
      <a class="url" id="target-link" href="#" rel="noopener noreferrer" target="_blank"></a>
    </div>
    <div>
      <button id="fullscreen-button" type="button">MAKE FULLSCREEN</button>
    </div>
  </header>

  <main hidden id="message"></main>

  <section hidden id="frame-shell">
    <iframe
      id="target-frame"
      title="Fullscreen proxy target"
      allow="fullscreen; autoplay; clipboard-read; clipboard-write"
      allowfullscreen
      referrerpolicy="no-referrer"
      width="100%"
      height="900"
    ></iframe>
  </section>

  <script>
    const toolbar = document.getElementById('toolbar');
    const message = document.getElementById('message');
    const frameShell = document.getElementById('frame-shell');
    const targetFrame = document.getElementById('target-frame');
    const targetLink = document.getElementById('target-link');
    const fullscreenButton = document.getElementById('fullscreen-button');

    function showMessage(html) {
      message.innerHTML = html;
      message.hidden = false;
      toolbar.hidden = true;
      frameShell.hidden = true;
    }

    function parseTargetUrl(value) {
      if (!value) {
        return null;
      }

      try {
        const parsed = new URL(value);
        if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') {
          return null;
        }
        return parsed;
      } catch (error) {
        return null;
      }
    }

    async function requestFullscreenFor(element) {
      if (element.requestFullscreen) {
        return element.requestFullscreen();
      }
      if (element.webkitRequestFullscreen) {
        return element.webkitRequestFullscreen();
      }
      throw new Error('Fullscreen API not supported in this browser.');
    }

    function getRawUrlParam() {
      const query = window.location.search.startsWith('?')
        ? window.location.search.slice(1)
        : window.location.search;

      const urlPrefixIndex = query.indexOf('url=');
      if (urlPrefixIndex === -1) {
        return null;
      }

      return query.slice(urlPrefixIndex + 4) || null;
    }

    function isFrameShellFullscreen() {
      return document.fullscreenElement === frameShell || document.webkitFullscreenElement === frameShell;
    }

    function syncFrameSize() {
      if (isFrameShellFullscreen()) {
        targetFrame.width = String(window.innerWidth);
        targetFrame.height = String(window.innerHeight);
        return;
      }

      targetFrame.width = '100%';
      targetFrame.height = String(Math.max(900, window.innerHeight - toolbar.offsetHeight - 16));
    }

    const targetUrl = parseTargetUrl(getRawUrlParam());

    if (!targetUrl) {
      showMessage(
        '<h1>Fullscreen proxy</h1>' +
        '<p>This page allows you to view a website in fullscreen mode on limited or locked down devices.</p>' +
        '<p>Open this page with a <code>?url=</code> query parameter containing an <code>http://</code> or <code>https://</code> URL.</p>' +
        '<p>Example: <code>?url=https://example.com</code></p>'
      );
    } else {
      document.title = 'Fullscreen Proxy: ' + targetUrl.hostname;
      targetFrame.src = targetUrl.toString();
      targetLink.href = targetUrl.toString();
      targetLink.textContent = targetUrl.toString();

      toolbar.hidden = false;
      frameShell.hidden = false;
      syncFrameSize();

      fullscreenButton.addEventListener('click', async () => {
        try {
          await requestFullscreenFor(frameShell);
        } catch (error) {
          showMessage(
            '<h1>Could not enter fullscreen</h1>' +
            '<p>' + error.message + '</p>'
          );
        }
      });

      targetFrame.addEventListener('load', () => {
        fullscreenButton.disabled = false;
      });

      window.addEventListener('resize', syncFrameSize);
      document.addEventListener('fullscreenchange', syncFrameSize);
      document.addEventListener('webkitfullscreenchange', syncFrameSize);

      targetFrame.addEventListener('error', () => {
        showMessage(
          '<h1>Unable to load the requested site</h1>' +
          '<p>The target may block being embedded in an iframe with <code>X-Frame-Options</code> or CSP <code>frame-ancestors</code>.</p>'
        );
      });
    }
  </script>
</body>
</html>