Призначення атрибуту crossorigin…?

Question 1

І в тегах зображення, і в скрипті.

Я зрозумів, що ви можете отримувати доступ як до сценаріїв, так і до зображень в інших доменах. Отже, коли хто використовує цей атрибут?

Це коли ви хочете обмежити можливість доступу інших до ваших сценаріїв та зображень?

Зображення:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-crossorigin

Сценарії:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

Question 2

Зображення з підтримкою CORS можна повторно використовувати в елементі без забруднення. Допустимі значення:

Сторінка вже відповідає на ваше запитання.

Якщо у вас є зображення перехресного походження, ви можете скопіювати його на полотно, але це "заплямовує" полотно, що заважає вам його читати (тому ви не можете "красти" зображення, наприклад, з інтрамережі, де сам сайт не має доступу до ). Однак, використовуючи CORS, сервер, на якому зберігається зображення, може повідомляти браузеру, що доступ із перехресним джерелом дозволений, і, отже, ви можете отримати доступ до даних зображення через полотно.

MDN також має сторінку саме про це: https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image

Це коли ви хочете обмежити можливість доступу інших до ваших сценаріїв та зображень?

Немає.

Question 3

Відповідь можна знайти в специфікації .

Для img:

crossoriginАтрибут є Корс за допомогою параметрів атрибута . Його метою є надання дозволу на використання зображень із сторонніх сайтів, які дозволяють використовувати перехресний доступ canvas.

і для script:

crossoriginАтрибут є Корс за допомогою параметрів атрибута . Він визначає , для скриптів, отриманих з інших джерел , чи буде викрита інформація про помилки.

Question 4

Ось як ми успішно використали crossoriginатрибут у scriptтегу:

Проблема: ми намагалися реєструвати помилки js на сервері за допомогою window.onerror

Майже всі помилки, які ми реєстрували, мали таке повідомлення: Script error.і ми отримували дуже мало інформації про те, як вирішити ці помилки js.

Виявляється, власна реалізація в chrome повідомляє про помилки

if (securityOrigin()->canRequest(targetUrl)) {
        message = errorMessage;
        line = lineNumber;
        sourceName = sourceURL;
} else {
        message = "Script error.";
        sourceName = String();
        line = 0;
}

надішле messageтак, Script error.ніби запитуваний статичний актив порушує політику браузера з тим самим походженням .

У нашому випадку ми обслуговували статичний актив із cdn.

Ми вирішили це шляхом додавання crossoriginатрибута до scriptтегу.

PS Отримав всю інформацію з цієї відповіді

Question 5

Якщо ви розробляєте швидкий фрагмент коду локально та користуєтеся Chrome, виникає проблема. якщо ваша сторінка завантажується за допомогою URL-адреси форми "file: // xxxx", тоді спроба використання getImageData () на полотні не вдасться, і викине помилку безпеки перехресного походження, навіть якщо ваше зображення отримується з того самого каталог на вашій локальній машині як сторінка HTML, що відображає полотно. Отже, якщо ваша сторінка HTML отримана, скажіть:

файл: // D: /wwwroot/mydir/mytestpage.html

а ваш файл і зображення Javascript отримуються, скажімо:

файл: // D: /wwwroot/mydir/mycode.js

файл: // D: /wwwroot/mydir/myImage.png

тоді, незважаючи на те, що ці вторинні сутності отримуються з того самого джерела, помилка безпеки все одно видається.

З якоїсь причини, замість правильного встановлення джерела, Chrome встановлює атрибут origin необхідних об’єктів на „нуль”, що робить неможливим тестування коду за участю getImageData (), просто відкривши сторінку HTML у вашому браузері та локально налагоджуючи.

Крім того, встановлення властивості crossOrigin зображення як "анонімне" не працює з тієї ж причини.

Я все ще намагаюся знайти обхідний шлях для цього, але ще раз здається, що розробники браузера роблять локальну налагодження якомога болючішою.

Я щойно спробував запустити свій код у Firefox, і Firefox це правильно зробив, визнавши, що моє зображення має те саме походження, що і сценарії HTML і JS. Тож я вітаю деякі підказки щодо того, як обійти проблему в Chrome, оскільки на даний момент, поки Firefox працює, його налагоджувач болісно повільний, аж до того, що він стає на крок від атаки відмови в обслуговуванні.

Question 6

Я з'ясував, як переконати Google Chrome дозволити посилання file: //, не видаючи помилки перехресного походження.

Крок 1: Створіть ярлик (Windows) або еквівалент в інших операційних системах;

Крок 2: Встановіть ціль приблизно наступним чином:

"C: \ Program Files (x86) \ Google \ Chrome \ Application \ chrome.exe" - allow-file-access-from-files

Цей спеціальний аргумент командного рядка, --allow-file-access-from-files, повідомляє Chrome дозволити вам використовувати file: // посилання на веб-сторінки, зображення тощо, не видаючи помилок перехресного походження кожного разу, коли ви намагаєтесь передати їх зображення, наприклад, на полотно HTML. Це працює на моїй установці Windows 7, але варто перевірити, чи буде це працювати і на Windows 8/10, і на різних дистрибутивах Linux. Якщо це сталося, проблема вирішена - розробка в автономному режимі відновлюється як зазвичай.

Тепер я можу посилатися на зображення та дані JSON з файлу: // URI, без помилок перехресного походження Chrome, якщо я намагаюся перенести дані зображення на полотно або перенести дані JSON в елемент форми.