Integrity html что это

Атрибут integrity простым языком?

Почитал про атрибут integrity , пишут про целостность файлов итп, а можно более простым языком объяснить для чего этот атрибут нужен?

• Вопрос задан более трёх лет назад
• 12651 просмотр

Комментировать
Решения вопроса 1
Stalker_RED @Stalker_RED

Если указана контрольная сумма браузер должен проверить ее. Таким образом страхуемся от случайного или умышленного повреждения или от подмены подключаемых файлов.
https://developer.mozilla.org/en-US/docs/Web/Secur.

Ответ написан более трёх лет назад
Нравится 4 8 комментариев

Михаил Р. @Mike_Ro Автор вопроса
Это аналог

Mike Ro, нет
В данном случае хеш указывает браузеру, что файл сменился
Браузер не будет считать хеш и не отклонит файл если хеши не совпадут

Михаил Р. @Mike_Ro Автор вопроса

sim3x, все равно не понял, для чего нужен integrity . С хешем понятно, если хеш другой, значит нужно обновить файл в кеше.

браузер сравнивает хеш файла, который скачал и тот хеш, что указан в хтмл
Если хеши не совпадают файл не будет запущен

Михаил Р. @Mike_Ro Автор вопроса

sim3x, дошло, спасибо! Если браузер при повторном заходе на сайт увидит аналогичный файл, но с другим integrity, он будет обновлять кеш с этим файлом?

Stalker_RED @Stalker_RED

Mike Ro, не нашел этого в спецификации. Можно проверить экспериментально, но полагаться на постоянство такого поведения я бы не стал.

Max Logic @Moon_Paladin

Михаил Р.,
1. Пользователь открывает сайт.
2. Интерпретатор видит подключаемый файл с атрибутом integrity.
3. Запрашивает файл по указанной ссылке в src или href
4. Удаленный сервер отвечает, что файл этот есть и отдает его сайту (пользователю/клиенту)
5. Браузер смотрит контрольную сумму принимаемого (открываемого) файла, и сравнивает ее с со значением в атрибуте integrity.
6. Если они отличаются, то браузер отказывается принять (загрузить) такой файл для клиента.
Вроде бы так..

: элемент для написания скриптов

HTML Элемент используется для встраивания или подключения исполняемого JavaScript кода. Элемент также может использоваться с другими языками, такими как GLSL (en-US) от WebGL.

Content categories	Метаданные, Потоковый контент, Фразовый контент.
Допустимый контент	Динамический скрипт, используя атрибут text/javascript .
Пропуск тегов	Нет. Открывающий и закрывающий теги обязательны
Допустимые родители	Любые элементы в которых разрешены метаданные или фразовый контент
Допустимые ARIA-роли	нет
DOM-интерфейс	HTMLScriptElement

Атрибуты

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

Предупреждение: Атрибут async не будет оказывать никакого эффекта, если атрибут src отсутствует. Обычно браузеры загружают синхронно, (т.е. async=»false» ) во время разбора документа. Динамически вставленный (используя, например, document.createElement ) по умолчанию загружаются браузером асинхронно, поэтому для включения синхронной загрузки (т.е. когда скрипты загружаются в порядке их вставки) укажите async=»false» .

Обычные элементы тега script передают мало информации в window.onerror для скриптов, которые не проходят проверку CORS (en-US) . Чтобы разрешить ведение журнала ошибок сайта, которые используют отдельный домен для статических файлов (например, изображение, видео-файл, CSS-стили или Javascript-код), используйте атрибут crossorigin . Посмотрите статью «настройки атрибутов CORS» для более наглядного объяснения его допустимых аргументов.

Это логический атрибут, указывающий браузеру, что скрипт должен выполняться после разбора документа, но до события DOMContentLoaded (en-US) . Скрипты с атрибутом defer будут предотвращать запуск события DOMContentLoaded (en-US) до тех пор, пока скрипт не загрузится полностью и не завершится его инициализация.

Предупреждение: Атрибут defer не будет оказывать никакого эффекта, если атрибут src отсутствует. Чтобы достигнуть такого же эффекта для динамически вставленных скриптов используйте async=false . Скрипты с атрибутом defer будут выполняться в том порядке, в котором они появились при разборе документа.

