ilyachalov (ilyachalov) wrote,
ilyachalov
ilyachalov

Category:

JavaScript: Политика одинакового источника и CORS

Начало в предыдущем посте: «JavaScript: модули, зачем нужен экспорт и импорт».

Примеры и задачи из первых двенадцати разделов учебника по JavaScript, до начала изучения модулей, я набирал в текстовом редакторе «Notepad++» и сохранял в текстовых файлах с расширениями .html (HTML-документ) и .js (отдельные скрипты) на рабочем столе (на моем компьютере установлена операционная система «Windows 10 Pro»). После этого я открывал HTML-документ в браузере и тестировал написанные мною скрипты.

В предыдущем посте я, чтобы посмотреть, как можно в языке JavaScript работать с модулями, написал такой HTML-документ и пару скриптов:

Текст файла test.html:
...
<script src="script2.js" type="module"></script>
...

Текст файла script1.js:
export function sayHi(user) {
    alert(`Привет, ${user}!`);
}

Текст файла script2.js:
import {sayHi} from "./script1.js";

sayHi("Илья");

Открыв, как обычно, файл test.html, находящийся на рабочем столе, в браузере, я получил следующую ошибку (ее можно увидеть в консоли разработчика): «Access to script at 'file:///C:/Users/%D0%98%D0%BB%D1%8C%D1%8F/Desktop/script2.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, edge, https, chrome-untrusted.» (я тестирую скрипты в браузере «Microsoft Edge», который создан на движке «Chromium»).

Оказалось, что существует так называемая «Политика (принцип) одинакового источника» (по-английски «Same-origin policy» или сокращенно «SOP»):

https://ru.wikipedia.org/wiki/Правило_ограничения_домена
https://developer.mozilla.org/ru/docs/Web/Security/Same-origin_policy

Это правило придумано в целях обеспечения безопасности, защиты от разнообразных вредоносных атак. Оно состоит в том, что скрипт, загруженный из одного источника, может свободно обращаться к скриптам того же источника, а доступ к скриптам из других источников ограничивается.

Упомянутый в тексте ошибки CORS (эта аббревиатура расшифровывается как «Cross-origin resource sharing», что по-русски означает «совместное использование ресурсов между разными источниками») — это механизм (технология современных браузеров), который, как я понял, позволяет владельцу каждого источника (сервера) настроить политику, регулирующую доступ к скриптам данного источника (можно разрешить доступ всем клиентам, либо только некоторым клиентам, либо всем запретить).

https://ru.wikipedia.org/wiki/Cross-origin_resource_sharing
https://developer.mozilla.org/ru/docs/Web/HTTP/CORS

Чтобы источники двух разных скриптов считались одним и тем же источником, у них должны совпадать одновременно протокол, домен и порт (по-английски соответственно «scheme», «host» и «port»).

Как видно по тексту вышеупомянутой ошибки, в моем случае механизм CORS может сработать и открыть доступ к скрипту script1.js из скрипта script2.js только через перечисленные протоколы, в том числе HTTP. Несмотря на то, что оба файла находятся в одном и том же месте, из-за протокола file:/// считается, что они находятся в разных местах (это всё ради обеспечения безопасности). Об этом казусе можно почитать тут:

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp

В интернетах пишут, что якобы имеются некие способы обхода (или отключения) механизма CORS. Я считаю, что раз такой механизм придумали, значит это «ж-ж-ж-ж» неспроста. Всё ради безопасности. Следовательно, все эти обходы и отключения — не наш метод. Как говорится, одно дело делаешь, другого не порть.

Поэтому я решил обеспечить браузеру (его механизму CORS) протокол HTTP, раз уж это требуется. Тут есть два варианта.

Во-первых, для этого можно загрузить мою страничку test.html, скрипты script1.js и script2.js на какой-нибудь веб-хостинг и запустить их оттуда.

Во-вторых, можно установить на своем компьютере локальный веб-сервер и тестировать HTML-страницу и скрипты с помощью него. Это то же самое, что первый вариант, только веб-хостинг установлен на своем же компьютере и получается, что мы через браузер (через протокол HTTP) обращаемся к файлам, которые находятся тут же, на этом же компьютере, локально.

Я выбрал второй вариант. Продолжение: «JavaScript: локальный веб-сервер из набора IIS».
Tags: Образование, Программирование
Subscribe

  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your IP address will be recorded 

  • 0 comments