Skip to content

Commit b5562ff

Browse files
committed
Made a more fun test page...
1 parent 523d4c6 commit b5562ff

File tree

5 files changed

+188
-28
lines changed

5 files changed

+188
-28
lines changed

test/echo.php

+1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
'headers' => getallheaders(),
99
];
1010

11+
header_remove();
1112
ob_start('ob_gzhandler');
1213
header('Content-Type: application/json; charset=utf-8');
1314
header('X-TestHeader: This header should come back through');

test/index.css

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
html {font-family: sans-serif}
2+
body {margin: .5em 2em}
3+
h2 {margin-top: 2.5em}
4+
pre, output
5+
{
6+
display: block;
7+
font-family: monospace;
8+
white-space: pre-wrap;
9+
padding: .75em 1em;
10+
border: 1px solid #ccc;
11+
transition: border-color 500ms ease-out;
12+
}
13+
div, output
14+
{
15+
position: relative;
16+
}
17+
output
18+
{
19+
margin-top: 2em;
20+
}
21+
div
22+
{
23+
margin-bottom: 3em;
24+
}
25+
button
26+
{
27+
font-size: large;
28+
position: absolute;
29+
padding: 0;
30+
right: -1rem;
31+
top: -1rem;
32+
}
33+
output, .active
34+
{
35+
border-color: #666;
36+
}

test/index.html

+28-28
Original file line numberDiff line numberDiff line change
@@ -4,41 +4,32 @@
44
<meta charset="utf-8" />
55
<title>PHP Cross-Origin Proxy test page</title>
66

7-
<style type="text/css">
8-
html {font-family: sans-serif;}
9-
body {margin: .5em 2em;}
10-
</style>
11-
12-
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
13-
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.js"></script>
14-
<script>
15-
$(function()
16-
{
17-
$(document).ajaxSend(onAjaxSend);
18-
});
19-
20-
function onAjaxSend(event, jqxhr, options)
21-
{
22-
//if(options.crossDomain)
23-
{
24-
jqxhr.setRequestHeader('X-Proxy-Url', options.url);
25-
options.url = 'proxy.php';
26-
options.url += '?_='+Date.now();
27-
}
28-
}
29-
</script>
7+
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.css">
8+
<link rel="stylesheet" type="text/css" href="index.css">
9+
10+
<script src="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.js"></script>
11+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
12+
<script src="index.js" defer></script>
3013
</head>
31-
<body>
14+
<body spellcheck="false">
15+
3216
<h1>PHP Cross Domain Proxy test page</h1>
33-
<p>A "jQuery enabled" test page where you can use the browser developer console to test.</p>
34-
<p><em>All</em> requests will be passed to the proxy so it can be tested even though requests aren't <em>actually</em> cross-domain.</p>
17+
<p>A "jQuery enabled" test page. Edit an example and push 🛫, or just use the browser developer console.</p>
18+
<p><em>All</em> requests will be sent through the proxy even if not <em>actually</em> cross-domain, since this is a test page for that proxy.</p>
3519

20+
<h2>Proxy whitelist</h2>
21+
<pre id="whitelist"></pre>
3622

3723
<h2>Examples</h2>
38-
<pre class="prettyprint" style="border:0;padding:0">
24+
25+
26+
<pre contenteditable>
3927
// GET, plain, no nothing
4028
$.get('http://example.com')
29+
</pre>
30+
4131

32+
<pre contenteditable>
4233
// GET, with a custom header, a proxied cookie, and some parameters using both url and data property
4334
$.ajax({
4435
method: 'GET',
@@ -49,29 +40,38 @@ <h2>Examples</h2>
4940
'X-Proxy-Cookie': 'jsessionid=AS348AF929FK219CKA9FK3B79870H;',
5041
},
5142
})
43+
</pre>
5244

45+
46+
<pre contenteditable>
5347
// POST, with both post data in property and a get parameter in the url
5448
$.ajax({
5549
method: 'POST',
5650
url: 'http://localhost/php-cross-domain-proxy/test/echo.php?c=3',
5751
data: {a:1, b:2},
5852
})
53+
</pre>
5954

