このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

link”要素~“crossorigin”属性HTML5で追加

記事July 7th,2020
外部リソースを読み込む時のCORSリクエストを設定する属性
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

crossorigin”属性について

crossorigin”属性は文書に関連づける外部リソースを読み込む時のCORSリクエストを設定します。“crossorigin”属性を使用した場合、その外部リソースを読み込む時にCORSリクエストを実行します。

通常link”要素で読み込んだ別のオリジンにある外部リソースをcanvas”要素で再利用する場合、“汚染”されてしまい、使用できる機能が制限されます。しかし、“crossorigin”属性によってCORSを使用することであたかも同じオリジンにある外部リソースであるかのように使用することができるようになります。

crossorigin”属性を指定しない場合CORSは使用されません。

指定できる値

属性値 説明
anonymous CORSリクエストを実行するが、SSL証明書、HTTP認証などの認証情報は使用しない
use-credentials CORSリクエストを実行し、SSL証明書、HTTP認証などの認証情報を使用する

不正な文字列、もしくは空の値の場合は“crossorigin="anonymous"”として扱われます。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="icon" href="image/favicon.ico">
<meta name="robots" content="index,follow">
<meta name="keywords" content="バナナ,栄養素,産地">
<meta name="description" content="黄色くて栄養満点な果物であるバナナについて解説します。">
<link rel="stylesheet" href="css/stylesheet.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap" crossorigin="anonymous">
<title>黄色いフルーツバナナ - 果物を食べる</title>
</head>
<body>
...
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク