nude.js и CORS
После случайного обнаружения в ленте поста про nude.js, у меня сразу появилась идея о том что можно с этим сделать. Nude.js – это javascript-библиотека для обнаружения обнаженного тела на фото. Я захотел сделать автоматическое скрытие NSFW-постов в ленте Tumblr, но, к сожалению, не получилось. Но всё по порядку.
Nude.js подключается к странице как любой другой скрипт:
<!--[if IE]> <script type="text/javascript" src="excanvas_r3/excanvas.compiled.js"></script> <![endif]--> <script src="nude.js/compressed/nude.min.js"></script>
Для работы nude.js требуется canvas, поэтому для IE требуется “эмулятор” iecanvas.js. После подключения можно анализировать DOM node изображения:
nude.load(node);
nude.scan(function(result){
console.log(result ? "Nudity found in " + node.id + "!" : "Not nude");
});
Однако после подключения изображения к странице Tumblr и отладки сообщений об ошибках, обнаружился интересный факт. А именно: если на canvas помещён элемент с домена, не совпадающего с доменом скрипта, canvas считаются “загрязнёнными” и информацию об изображении с них получить уже нельзя. Единственный способ это обойти — убедиться что сервер отдаёт с запрашиваемым изображением заголовок CORS (cross-origin resource sharing), а именно Access-Control-Allow-Origin. Пока этот заголовок использует в основном Flickr. В других случаях, когда домены скрипта и изображения не совпадают, загрузить и обработать его уже нельзя.
После этого я отложил эту идею до нормального внедрения CORS.