身為一名網頁設計師,我深知網站安全對於每個專案的重要性。今天要和大家分享的是 Cookie 安全設定中最關鍵的 SameSite 屬性,這個議題不僅攸關使用者隱私,更是防範 CSRF 攻擊的第一道防線。
網站安全同源政策探討SameSite相關設定
讓我從工程師的角度,為各位詳細解析 SameSite 的重要性與實作方式。
SameSite 是什麼?為什麼我們需要它?
還記得以前做專案時,常常為了處理跨站請求傷透腦筋。直到 Chrome 推出了 SameSite 機制,這個情況才有了重大改善。SameSite 其實就像是 Cookie 的門衛,能夠決定哪些網站可以存取我們設定的 Cookie。
舉個例子,假設你正在開發一個電商網站:
- 沒有 SameSite 保護:任何外部網站都可能透過使用者的瀏覽器存取你的 Cookie
- 有 SameSite 保護:你可以精確控制哪些情況下允許 Cookie 被傳送
SameSite 的三種模式比較
來看看 SameSite 提供的三種安全等級:
模式 | 安全等級 | 適用情境 | 特點 |
---|---|---|---|
Strict | 最嚴格 | 高安全性需求的網站 | 只允許同站請求攜帶 Cookie |
Lax | 中等 | 一般網站(預設值) | 允許部分跨站請求 |
None | 寬鬆 | 需要跨站互動的服務 | 必須搭配 Secure 屬性 |
SameSite 實作指南
1. 基礎設定方式
身為網頁設計師,我們最常在後端這樣設定 Cookie:
php// PHP 設定範例
setcookie('sessionId', $value, [
'samesite' => 'Lax',
'secure' => true,
'httponly' => true
]);
javascript// Node.js Express 設定範例 res.cookie('sessionId', value, {
sameSite: 'Lax',
secure: true,
httpOnly: true
});
2. 不同情境的 SameSite 設定建議
一般網站後台
httpSet-Cookie: sessionId=abc123; SameSite=Strict; Secure; HttpOnly
一般網站前台
httpSet-Cookie: preferences=dark-mode; SameSite=Lax; Secure
第三方服務整合
httpSet-Cookie: trackingId=xyz789; SameSite=None; Secure
SameSite 實作注意事項
- 瀏覽器相容性檢查 老舊瀏覽器可能不支援 SameSite,建議加入以下偵測程式:
javascriptfunction isSameSiteSupported() {
return 'SameSite' in document.createElement('cookie');
}
- 常見問題排除
- Cookie 無法跨域傳送
- 第三方服務整合失敗
- 舊版瀏覽器相容性問題
效能優化建議
為了讓網站在導入 SameSite 後還能保持良好效能,以下是幾點建議:
- Cookie 分類管理
- 將同源和跨源 Cookie 分開管理
- 適當設定 Cookie 過期時間
- 減少不必要的 Cookie 數量
- 載入優化
- 使用 CDN 載入第三方資源
- 實作 Cookie-free domain
- 善用瀏覽器快取機制
安全性提升措施
除了設定 SameSite 外,建議同時實施以下安全措施:
- HTTP 安全標頭設定
httpStrict-Transport-Security: max-age=31536000; includeSubDomains
X-Frame-Options: SAMEORIGIN
X-Content-Type-Options: nosniff
- CSP 內容安全政策
httpContent-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline';
SameSite 未來發展
隨著瀏覽器不斷進化,SameSite 的重要性只會越來越高。Chrome 已經將 Lax
設為預設值,其他瀏覽器也陸續跟進。身為網頁設計師,我們必須及早適應這個趨勢。
實戰案例分享
在我最近的一個專案中,我們是這樣規劃 SameSite 的:
- 會員系統
- 登入 Cookie:
SameSite=Strict
- 使用者偏好:
SameSite=Lax
- 追蹤分析:
SameSite=None
- 購物車系統
- 購物車 ID:
SameSite=Lax
- 結帳 Session:
SameSite=Strict
結論與建議
SameSite 的設定看似簡單,但要做好確實不容易。以下是我的建議:
- 優先考慮安全性,除非必要否則不要使用
None
- 定期檢查 Cookie 設定是否合理
- 持續關注瀏覽器的政策變更
- 做好錯誤處理與降級方案
最後,提醒大家:網站安全是持續性的工作,SameSite 只是其中一環。我們要以更全面的角度來規劃網站的安全架構,才能真正保護使用者的資料安全。
參考資源
- MDN Web Docs - SameSite Cookies
- Chrome Platform Status
- RFC 6265bis
- OWASP Security Guidelines
希望這篇文章能幫助大家更了解 SameSite 的重要性,如果有任何問題,歡迎在我們臉書留言討論!
筆記XOOPS如果有串接金流,需要會員登錄狀態接收金流公司回傳,相關設定kernel/session.php
public function __construct(XoopsDatabase $db)
{
global $xoopsConfig;
$this->db = $db;
// after php 7.3 we just let php handle the session cookie
$lifetime = ($xoopsConfig['use_mysession'] && $xoopsConfig['session_name'] != '')
? $xoopsConfig['session_expire'] * 60
: ini_get('session.cookie_lifetime');
$secure = (XOOPS_PROT === 'https://');
if (PHP_VERSION_ID >= 70300) {
$options = array(
'lifetime' => $lifetime,
'path' => '/',
'domain' => XOOPS_COOKIE_DOMAIN,
'secure' => $secure,
'httponly' => true,
//'samesite' => 'strict',
'samesite' => 'Lax',//HACK BY MASON
);
session_set_cookie_params($options);
} else {
session_set_cookie_params($lifetime, '/', XOOPS_COOKIE_DOMAIN, $secure, true);
}
}
CONTACT INFORMATION