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