Этот атрибут содержит встроенные метаданные, которые агент пользователя (браузер) может использовать для проверки того, что выбранный ресурс был доставлен без непредвиденных манипуляций. Смотрите Целостность субресурса (en-US) .

Булевый атрибут, который устанавливается для того, чтобы скрипт не выполнялся в браузерах, поддерживающих ES6-модули (англ.). Таким образом, может быть использован для предоставления резервных сценариев в старых браузерах, которые не поддерживают модульный код JavaScript.

Криптографический одноразовый номер (номер, используемый один раз) для внесения встроенных скриптов в белый список в script-src Content-Security-Policy (en-US) . Сервер должен генерировать уникальное одноразовое значение каждый раз, когда он передает политику. Крайне важно предоставить одноразовый номер, который нельзя угадать, поскольку в противном случае обход политики ресурса является тривиальным.

Определяет URI внешнего скрипта; является альтернативой встраиванию скрипта непосредственно в документ.

Предупреждение: Если у элемента script будет указан атрибут src , то он не должен иметь встроенный скрипт между тегами.

Как и атрибут textContent , этот атрибут задает текстовое содержимое элемента. Однако, в отличие от атрибута textContent , этот атрибут оценивается как исполняемый код после того, как узел вставлен в DOM.

Этот атрибут указывает тип представленного скрипта. Значение этого атрибута будет находиться в одной из следующих категорий:

