a(HTML) - ［▌▣］

a(HTML)

<a>: The Anchor element - HTML: HyperText Markup Language | MDN

anchor

2020-05-12 The Security Vulnerabilities of The Target="_Blank" Attribute

2024-10-25 Why does target=”_blank” have an underscore in front? | Kyrylo Silin

HTML attribute: rel - HTML: HyperText Markup Language | MDN

noreferrer

在送出的HTTP請求標頭上不加上HTTP參照位址

noopener

阻止連結後的網站使用window.opener

nofollow

告訴網路爬蟲不抓取連結的頁面

$ rel="noreferrer noopener nofollow"

2024-07-23 別タブへのリンク記述「target=”_blank”とrel=”noopener noreferrer”」の見直しを - 株式会社真摯

現在加上target="_blank"後，瀏覽器就會自動帶上rel="noopener"的操作，不需另外追加

noreferrer則有可能會對來源解析造成障礙

例如在同網站內的其他頁面開啟客戶服務頁面時，會喪失是從哪個頁面前來的資訊

只應該在明確確定不把參照位置傳送給目的網站時才使用

不開啟分頁直接下載內容

code:javascript

const download = (jsondata) => {

const data = JSON.stringify(jsondata)

const filename = 'download.json'

const type = 'application/json'

const file = new Blob(data, { type });

const url = URL.createObjectURL(file);

const a = document.createElement('a');

a.href = url;

a.download = filename;

a.click();

setTimeout(() => {

URL.revokeObjectURL(url);

}, 0);

}

缺點：用於串連請求時，快取會儲存在記憶體上，以及無法從瀏覽器的UI上看到下載進度

替代方案