Атрибут crossorigin тега <link> — запит на чужий домен
Атрибут crossorigin визначає, як елемент обробляє запити поперечного походження.
автор: NagarD
Загальний опис
автор: NagarD
Синтаксис
<link crossorigin="value">
Атрибут crossorigin може отримувати 2 значень:
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| 34 | 18 | 10 | 21 | 17 | — |
| Переглядач | ||||
|---|---|---|---|---|
| 37 | 34 | 18 | 10 |
Приклади
+ запропонувати свій приклад у пісочниці
Чотири однакові картинки з різними записами crossorigin і підпис до кожної, який малює CSS за самим атрибутом. Видно третій стан — «атрибута немає» — і те, що порожнє й незрозуміле значення означають одне й те саме.
HTML
<p class="row">
<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='40'%3E%3Crect%20width='40'%20height='40'%20rx='6'%20fill='%232f6fd0'/%3E%3C/svg%3E"
width="40" height="40" alt="Зразок"><span class="tag"></span>
</p>
<p class="row">
<img crossorigin src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='40'%3E%3Crect%20width='40'%20height='40'%20rx='6'%20fill='%2372b043'/%3E%3C/svg%3E"
width="40" height="40" alt="Зразок"><span class="tag"></span>
</p>
<p class="row">
<img crossorigin="bla" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='40'%3E%3Crect%20width='40'%20height='40'%20rx='6'%20fill='%23f2b134'/%3E%3C/svg%3E"
width="40" height="40" alt="Зразок"><span class="tag"></span>
</p>
<p class="row">
<img crossorigin="use-credentials" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='40'%3E%3Crect%20width='40'%20height='40'%20rx='6'%20fill='%23c0392b'/%3E%3C/svg%3E"
width="40" height="40" alt="Зразок"><span class="tag"></span>
</p>
<p class="foot">Самі картинки тут вбудовані в сторінку, тому вантажаться завжди.
На чужому домені було б інакше: другий і третій рядки поводяться однаково
(обидва — anonymous), а перший — єдиний, якому взагалі не потрібен
заголовок Access-Control-Allow-Origin на чужому сервері.</p>
CSS
.row {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 12px;
}
img {
border: 1px solid #b9c6d8;
}
.tag::before {
font-family: ui-monospace, monospace;
font-weight: 600;
}
img:not([crossorigin]) + .tag::before {
content: "атрибута немає — запит без CORS, вміст сторінці недоступний";
color: #5a6472;
}
img[crossorigin=""] + .tag::before {
content: "порожній crossorigin — це anonymous";
color: #1b4f9c;
}
img[crossorigin]:not([crossorigin=""]):not([crossorigin="anonymous" i]):not([crossorigin="use-credentials" i]) + .tag::before {
content: "значення не розпізнано — теж anonymous";
color: #b06a00;
}
img[crossorigin="use-credentials" i] + .tag::before {
content: "use-credentials — із куками, сервер мусить назвати домен поіменно";
color: #c0392b;
}
.foot {
max-width: 520px;
color: #5a6472;
font-size: .9em;
}
Різниця між HTML 4.01 та HTML5
Атрибут crossorigin для тегу <link> зявився тільки у HTML5.
Коментарі
Коментарів ще немає — будьте першим!