55+
56+
<pre contenteditable>
6057
// PUT, with data encoded as json
6158
$.ajax({
6259
method: 'PUT',
6360
url: 'http://localhost/php-cross-domain-proxy/test/echo.php',
6461
contentType: 'application/json',
6562
data: JSON.stringify({a:1, b:2}),
6663
})
64+
</pre>
6765

66+
67+
<pre contenteditable>
6868
// DELETE, with get parameter
6969
$.ajax({
7070
method: 'DELETE',
7171
url: 'http://localhost/php-cross-domain-proxy/test/echo.php?id=1',
7272
})
73-
7473
</pre>
7574

75+
7676
</body>
7777
</html>

test/index.js

+115
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
2+
var sendBtn = '<button class="send">🛫</button>';
3+
var closeBtn = '<button class="close">❌</button>';
4+
var respOk = '🛬';
5+
var respBad = '💥';
6+
7+
8+
NProgress.configure({showSpinner: false});
9+
10+
// Get whitelist
11+
$.ajax({
12+
url: 'proxy.php?whitelist',
13+
async: false,
14+
success: function(data)
15+
{
16+
$('#whitelist').text(data);
17+
}
18+
});
19+
20+
// Hook up events
21+
$(document)
22+
.ajaxStart(NProgress.start)
23+
.ajaxStop(NProgress.done)
24+
.ajaxSend(onAjaxSend)
25+
.ajaxComplete(onAjaxComplete)
26+
.on('click', 'button.close', onClose)
27+
.on('click', 'button.send', onSend);
28+
29+
// Make fancy
30+
$('pre[contenteditable]')
31+
.on('keydown', onPreKeydown)
32+
.wrap('<div>')
33+
.after(sendBtn);
34+
35+
36+
37+
38+
39+
function onSend()
40+
{
41+
$('.active').removeClass('active');
42+
$('output').remove();
43+
44+
var pre = $(this)
45+
.siblings('pre')
46+
.addClass('active');
47+
try
48+
{
49+
var func = new Function(pre.text());
50+
func();
51+
}
52+
catch(e)
53+
{
54+
onAjaxComplete(null, {
55+
status: '-1',
56+
statusText: e,
57+
});
58+
}
59+
60+
}
61+
62+
63+
function onClose()
64+
{
65+
$('.active').removeClass('active');
66+
$(this)
67+
.parent()
68+
.fadeOut(function()
69+
{
70+
$(this).remove();
71+
});
72+
}
73+
74+
75+
function onAjaxSend(e, x, opts)
76+
{
77+
//if(opts.crossDomain)
78+
{
79+
x.setRequestHeader('X-Proxy-Url', opts.url);
80+
opts.url = 'proxy.php';
81+
opts.url += '?_='+Date.now();
82+
}
83+
}
84+
85+
function onAjaxComplete(e, x, opts)
86+
{
87+
var out = x.status >= 400 ? respBad : respOk;
88+
out += ' ' + x.status + ' ' + x.statusText;
89+
out += '\r\n' + x.getAllResponseHeaders()
90+
if(x.responseText)
91+
out += '\r\n' + x.responseText;
92+
93+
$('<output>')
94+
.text(out)
95+
.insertAfter('.active')
96+
.append(closeBtn)
97+
.hide()
98+
.fadeIn();
99+
100+
$('html,window')
101+
.scrollTop($('.active').offset().top-30);
102+
}
103+
104+
function onPreKeydown(e)
105+
{
106+
// CTRL+ENTER
107+
if(e.ctrlKey && e.which == 13)
108+
{
109+
$(this)
110+
.siblings('button.send')
111+
.trigger('click');
112+
return false;
113+
}
114+
return true;
115+
}

test/proxy.php

+8
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,14 @@
1616
['regex' => '%^http://www.yr.no/place/Norway/%'],
1717
];
1818

19+
// For the test page
20+
if(isset($_GET['whitelist']))
21+
{
22+
header("content-type: text/plain; charset=utf-8");
23+
preg_match('/\$whitelist = [^;]+;/sm', file_get_contents(__FILE__), $m);
24+
echo $m[0];
25+
return;
26+
}
1927

2028
// Call/Use the proxy
2129
Geekality\CrossOriginProxy::proxy($whitelist);

0 commit comments

Comments
 (0)