326 lines
10 KiB
HTML
326 lines
10 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Dev: Network</title>
|
||
|
|
<link href="../example/lib/weui.min.css" rel="stylesheet"/>
|
||
|
|
<link href="../example/lib/demo.css" rel="stylesheet"/>
|
||
|
|
|
||
|
|
<script src="../dist/vconsole.min.js"></script>
|
||
|
|
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
||
|
|
</head>
|
||
|
|
<body ontouchstart>
|
||
|
|
<div class="page">
|
||
|
|
<a onclick="getAjax()" href="javascript:;" class="weui_btn weui_btn_default">getAjax</a>
|
||
|
|
<a onclick="postAjax()" href="javascript:;" class="weui_btn weui_btn_default">postAjax</a>
|
||
|
|
<a onclick="getFetch()" href="javascript:;" class="weui_btn weui_btn_default">getFetch</a>
|
||
|
|
<a onclick="getFetchSimple()" href="javascript:;" class="weui_btn weui_btn_default">getFetch(simple)</a>
|
||
|
|
<a onclick="postFetch()" href="javascript:;" class="weui_btn weui_btn_default">postFetch</a>
|
||
|
|
<a onclick="postFetchByRequest()" href="javascript:;" class="weui_btn weui_btn_default">postFetchByRequest</a>
|
||
|
|
<a onclick="getFetchText()" href="javascript:;" class="weui_btn weui_btn_default">getFetchText</a>
|
||
|
|
<a onclick="postImage()" href="javascript:;" class="weui_btn weui_btn_default">postImage</a>
|
||
|
|
<a onclick="sendBeacon()" href="javascript:;" class="weui_btn weui_btn_default">sendBeacon</a>
|
||
|
|
<a onclick="axiosRequest('GET')" href="javascript:;" class="weui_btn weui_btn_default">getAxios</a>
|
||
|
|
<a onclick="optionsXHR()" href="javascript:;" class="weui_btn weui_btn_default">optionsXHR</a>
|
||
|
|
<a onclick="optionsFetch()" href="javascript:;" class="weui_btn weui_btn_default">optionsFetch</a>
|
||
|
|
<a onclick="loadImgError()" href="javascript:;" class="weui_btn weui_btn_default">loadImgError</a>
|
||
|
|
<a onclick="loadScriptError()" href="javascript:;" class="weui_btn weui_btn_default">loadScriptError</a>
|
||
|
|
<a onclick="loadVideoError()" href="javascript:;" class="weui_btn weui_btn_default">loadVideoError</a>
|
||
|
|
<a onclick="loadLinkError()" href="javascript:;" class="weui_btn weui_btn_default">loadLinkError</a>
|
||
|
|
<a onclick="loadAudioError()" href="javascript:;" class="weui_btn weui_btn_default">loadAudioError</a>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
window.vConsole = new window.VConsole({
|
||
|
|
maxLogNumber: 1000,
|
||
|
|
// disableLogScrolling: true,
|
||
|
|
onReady: function() {
|
||
|
|
console.log('vConsole is ready.');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// setInterval(() => {
|
||
|
|
// postAjax();
|
||
|
|
// }, 300);
|
||
|
|
|
||
|
|
function postAjax() {
|
||
|
|
console.info('postAjax() Start, response should be logged after End');
|
||
|
|
const xhr = new XMLHttpRequest();
|
||
|
|
xhr.onload = () => {
|
||
|
|
console.log('postAjax Response:', JSON.parse(xhr.response));
|
||
|
|
};
|
||
|
|
xhr.onerror = () => {
|
||
|
|
console.log('postAjax Error');
|
||
|
|
};
|
||
|
|
xhr.onreadystatechange = () => {
|
||
|
|
console.log('onreadystatechange', `readyState=${xhr.readyState}`, `status=${xhr.status}`);
|
||
|
|
};
|
||
|
|
xhr.open('POST', './data/large.json?method=fetchPost&c=中文');
|
||
|
|
xhr.send({
|
||
|
|
foo: 'bar',
|
||
|
|
id: `${Math.random()}${Math.random()}${Math.random()}${Math.random()}${Math.random()}${Math.random()}`,
|
||
|
|
type: 'xhr',
|
||
|
|
'<xss0>': '<xss1> XSS Attack!'
|
||
|
|
});
|
||
|
|
// xhr.send(JSON.stringify({foo: 'bar', id: Math.random(), '<xss0>': '<xss1> XSS Attack!'}));
|
||
|
|
console.info('postAjax() End');
|
||
|
|
}
|
||
|
|
|
||
|
|
function getAjax() {
|
||
|
|
console.info('getAjax() Start, response should be logged after End');
|
||
|
|
const url = window.location.origin + '/dev/data/success.json?method=xhrGet&id=' + Math.random() + '&<xss0>';
|
||
|
|
const xhr = new XMLHttpRequest();
|
||
|
|
xhr.open('GET', url);
|
||
|
|
xhr.setRequestHeader('custom-header', 'foobar');
|
||
|
|
xhr.send();
|
||
|
|
xhr.onload = () => {
|
||
|
|
console.log('getAjax Response:', JSON.parse(xhr.response));
|
||
|
|
};
|
||
|
|
xhr.onerror = () => {
|
||
|
|
console.log('getAjax Error');
|
||
|
|
};
|
||
|
|
console.info('getAjax() End');
|
||
|
|
}
|
||
|
|
|
||
|
|
function getFetch() {
|
||
|
|
console.info('getFetch() Start, response should be logged after End');
|
||
|
|
window.fetch('./data/success.json?method=fetchGet&id=' + Math.random(), {
|
||
|
|
method: 'GET',
|
||
|
|
headers: {
|
||
|
|
'custom-header': 'foobar',
|
||
|
|
'content-type': 'application/json'
|
||
|
|
},
|
||
|
|
}).then((data) => {
|
||
|
|
return data.json();
|
||
|
|
}).then((data) => {
|
||
|
|
console.log('getFetch Response:', data);
|
||
|
|
});
|
||
|
|
console.info('getFetch() End');
|
||
|
|
}
|
||
|
|
|
||
|
|
function getFetchSimple() {
|
||
|
|
console.info('getFetchSimple() Start, response should be logged after End');
|
||
|
|
window.fetch('./data/success.json?type=fetchGet&id=' + Math.random()).then((data) => {
|
||
|
|
return data.json();
|
||
|
|
}).then((data) => {
|
||
|
|
console.log('getFetchSimple Response:', data);
|
||
|
|
});
|
||
|
|
console.info('getFetchSimple() End');
|
||
|
|
}
|
||
|
|
|
||
|
|
function postFetch() {
|
||
|
|
console.info('postFetch() Start, response should be logged after End');
|
||
|
|
window.fetch('./data/success.json?method=fetchPost', {
|
||
|
|
method: 'POST',
|
||
|
|
body: { foo: 'bar', id: Math.random(), type: 'fetch' },
|
||
|
|
// body: new Blob([new ArrayBuffer(233)], { type: 'image/png' }),
|
||
|
|
headers: {
|
||
|
|
'custom-header': 'foobar',
|
||
|
|
// 'content-type': 'application/json'
|
||
|
|
// 'content-type': 'application/x-www-form-urlencoded'
|
||
|
|
'content-type': 'multipart/form-data',
|
||
|
|
'xss': '<xss1> XSS Attack!'
|
||
|
|
},
|
||
|
|
}).then((data) => {
|
||
|
|
return data.json();
|
||
|
|
}).then((data) => {
|
||
|
|
console.log('postFetch Response:', data);
|
||
|
|
}).catch((error) => {
|
||
|
|
console.error('postFetch Error:', error);
|
||
|
|
});
|
||
|
|
console.info('postFetch() End');
|
||
|
|
}
|
||
|
|
|
||
|
|
function postFetchByRequest() {
|
||
|
|
console.info('postFetchByRequest() Start, response should be logged after End');
|
||
|
|
const headers = new Headers();
|
||
|
|
headers.append('custom-header', 'foobar');
|
||
|
|
// headers.append('content-type', 'application/json');
|
||
|
|
headers.append('content-type', 'application/x-www-form-urlencoded');
|
||
|
|
const req = new Request('./data/success.json?method=fetchPost&id=' + Math.random(), {
|
||
|
|
method: 'POST',
|
||
|
|
body: { foo: 'bar', id: Math.random() },
|
||
|
|
// body: new Blob([new ArrayBuffer(233)], { type: 'image/png' }),
|
||
|
|
headers: headers,
|
||
|
|
});
|
||
|
|
window.fetch(req).then((data) => {
|
||
|
|
return data.json();
|
||
|
|
}).then((data) => {
|
||
|
|
console.log('postFetchByRequest Response:', data);
|
||
|
|
}).catch((error) => {
|
||
|
|
console.error('postFetchByRequest Error:', error);
|
||
|
|
});
|
||
|
|
console.info('postFetchByRequest() End');
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function getFetchText() {
|
||
|
|
console.info('getFetchText() Start, response should be logged after End');
|
||
|
|
window.fetch('./data/success.txt?type=fetchGet&id=' + Math.random(), {
|
||
|
|
method: 'GET',
|
||
|
|
headers: {
|
||
|
|
'custom-header': 'foobar',
|
||
|
|
'content-type': 'application/json'
|
||
|
|
},
|
||
|
|
}).then((data) => {
|
||
|
|
return data.text();
|
||
|
|
}).then((data) => {
|
||
|
|
console.log('getFetchText Response:', data);
|
||
|
|
});
|
||
|
|
console.info('getFetchText() End');
|
||
|
|
}
|
||
|
|
|
||
|
|
function postImage() {
|
||
|
|
console.info('postImage() Start, response should be logged after End');
|
||
|
|
const xhr = new XMLHttpRequest();
|
||
|
|
xhr.open('POST', '../example/snapshot/panel_log.jpg?method=xhrPost&id=' + Math.random());
|
||
|
|
xhr.send();
|
||
|
|
|
||
|
|
window.fetch('../example/snapshot/qrcode.png?method=fetchPost&id=' + Math.random(), {
|
||
|
|
method: 'POST',
|
||
|
|
});
|
||
|
|
console.info('postImage() End');
|
||
|
|
}
|
||
|
|
|
||
|
|
function sendBeacon() {
|
||
|
|
console.info('sendBeacon() Start, response should be logged after End');
|
||
|
|
window.navigator.sendBeacon('./data/success.json?method=beacon', JSON.stringify({
|
||
|
|
foo: 'bar',
|
||
|
|
id: Math.random(),
|
||
|
|
type: 'sendBeacon'
|
||
|
|
}));
|
||
|
|
console.info('sendBeacon() End');
|
||
|
|
}
|
||
|
|
|
||
|
|
function axiosRequest(method) {
|
||
|
|
console.info('axiosRequest() Start');
|
||
|
|
axios({
|
||
|
|
method,
|
||
|
|
url: './data/success.json?method=axios&r=' + Math.random(),
|
||
|
|
headers: { 'content-type': 'application/x-www-form-urlencoded' },
|
||
|
|
data: {
|
||
|
|
foo: 'bar'
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.then(function(response) {
|
||
|
|
console.log('axiosRequest response:', response);
|
||
|
|
})
|
||
|
|
.catch(function(error) {
|
||
|
|
console.log('axiosRequest error:', error);
|
||
|
|
});
|
||
|
|
console.info('axiosRequest() End');
|
||
|
|
}
|
||
|
|
|
||
|
|
function sendBeacon() {
|
||
|
|
console.info('sendBeacon() Start, response should be logged after End');
|
||
|
|
window.navigator.sendBeacon('./data/success.json?method=beacon', JSON.stringify({
|
||
|
|
foo: 'bar',
|
||
|
|
id: Math.random(),
|
||
|
|
type: 'sendBeacon'
|
||
|
|
}));
|
||
|
|
console.info('sendBeacon() End');
|
||
|
|
}
|
||
|
|
|
||
|
|
function axiosRequest(method) {
|
||
|
|
console.info('axiosRequest() Start');
|
||
|
|
axios({
|
||
|
|
method,
|
||
|
|
url: './data/success.json?method=axios&r=' + Math.random(),
|
||
|
|
headers: { 'content-type': 'application/x-www-form-urlencoded' },
|
||
|
|
data: {
|
||
|
|
foo: 'bar'
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.then(function(response) {
|
||
|
|
console.log('axiosRequest response:', response);
|
||
|
|
})
|
||
|
|
.catch(function(error) {
|
||
|
|
console.log('axiosRequest error:', error);
|
||
|
|
});
|
||
|
|
console.info('axiosRequest() End');
|
||
|
|
}
|
||
|
|
|
||
|
|
function optionsXHR() {
|
||
|
|
console.info('optionsXHR() Start');
|
||
|
|
const url = window.location.origin + '/dev/data/a.json?method=optionsXHR&s=500&id=' + Math.random() + '&<xss0>';
|
||
|
|
const xhr = new XMLHttpRequest();
|
||
|
|
xhr.open('OPTIONS', url);
|
||
|
|
xhr.setRequestHeader('custom-header', 'foobar');
|
||
|
|
xhr.send();
|
||
|
|
xhr.onload = () => {
|
||
|
|
console.log('optionsXHR Response:', xhr.response);
|
||
|
|
};
|
||
|
|
xhr.onerror = () => {
|
||
|
|
console.log('optionsXHR Error');
|
||
|
|
};
|
||
|
|
console.info('optionsXHR() End');
|
||
|
|
}
|
||
|
|
|
||
|
|
function optionsFetch() {
|
||
|
|
console.info('optionsFetch() Start');
|
||
|
|
window.fetch('./data/a.json?method=optionsFetch&s=403&t=300', {
|
||
|
|
method: 'OPTIONS',
|
||
|
|
}).then((data) => {
|
||
|
|
console.log('optionsFetch Response:', data);
|
||
|
|
}).catch((error) => {
|
||
|
|
console.error('optionsFetch Error:', error);
|
||
|
|
});
|
||
|
|
console.info('optionsFetch() End');
|
||
|
|
}
|
||
|
|
|
||
|
|
function loadImgError() {
|
||
|
|
console.info('loadImgError() Start');
|
||
|
|
const img = new Image();
|
||
|
|
img.src = 'http://xxxx.jpg';
|
||
|
|
document.body.appendChild(img);
|
||
|
|
img.onerror = () => {
|
||
|
|
console.info('loadImgError() End');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function loadScriptError() {
|
||
|
|
console.info('loadScriptError() Start');
|
||
|
|
const scri = document.createElement("script");
|
||
|
|
scri.src = 'http://xxxx.js';
|
||
|
|
document.body.appendChild(scri);
|
||
|
|
scri.onerror = () => {
|
||
|
|
console.info('loadScriptError() End');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function loadVideoError() {
|
||
|
|
console.info('loadVideoError() Start');
|
||
|
|
const vid = document.createElement("video");
|
||
|
|
vid.src = 'http://xxxx.mp4';
|
||
|
|
document.body.appendChild(vid);
|
||
|
|
vid.onerror = () => {
|
||
|
|
console.info('loadVideoError() End');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function loadLinkError() {
|
||
|
|
console.info('loadLinkError() Start');
|
||
|
|
const link = document.createElement("link");
|
||
|
|
link.rel = 'stylesheet';
|
||
|
|
link.type = 'text/css';
|
||
|
|
link.href = './data/a.css?s=404';
|
||
|
|
document.body.appendChild(link);
|
||
|
|
link.onerror = () => {
|
||
|
|
console.info('loadLinkError() End');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function loadAudioError() {
|
||
|
|
console.info('loadAudioError() Start');
|
||
|
|
const audio = document.createElement("Audio");
|
||
|
|
audio.src = 'http://xxxx.mp3';
|
||
|
|
document.body.appendChild(audio);
|
||
|
|
audio.onerror = () => {
|
||
|
|
console.info('loadAudioError() End');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|