CKEditor 5 教學(五),超連結要小心的安全性問題

超連結是很多編輯器都會有的功能,CKEditor 也不例外
讓你在編輯內容中可以插入像是下方的連結

<a href="連結在此">我是超連結</a>

當文章中的連結會導向至其他網站時
這個時候網站通常會在新視窗中開啟連結,讓使用者可以保留原有可能還未閱讀完畢的頁面
而想要讓連結在新視窗中開啟,只需要在 a 標籤中加入 target="_blank" 就可以達成

<a href="連結在此" target="_blank">我是會在新視窗開啟的超連結</a>

但是 target="_blank" 這個屬性,其實潛藏一個安全性問題
當你在 A 網站點擊使用 target="_blank" 的連結時,在新視窗開啟的 B 網站可以透過 JavaScript 來操作 A 網站
最簡單的例子就是下面這行 JavaScript 程式碼

window.opener.location = '可能是惡意的網站連結';

只要 B 網站頁面上有包含這行程式碼
當你點開 B 網站時,A 網站就會自動轉址至 window.opener.location 設定的連結,有可能是釣魚頁面或是其他惡意的網站
為了避免這個安全問題,在使用 target="_blank" 時,通常會需要在加入 rel="noreferrer noopener" 這個屬性

<a href="連結在此" target="_blank" rel="noreferrer noopener">我是會在新視窗開啟的超連結</a>

如此一來,就可以避免 window.opener.location 造成的安全性問題

可以參考這個影片,說明非常清楚

 

將 CKEditor 的超連結加入 target="_blank" 與 rel="noreferrer noopener"


想要在 CKEditor 的超連結中加入 target="_blank" 與 rel="noreferrer noopener"
官方文件中有說明這部分,只需要在 ckeditor.js 中設定並使用 npm 重新 build 即可 

ClassicEditor.defaultConfig = {
	link: {
		decorators: {
			isExternal: {
				mode: "automatic",
				// 符合正則就不加入 attributes,這裡通常設定自己網站的連結
				callback: (url) => /^(https?:)?\/\/(?!website\.com)/.test(url),
				// 連結加入 target="_blank" 與 rel="noopener noreferrer"
				attributes: {
					target: "_blank",
					rel: "noopener noreferrer",
				},
			},
		},
	},
}

rel 屬性通常還會加上 nofollow,用來告訴搜尋引擎不要將流量導向至這個網站
避免有人試圖在高流量的網站中添加連結來提昇自身網站的流量

 

參考資料:
[掘竅] 為什麼要使用 rel="noreferrer noopener",談 target="_blank" 的安全性風險
金艾吉說:noopener與noreferrer
3 個常常令人誤會的連結語法:Nofollow,Noreferrer,Noopener
維基百科條目 - nofollow

WRITEN BY
sharkHead
後端工程師,稍微擅長 Laravel、Python 與 Google 搜尋
對於前端有興趣,無奈沒什麼慧根
0 則留言