2 回答

TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超7個(gè)贊
需要處理的問題:
請求是否已發(fā)送?
嘗試跑步
axios.get('http://localhost/live-streaming-app/get_viewers.php?=')
.then(response => console.log(response))
在瀏覽器控制臺中查看控制臺中是否記錄了任何內(nèi)容。還要檢查開發(fā)工具中的“網(wǎng)絡(luò)”選項(xiàng)卡,以查看是否發(fā)送了請求。如果請求已發(fā)送,則請求的發(fā)送有效。如果沒有,則說明 URL 存在一些問題,需要修復(fù)。
代幣
發(fā)送此請求
axios.get('http://localhost/live-streaming-app/get_viewers.php?=' + token)
.then(response => console.log(response))
表示空字符串的值為token。另一方面,您的 PHP 代碼假設(shè)有一個(gè)名為 的參數(shù)token:
<?php
require 'connect.php';
$token = $_GET['token']; //This is the line which assumes that a parameter called token exists
$sql = "UPDATE `viewers` SET `logged_in`='false' WHERE `live_token`='{$token}'";
if(mysqli_query($con, $sql)){
http_response_code(201);
}
else {
http_response_code(422);
}
exit;
為了符合 PHP 代碼的假設(shè),您需要指定token名為 的參數(shù)的值token:
window.addEventListener("beforeunload", () => {
axios.get('http://localhost/live-streaming-app/get_viewers.php?token=' + token)
.then(response => console.log(response))
})
上面的修復(fù)應(yīng)該可以解決您所詢問的問題,但我們不要就此停止。
SQL注入
如果我從瀏覽器控制臺(或 cURL)發(fā)送此請求(不要運(yùn)行它,除非您創(chuàng)建備份)會怎樣:
axios.get("http://localhost/live-streaming-app/get_viewers.php?token=';delete from viewers where ''='")
.then(response => console.log(response))
?
然后你的 PHP 代碼將執(zhí)行:
UPDATE `viewers` SET `logged_in`='false' WHERE `live_token`='';delete from viewers where ''=''
viewers從數(shù)據(jù)庫中刪除所有內(nèi)容。使用PDO參數(shù)化您的查詢并使您的查詢免受此類攻擊。
概括
React 是一個(gè) Javascript 框架,這意味著無論 Javascript 能做什么,你的客戶端也能做到。確實(shí),某些功能不一定以 React 方式可用,但假設(shè) Javascript 能夠做到這一點(diǎn),那么您不必?fù)?dān)心這些功能是否可行。我傾向于認(rèn)為,當(dāng)客戶端發(fā)生很多事情時(shí),客戶端框架將變得不太有用,并且我認(rèn)為客戶端框架流行的主要原因是大多數(shù)程序員沒有意識到有多少Javascript 能夠做到的事情。我并不是說永遠(yuǎn)不應(yīng)該使用客戶端框架。我只是說,我見過程序員盲目迷戀客戶端框架和技術(shù),最終毀掉了他們所從事的項(xiàng)目。因此,當(dāng)您選擇客戶端技術(shù)堆棧時(shí),值得檢查客戶端所需的功能、不使用客戶端框架實(shí)現(xiàn)它所需的時(shí)間以及使用您可能考慮的每個(gè)框架實(shí)現(xiàn)它所需的時(shí)間使用。比較兩者并考慮截止日期和財(cái)務(wù)能力。如果您找不到使用客戶端框架的明顯且很好的理由,那么我建議不要使用它。因?yàn)?,歸根結(jié)底,如果在開發(fā)過程中由于某種原因您需要使用客戶端框架,您可以輕松地從不使用框架的位置轉(zhuǎn)向它。但是,如果您正在使用客戶端框架,并且事實(shí)證明它對您的項(xiàng)目不可行,那么重構(gòu)整個(gè)項(xiàng)目以不使用該框架通常意味著重新實(shí)現(xiàn)大部分客戶端。而這種問題往往不會在緊急情況下顯現(xiàn)出來。

TA貢獻(xiàn)1806條經(jīng)驗(yàn) 獲得超8個(gè)贊
無法保證事件中執(zhí)行的異步操作beforeunload將會完成,axios 使用異步方式發(fā)出請求。
您或許可以使用老式的 XHR 來發(fā)出同步請求。如果您轉(zhuǎn)到標(biāo)記為 的部分Adapting Sync XHR use cases to the Beacon API,他們將討論在卸載期間保持請求活動(dòng)的策略,因?yàn)橥?XHR 已被棄用。
請注意,同步 HTTP 請求通常不是一個(gè)好主意,因?yàn)樗鼈儠谕瓿蓵r(shí)導(dǎo)致頁面無響應(yīng)。我不確定卸載期間同步請求的行為是什么。
同步請求示例
logUser () {
var params = JSON.stringify({ locked_by: '' });
let xhr = new XMLHttpRequest()
xhr.open('PUT',Url, false) // `false` makes the request synchronous
xhr.setRequestHeader("Authorization", 'Bearer ' + localStorage.getItem('app_access_token'))
xhr.setRequestHeader("Content-length", params.length);
xhr.setRequestHeader("Content-type", "application/json; charset=utf-8")
xhr.responseType = 'arraybuffer'
xhr.onreadystatechange = function() {//Call a function when the state changes.
if(xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
}
筆記
沒有可靠的方法可以在選項(xiàng)卡/窗口關(guān)閉時(shí)執(zhí)行某些操作。這違背了“關(guān)閉”選項(xiàng)卡(即釋放資源)的原則。
我處理你的情況的方法是讓前端保存一些在選項(xiàng)卡關(guān)閉時(shí)自行消失的東西。
要么打開一個(gè)可用于許多其他目的的 websocket,當(dāng)它死機(jī)并且在幾秒鐘內(nèi)沒有返回時(shí),您就知道客戶端已斷開連接,或者在選項(xiàng)卡打開時(shí)以及錯(cuò)過了某個(gè)時(shí)間時(shí)發(fā)送常規(guī) ping幾次 ping 操作后,您就可以安全地假設(shè)客戶端已斷開連接。
- 2 回答
- 0 關(guān)注
- 313 瀏覽
添加回答
舉報(bào)