• Атрибут не установлен (по-умолчанию), пустая строка или установлен как MIME-тип JavaScript
  • : Обозначает, что скрипт является «классическим скриптом», содержащим JavaScript-код. Рекомендуется не указывать MIME-тип, а пропускать атрибут вообще. MIME-типы JavaScript указаны в спецификации.
  • : Данное значение даёт браузеру инструкцию, что код является JavaScript-модулем. Обработка содержимого скрипта отложенная. Атрибуты charset и defer игнорируются. Для дополнительной информации по использованию module , смотрите руководство по JavaScript-модулям. В отличие от классчических скриптов, модули требуют использования CORS-протокола для cross-origin загрузок.
  • : Данное значение сигнализирует о том, что содержимое тега является словарём импортов. Словарь импортов — это JSON-объект, который может использоваться для задания алиасов при импорте JavaScript-модулей.

  Устаревшие атрибуты

  Если присутствует, его значение должно соответствовать «utf-8» без учета регистра ASCII. И в том, и в другом случае нет необходимости указывать атрибут charset, поскольку документы должны использовать UTF-8, а элемент script наследует свою кодировку символов от документа.

  Как и атрибут type , этот атрибут определяет используемый язык сценариев. Однако, в отличие от type , возможные значения language никогда не были стандартизированы. Вместо него следует использовать атрибут type .

  Примечания

  Элемент без указания атрибутов async , defer или type=»module» , а также встроенный скрипт, загружается и выполняется сразу, до того как браузер продолжит разбор документа.

  Для обработки скрипт должен иметь тип данных text/javascript , но браузеры снисходительны и блокируют обработку только в том случае, если скрипт представляет данные одного из типов: изображение ( image/* ); видео ( video/* ); аудио ( audio/* ); или text/csv . Если скрипт заблокирован, элементу отправляется событие error (en-US) , если не было отправлено событие load (en-US) .

  Примеры

  Основное использование

  Эти примеры показывают как импортировать скрипт используя элемент в HTML4 и HTML5.

  script type="text/javascript" src="javascript.js"> script> script src="javascript.js"> script> 

  Фолбэк-модуль

  Браузеры, поддерживающие использование значения module для атрибута type , игнорируют любые скрипты с атрибутом nomodule . Это разрешает использовать модульные скрипты, и в тот же самый момент позволяет использовать nomodule- скрипты для браузеров без поддержки модульных скриптов.

  script type="module" src="main.mjs"> script> script nomodule src="fallback.js"> script> 

  Спецификации

  Specification
  HTML Standard # the-script-element

  Совместимость с браузерами

  BCD tables only load in the browser

  Смотрите также

  • document.currentScript
  • Статья Flavio Copes о эффективной загрузке JavaScript и различиях между атрибутами async и defer (англ.)
  • Руководство по JavaScript-модулям

  Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

  This page was last modified on 4 авг. 2023 г. by MDN contributors.

  Your blueprint for a better internet.

  MDN

  Support

  • Product help
  • Report an issue

  Our communities

  Developers

  • Web Technologies
  • Learn Web Development
  • MDN Plus
  • Hacks Blog
  • Website Privacy Notice
  • Cookies
  • Legal
  • Community Participation Guidelines

  Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
  Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

  Все, что нужно знать о теге script

  

  Как вы, наверное, знаете, тег Script используется для подключения JavaScript, который должен быть запущен на странице. Тег сценария может либо включать непосредственно JavaScript код, либо указывать на URL, откуда сценарий должен быть загружен.

  Теги выполняются в порядке их появления. Это должно быть интуитивно понятно, когда вы читаете этот код:

  Это менее интуитивно (но не менее верно) при работе с внешними ресурсами.

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

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

  Элементы на странице не будут отображаться, пока все теги сценария, предшествующие им, не загрузятся и не выполнятся. То есть, вы можете изменить страницу, прежде чем она загрузится, если вы готовы пожертвовать производительностью. Это не относится, к добавлению тега в DOM после того, как страница начала загружаться с помощью document.appendChild или чего-то подобного. Эти теги будут загружаться каждый раз, когда браузер сочтет нужным, и в произвольном порядке.

  Когда сценарий выполняется, доступно только то, что находится над ним в DOM.

  Вы можете подумать о HTML-анализаторе, как о прохождении по документу тег за тегом, по ходу выполняя все JavaScript. Это означает, что DOM узлы доступны для вашего JavaScript (через querySelectorAll, JQuery и т.п.), только если их тег появляется в документе раньше, чем тег сценария.

  Полезным следствием этого является то, что document.head доступен практически всегда, в любом JavaScript, а document.body доступен только если ваш скрипт находится внутри тега или после body.

  Асинхронные скрипты async and defer

  HTML5 добавил пару инструментов для управления выполнением сценариев:

  • Async означает \»выполнить это в любое время\». Более конкретно это означает: Мне все равно, что вы выполняете это после того, как вся страница была загружена, и все остальные сценарии были выполнены. Это очень полезно для кодов аналитики отслеживания, так как никакой другой код на странице не зависит от их исполнения. Определение важной переменной или функции в async коде — это плохая идея, так как вы действительно не знаете, когда именно он сработает.
    • Defer означает \»ждать анализатор, чтобы закончить и выполнить\». Это примерно равносильно подвязке сценария к событию DOMContentLoaded или использованию jQuery.ready. Когда код выполняется, все в DOM будет доступно для использования. В отличие от async, defer код будет работать по порядку, в котором он расположен на HTML странице, он просто откладывается до тех пор, пока HTML не будет полностью проанализирован.

    Атрибут Type

    Исторически (со времен Netscape 2), было абсолютно неважно, указали ли вы type=\»text/javascript\» в тегах сценария или просто оставили его пустым. Если вы установили какой-либо тип MIME, который не является разновидностью JavaScript как type, браузер все равно не будет выполнять его. Это может быть здорово, когда вы хотите определить свой собственный язык:

    Фактическое выполнение этого кода зависит от вас, т.е., вы можете использовать что-то вроде этого:

    Если у вас появится такое желание, вы можете также переопределить тип по умолчанию для каждого сценария на странице, используя тег meta:

    Или заголовок Content-Script-Type.

    integrity

    Атрибут integrity является частью новой спецификации Subresource. Он позволяет получить хэш контента, который содержит файл сценария. Это полезно для предотвращения изменения содержимого тега script извне. В мире SSL, это необходимо, если вы загружаете скрипт из внешнего источника, который вы не контролируете, например, code.jquery.com.

    Если вы решите использовать этот инструмент, вы должны указать тип хэша который вы используете, и значение хэша, разделив их дефисом. Это выглядит следующим образом:

    Crossorigin

    Он не полностью стандартизирован, но поддерживается некоторыми браузерами. Основная идея заключается в том, что браузер не любит позволять вам распоряжаться ресурсами, загруженными не с текущей страницы, а из другого \"источника\". (Происхождение определяется как сочетание протокола, имени хоста и порта страницы. т.е. http://google.com:80).

    Его связь с тегами сценария несколько условна. Идея заключается в том, что если применить обработчик к событию window.onerror, этот обработчик обеспечивается некоторой информацией о странице и сценарии если вы загружаете код с внешнего сайта. В защищенных браузерах эта информация не передается, если не указан атрибут crossorigin.

    Crossorigin не магический хак безопасности, он всего лишь позволяет настроить браузер, чтобы выполнить CORS проверку доступа на запрос OPTIONS и проверку заголовков Access-Control.

    document.currentScript

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

    onafterscriptexecute

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

    Если вам интересно, объекты событий включают в себя ссылку на выполняемый сценарий, поэтому событие before может отменить выполнение с помощью preventDefault().

    for/event

    На сегодняшний день в спецификации HTML5 включены редкие, специфические IE методы привязки кода к событию. Вы можете использовать это, чтобы тег сценария не выполнялся, пока страница не загрузится:

    NOSCRIPT

    В это трудно поверить, но когда-то JavaScript был еще молод. Было время, когда вы не могли быть уверены, будет ли данный браузер корректно выполнять JavaScript или нет. Что еще хуже, вы не могли быть уверены в том, что браузер будет знать, что такое тег script. И если браузер не распознает тег, он должен сделать его строчным элементом, то есть весь JavaScripts будет показан на странице как текст!

    К счастью, спецификация смогла обеспечить решение, которое позволяет интерпретировать как HTML-комментарий все то, что не поддерживает браузер:

    Конечно, как и большинство вещей, XHTML сделал это гораздо хуже. XML имеет очень специфический метод скрытия контента, который может включать в себя закрывание тегов и прочее. Так родился CDATA :

    Естественно, если ваш код будет валидным XHTML, это не окажет никакого влияния на его функциональность, но это невероятно важно для вашей самооценки в качестве веб-разработчика.

    Браузеры также содержат полезную функцию, позволяющую пользователям, у которых не включен JavaScript, перейти на тег NoScript. NoScript оборачивает контент, который должен отображаться, только если браузер не поддерживает выполнение сценариев:

    Если вы наблюдательны, вы поймете, что NoScript не принимает аргумент type, что делает его взаимодействие со страницами, которые используют несколько типов сценариев несколько неоднозначным. Фактическое поведение варьируется от браузера к браузеру.

    Тег Script и innerHTML

    И напоследок, позвольте рассказать об одной забавной особенности.Теги Script, которые динамически добавляются на страницу с помощью DOM, выполняются в браузере:

    var myScript = document.createElement('script'); myScript.textContent = 'alert(\"✋\")'; document.head.appendChild(myScript);

    А теги, которые динамически добавляются на страницу с помощью innerHTML, не выполняются:

    document.head.innerHTML += '';

    Почему? Неизвестно, но это забавный ответ на вопрос, можно ли в инспекторе отобразить скрипт, который фактически не выполняется.

    Разбираемся в Subresource Integrity

    Сегодня прочитал статью Дрю Маклиллана в Smashing Magazine "Understanding Subresource Integrity".

    Вы скорее всего видели, что на cdnjs и подобных сайтах при копировании ссылки на скрипт, можно скопировать тег с атрибутом integrity . В этом атрибуте находится хэш исходного кода скрипта. Перед тем как выполнить скрипт браузер подсчитывает его хэш и сверяет с тем хэшом, который записан в атрибуте integrity . Если они не совпадают, то скрипт не будет выполнен. Таким образом браузер защищает сайты, использующие скрипты с общедоступных cdn, от компрометации скриптов, которые раздаются этими cdn. Этот механизм называется Subresource Integrity (SRI).

    Подобный механизм можно использовать и для тех скриптов, которые хостятся на ваших серверах. Это добавляет ещё один уровень защиты от потенциальных атак. Для добавления хэшей к вашим скриптам можно воспользоваться webpage-subresource-integrity (для Webpack) или gulp-sri-hash (для gulp). Или в крайнем случае можно запустить команду:

    cat FILENAME.js | openssl dgst -sha384 -binary | openssl base64 -A

    и вставить полученный хеш в html-страницу руками. Subresource Integrity проверку точно также можно добавить и к CSS-файлам.

    По-большому счёту я только что пересказал вам всю статью, так что можете её не читать.

    Похожие публикации:

    1. Configuring ttf mscorefonts installer как нажать ok
    2. Meta services что это на андроиде
    3. Как играть с другом в ark survival evolved
    4. Что возвращает void