cookie的獲取有倆種方法，原生方法操作以及使用第三方庫來獲取。
1.原生操作方法獲取cookie
mounted() {
this.cookieValue = this.getCookie('yourCookieName'); // 調(diào)用cookie的方法，獲取某一個cookie的值
},
methods: {
getCookie(name) {
const cookies = document.cookie.split('; '); // 注意這里cookie是以; 分割
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].split('=');
if (decodeURIComponent(cookie[0]) === name) {
return decodeURIComponent(cookie[1]);
}
}
return null;
}
}
2.使用第三方庫來獲取cookie
首先你得先按照第三方庫
npm install js-cookie
//使用
<script>
import Cookies from 'js-cookie'; // 引入
export default {
data() {
return {
cookieValue: null
};
},
mounted() {
this.cookieValue = Cookies.get('yourCookieName'); // 操作獲取
}
};
</script>
以上是獲取cookie的倆種方法，下面是了解一下HttpOnly的作用
HTTP Cookie中的HttpOnly屬性是一種重要的安全機制，主要用于增強Web應(yīng)用的安全性。以下是對其作用的詳細(xì)解釋及相關(guān)注意事項：
1. HttpOnly的作用
防止JavaScript訪問：當(dāng)Cookie被標(biāo)記為HttpOnly時，客戶端腳本（如JavaScript）無法通過document.cookie讀取該Cookie的值。這有效降低了跨站腳本攻擊（XSS）中敏感信息（如會話ID）泄露的風(fēng)險。
僅限服務(wù)器交互：此類Cookie僅由瀏覽器在HTTP請求中自動發(fā)送到服務(wù)器，確保敏感數(shù)據(jù)僅在客戶端與服務(wù)器之間傳輸，不被前端代碼操作。
2. 如何設(shè)置HttpOnly
服務(wù)器在響應(yīng)頭中通過Set-Cookie字段設(shè)置，例如：
Set-Cookie: sessionid=abc123; HttpOnly; Path=/; Secure; SameSite=Strict
最佳實踐：通常與Secure（僅通過HTTPS傳輸）和SameSite（控制跨站發(fā)送）屬性結(jié)合使用，以多層防護提升安全性。
3. 適用場景
敏感信息保護：會話Cookie、身份驗證令牌等應(yīng)始終啟用HttpOnly。
非前端依賴的Cookie：若Cookie無需通過JavaScript訪問，均建議設(shè)置此屬性。
4. 注意事項
功能影響：若前端需通過JavaScript訪問特定Cookie（如某些自定義令牌），則不可標(biāo)記為HttpOnly，否則會導(dǎo)致功能異常。
不防XSS攻擊本身：HttpOnly僅減少XSS攻擊后的信息泄露，仍需配合輸入驗證、輸出編碼等措施防御XSS。
不防CSRF：需結(jié)合SameSite屬性、CSRF令牌等其他機制防范跨站請求偽造。
5. 瀏覽器兼容性
廣泛支持：主流現(xiàn)代瀏覽器均支持HttpOnly，舊版本瀏覽器（如IE6+）也兼容，無需擔(dān)憂兼容性問題。
6. 與其他屬性的協(xié)作
Secure：確保Cookie僅通過加密的HTTPS連接傳輸。
SameSite：限制Cookie在跨站請求中的發(fā)送，可設(shè)為Strict或Lax以防御CSRF。
總結(jié)
HttpOnly是防御XSS導(dǎo)致Cookie泄露的關(guān)鍵措施，合理設(shè)置可顯著提升應(yīng)用安全性。開發(fā)者需根據(jù)業(yè)務(wù)需求判斷Cookie是否需要前端訪問，避免誤用。同時，結(jié)合其他安全策略（如輸入過濾、HTTPS、CSRF防護）構(gòu)建全面防護體系。
