Артефакт обнаружения статуса parsing-url исходного кода ping-url

HTTPS HTTP

предисловие

ping-urlЭто небольшой инструмент, исходный код которого я недавно выложил в открытый доступ, и эта статья также является научно-популярной статьей, посвященной концепции его дизайна.
зачем это делатьping-urlКак насчет инструментов с открытым исходным кодом?
Причина в том, что этот младший брат однажды получил особую просьбу,Используйте интерфейсный метод, чтобы определить, можно ли получить доступ к любому URL-адресу в обычном режиме..
Так что не хватает спроса, за ним обычно яма :)

Во-первых, подумайте об этом.Для достижения этой функции у вас должны быть следующие 2 очка:

  • Инициировать запрос URL в обычном режиме
  • следить за статусом запроса

Как только у вас появится идея, начинайте закатывать рукава и усердно работать!

Сначала определите, доступен ли URL-адрес

Из-за механизма безопасности браузера -Та же политика происхождениясуществование, достижение任意Это требование действительно немного сложно.

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

Поэтому, чтобы добиться нормального доступа к любому url, нужно решить первую проблему:перекрестный домен.

1.1 Решение ограничения одного и того же происхождения

Ветераны интерфейс вскоре ассоциируютJSONP. Принцип заключается в том, чтобы использоватьscriptФункции, доступные для всех источников.
Исходя из этого, можно сделать расширение для поиска всех html-тегов, доступных из разных источников:

  • <script>
  • <img>
  • <link>
  • <video>
  • <audio>
  • <audio>
  • <iframe>

1.2 Как оценить доступность

Из тегов html, к которым можно получить доступ в разных странах, отфильтруйте теги html, которые могут поддерживатьonerrorа такжеonloadТеги событий, вы можете положиться на теги, чтобы хорошо завершить разработку функций.
Здесь объясняется:

  • onerrorРоль событий
    Если ресурс, запрошенный тегом перекрестного происхождения, отличается от формата файла, который может быть проанализирован сам по себе, он сообщитerrorмероприятие.
    URL-адрес, который необходимо обнаружить, обычноhtml.
    такonerrorСобытия можно использовать для прослушивания запросов и получения отзывов.errorвремя потрачено. Таким образом, можно напрямую рассчитать задержку доступа к сети.
    Но, к сожалению, точность не 100%.
    Потому что есть ситуация: сам url является мертвой ссылкой.
    После инициирования http-запроса с мертвой ссылкой вы получитеfailedположение дел. В этой ситуацииonerrorтакже срабатывает.

  • зачем нужноonloadмероприятие?
    onloadСобытие запускается, когда ресурс был загружен.
    Пока это событие запускается, оно доказывает, что URL-адрес не является мертвой ссылкой.
    Это поможетonerrorИсключите непредвиденные ситуации и доведите точность до 100%!

На основании двух указанных выше жестких требований теги фильтруются следующим образом:

  • <script>
  • <img>
  • <link>

в<iframe>Недостаток: пока сервер установленX-Frame-OptionsЗаголовок сообщения немедленно отбрасывается. Так тоже исключили.

X-Frame-Options — это HTTP-заголовок (заголовок), используемый для того, чтобы сообщить браузеру, можно ли разместить эту страницу в iFrame.

1.3 Существующие риски безопасности

<script>Хотя это может удовлетворить потребности, существует очень фатальная проблема: существует вероятность атаки XSS.
Если ресурс, соответствующий URL-адресу,самовыполняющаяся функция js, вполне можно использовать для плохих дел.
<img>тег, потому что он может вызвать толькоonerror, так что это тоже исключено.

1.4 Разбор кода

Наконец только<link>Можно использовать этикетки.
Поскольку метод парсинга — CSS, возможность атаки отсутствует.
Вот код реализации:

function getStatus(url: string){
    return new Promise((resolve, reject) => {
        let link = document.createElement('link');
        link.rel="stylesheet";
        link.type="text/css"
        link.href = url;

        link.onload = function(){
            resolve(true);
        }
        link.onerror = function(){
            resolve(false);
        }

        document.body.appendChild(link);
    })
}
  • путем создания<link>node и добавьте адрес ресурсаurl
  • Добавить событие слушателяonload,onerror
  • Присоединяйсяbody, обратиться с просьбой

Следует отметить, что необходимо объявитьrelа такжеtype, иначе связанное событие не будет запущено.

2. Рассчитайте задержку в сети

Поскольку кросс-доменный CSS требует правильно установленного заголовка Content-Type, вероятность риска все же остается небольшой.
Поэтому, вычисляя задержку сети,ping-urlпо-прежнему использовать самые консервативные<img>.

2.1 Разбор кода

function getLoadTime(url: string){
    return new Promise(resolve => {
        let img = document.createElement('img');
        img.style.display = "none";
        img.src=`${url}/?v=${Math.random()}`;
        const timeStart = new Date();

        img.onerror = function(){
            const timeEnd = new Date();
            resolve(timeEnd.getTime() - timeStart.getTime());
        }
        img.onload = function(){
            const timeEnd = new Date();
            resolve(timeEnd.getTime() - timeStart.getTime());
        }

        document.body.appendChild(img);
    });
}
  • генерировать<img>узел, добавьте URL-адрес запроса ресурса и установите стиль наdisplay:none, чтобы не повлиять на страницу
  • время начала записиtimeStart
  • добавить событие слушателяonerror,onload
  • Присоединяйсяbody, обратиться с просьбой
  • После запуска события рассчитайте время задержки

Вот небольшая деталь, добавьте случайное число после URLv=***. Это позволяет избежать ситуаций кэширования.

3. Совместное использование открытого исходного кода

Хотя это небольшой проект, он весьма полезен. Поэтому используйте свободное время, чтобы упаковать его в пакет npm и опубликовать наnpmjs.comначальство.
Исходный код также синхронизирован с GitHub, вы можете нажать, чтобы посетитьping-url.
Если это поможет вам, вы можете наградить звездой.

Ссылаться на

[1] Система диагностического анализа Huatuo
[2] Подробно объясните тег script
[3] Перестаньте задавать мне междоменные вопросы
[4] : элемент ссылки на внешний ресурс.
[5] Доступ к сети из разных источников

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

Категории