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，用來告訴搜尋引擎不要將流量導向至這個網站。避免有人試圖在高流量的網站中添加連結來提昇自身網站的流量。
