referrerpolicy属性 - リンク先にアクセスする時のリファラーポリシー

2017/09/15

area要素のreferrerpolicy属性はリンク先にアクセスする時のリファラーポリシーを指定するための属性です。a要素のreferrerpolicy属性と仕組みは同じです。

概要

要素: area要素
DOM Interface: HTMLAreaElement.referrerPolicy
仕様書: https://html.spec.whatwg.org/multipage/links.html#attr-hyperlink-referrerpolicy

値

リソースにアクセスする際のリファラーポリシーを表すキーワード。種類はa要素のreferrerpolicy属性をご参考下さい。

<area href="https://syncer.jp/" referrerpolicy="no-referrer">

説明

a要素のreferrerpolicy属性の説明をご参考下さい。

デモ

referrerpolicy属性のデモを用意しました。画像の右半分はunsafe-url、左半分はno-referrerを指定したリンクです。それぞれのリンク先でリファラーが取得できるか確認してみて下さいね。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<body>
<p>←unsafe-url no-referrer→</p>
<p>
<img src="./image.png" usemap="#my-circle" width="200" height="200">
<map name="my-circle">
	<area shape="rect" coords="0,0, 100,200" href="/referrer" target="_blank" alt="リファラー確認" referrerpolicy ="unsafe-url">
	<area shape="rect" coords="100,0, 200,200" href="/referrer" target="_blank" referrerpolicy ="no-referrer">
</map>
</p>
<hr>

<script>
var element = document.getElementById( "hoge" ) ;

console.log( element. ) ;
document.body.appendChild( new Text( element. ) ) ;
</script>
</body>
</html>

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

Features	Chrome	Firefox	Safari	Edge	IE	Opera	iOS Safari	Android
referrerpolicy属性	● 53+	● 50+	×	×	×	● 40+	×	×
no-referrer	● 53+	● 50+	×	×	×	● 40+	×	×
no-referrer-when-downgrade	● 53+	● 50+	×	×	×	● 40+	×	×
same-origin	×	● 52+	×	×	×	×	×	×
origin	● 53+	● 50+	×	×	×	● 40+	×	×
strict-origin	×	● 52+	×	×	×	×	×	×
origin-when-cross-origin	● 53+	● 50+	×	×	×	● 40+	×	×
strict-origin-when-cross-origin	×	● 52+	×	×	×	×	×	×
unsafe-url	● 53+	● 50+	×	×	×	● 40+	×	×

概要

値

説明

デモ

サポート状況

関連記事