CoderCastrov logo
CoderCastrov
JavaScript

Использование JSONP для обхода политики одного источника и получения контента с Reddit.

Использование JSONP для обхода политики одного источника и получения контента с Reddit.
просмотров
1 мин чтение
#JavaScript

Мой первый веб-проект был расширением для Chrome, которое, среди прочего, предоставляло цитаты. Мне пришлось столкнуться с политикой одного источника с самого начала.

Политика одного источника - это конструкция безопасности, которая предотвращает вредоносным скриптам доступ к DOM веб-страниц, происходящих с разных хостов (по большей части).

Что это означает для вас, как веб-разработчика, - это делает парсинг HTML страницы непростым (по крайней мере, на первый взгляд).

Вот где помогает JSONP.

JSON с отступами (JSONP) считается хакерским способом получения ресурсов с внешнего домена.

Он также имеет некоторые проблемы безопасности, поэтому вы должны запрашивать ресурсы только с доверенных сайтов.

Но нас интересует только Reddit. Имея этот URL в запасе, вы получите множество контента, подходящего для ваших потребностей.

Давайте получим лучшую запись из r/quotes.

Вот URL, который вы будете запрашивать:

[https://www.reddit.com/r/quotes/top/.json?limit=1&jsonp](https://www.reddit.com/r/quotes/top/.json?limit=1&jsonp%27=)

Примечание: мы ограничили возвращаемые данные только одной записью из текущего топа подраздела.

Теперь сделаем запрос (убедитесь, что у вас есть jQuery):

$.getJSON(quote_url, null, (data) => {  console.log(data['data']['children'][0]['data']['title']);});

Если вы изучите "data", вы обнаружите множество информации, которой теперь вы можете воспользоваться.

И вот вам это.

Вы можете изменить URL, чтобы отразить разные подреддиты, чтобы получить новые или популярные посты или чтобы получить разное количество результатов. Теперь у вас фактически бесконечное количество случайного контента.

Спасибо за чтение, я знаю, что это не очень сложно, но это то, чего мне не хватало для первого проекта.