[{"_1":2,"_33":-5,"_34":-5},"loaderData",{"_3":4,"_32":-5},"routes/post.$slug",{"_5":6,"_7":8,"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20},"_id","67d249c991acf6af01c7b501","title","\"Шифруем\" CSS и JS на сайте","contents","{\"time\":1741834602015,\"blocks\":[{\"id\":\"qnzgfrBxtQ\",\"type\":\"paragraph\",\"data\":{\"text\":\"Есть малоизвестный способ \\\"скрыть\\\" CSS и JS-код на сайте. Может быть полезно, если вы не хотите, чтобы ваш код можно было прочитать из инструментов разработчика в браузере. Однако при желании код всё равно можно прочитать, используя несложные консольные утилиты\"}},{\"id\":\"JM-4dadfKG\",\"type\":\"header\",\"data\":{\"text\":\"Как выглядит \\\"шифрованный\\\" JS-код\",\"level\":2}},{\"id\":\"uuk1RcEbZI\",\"type\":\"image\",\"data\":{\"caption\":\"\",\"withBorder\":false,\"withBackground\":false,\"stretched\":false,\"file\":{\"url\":\"https://files.congritta.com/828a83ed-b253-4945-be86-1247abd03b8b.png\"}}},{\"id\":\"ddAolWnxqM\",\"type\":\"paragraph\",\"data\":{\"text\":\"Такой код будет работать, если вписать его в HTML любого сайта. Такое же возможно и с CSS:\"}},{\"id\":\"hymlQ53xo0\",\"type\":\"image\",\"data\":{\"caption\":\"\",\"withBorder\":false,\"withBackground\":false,\"stretched\":false,\"file\":{\"url\":\"https://files.congritta.com/e1a3017e-9d0e-4e39-b2d7-36095de5e6d1.png\"}}},{\"id\":\"7zLe9iXnGC\",\"type\":\"paragraph\",\"data\":{\"text\":\"Такое же можно применять в подключении чего угодно на сайт, в т.ч. картинок, SVG, шрифтов и т.д.\"}},{\"id\":\"hBuk5CuCKq\",\"type\":\"header\",\"data\":{\"text\":\"Что это такое вообще\",\"level\":2}},{\"id\":\"_FvZ3vCbFR\",\"type\":\"paragraph\",\"data\":{\"text\":\"Это Data URLs, по сути виртуальные ссылки на что угодно (текст, HTML, CSS, JS, изображение, видео и т.д.); сам контент хранится прямо в ссылке текстом или закодированным в base64. Вы прямо сейчас можете открыть новую вкладку у себя в браузере и набрать там:\"}},{\"id\":\"ffhfb6lhUU\",\"type\":\"paragraph\",\"data\":{\"text\":\"data:text/html,<h1>This is my site</h1>\"}},{\"id\":\"CXt9-cbg6T\",\"type\":\"paragraph\",\"data\":{\"text\":\"Откроется страничка с заголовком \\\"This is my site\\\".\"}},{\"id\":\"yErvm_HpeW\",\"type\":\"paragraph\",\"data\":{\"text\":\"Почти все современные браузеры поддерживают Data URLs, но они редко используются, ибо прятать код особой нужды нет, а контент можно подгружать по старинке из сервера.\"}},{\"id\":\"26Eo0AP1It\",\"type\":\"paragraph\",\"data\":{\"text\":\"Data URLs можно использовать практически везде вместо обычных ссылок. Например:\"}},{\"id\":\"oLyyTdZ0rY\",\"type\":\"paragraph\",\"data\":{\"text\":\"<img\"}},{\"id\":\"c5Fg_elLRx\",\"type\":\"paragraph\",\"data\":{\"text\":\"src=\\\"data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAwAAAC8I yPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFzByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSpa/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJlZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uisF81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PHhhx4dbgYKAAA7\\\"\"}},{\"id\":\"Dl6hy11PMh\",\"type\":\"paragraph\",\"data\":{\"text\":\"alt=\\\"Larry\\\"\"}},{\"id\":\"lQOjJuV_ni\",\"type\":\"paragraph\",\"data\":{\"text\":\"/>

\"}},{\"id\":\"JlvNAyUVoC\",\"type\":\"paragraph\",\"data\":{\"text\":\"ul.checklist > li.complete {
margin-left: 20px;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC')
top left no-repeat;
}

\"}},{\"id\":\"owCpBGKTgc\",\"type\":\"paragraph\",\"data\":{\"text\":\"window.open('data:text/html;charset=utf- 8,%3C!DOCTYPE%20HTML%20PUBLIC%20%22-' + '%2F%2FW3C%2F%2FDTD%20HTML%204.0%2F%2FEN%22%3E%0D%0A%3Chtml%20lang%3D%22en' + '%22%3E%0D%0A%3Chead%3E%3Ctitle%3EEmbedded%20Window%3C%2Ftitle%3E%3C%2Fhea' + 'd%3E%0D%0A%3Cbody%3E%3Ch1%3E42%3C%2Fh1%3E%3C%2Fbody%3E%0D%0A%3C%2Fhtml%3E' + '%0D%0A', '_blank', 'height=300, width=400');

(Примеры кода скопированы из статьи про Data URLs из википедии)
\"}},{\"id\":\"ApO2JDtaSJ\",\"type\":\"header\",\"data\":{\"text\":\"Как создавать такие ссылки:\",\"level\":2}},{\"id\":\"BNtHDnIqWu\",\"type\":\"paragraph\",\"data\":{\"text\":\"Любые такие ссылки составляются по такой схеме:\"}},{\"id\":\"TYfivc0Qnp\",\"type\":\"paragraph\",\"data\":{\"text\":\"data:[<MIME-тип>][;base64],<data>\"}},{\"id\":\"zYhqcrulQA\",\"type\":\"paragraph\",\"data\":{\"text\":\"То есть в начале пишем data:, дальше пишем MIME-тип. Его можно загуглить для нужного вам контента, но вот маленькая табличка с популярными MIME типами:

\"}},{\"id\":\"vmUXkQhPqj\",\"type\":\"paragraph\",\"data\":{\"text\":\"MIME-тип Описание\"}},{\"id\":\"WsVsZeuWNC\",\"type\":\"paragraph\",\"data\":{\"text\":\"text/plain Обычный текст\"}},{\"id\":\"Hy03w2zUVA\",\"type\":\"paragraph\",\"data\":{\"text\":\"text/html HTML\"}},{\"id\":\"c0YdCfO-Am\",\"type\":\"paragraph\",\"data\":{\"text\":\"text/css CSS\"}},{\"id\":\"Kl1tsC2m6P\",\"type\":\"paragraph\",\"data\":{\"text\":\"text/javascript JavaScript\"}},{\"id\":\"IAqaOfMggA\",\"type\":\"paragraph\",\"data\":{\"text\":\"application/json JSON\"}},{\"id\":\"lnnIAgqyao\",\"type\":\"paragraph\",\"data\":{\"text\":\"image/png Картинка PNG\"}},{\"id\":\"KG9NnFm2YC\",\"type\":\"paragraph\",\"data\":{\"text\":\"image/jpeg Картинка JPG\"}},{\"id\":\"yZTkcEGS3t\",\"type\":\"paragraph\",\"data\":{\"text\":\"image/gif Картинка GIF\"}},{\"id\":\"u6Gns8KylH\",\"type\":\"paragraph\",\"data\":{\"text\":\"image/svg+xml Картинка SVG\"}},{\"id\":\"Hg8lqtMrxZ\",\"type\":\"paragraph\",\"data\":{\"text\":\"Далее сам контент. Текстовый контент можно писать прямо как он есть, либо, что лучше, закодировать его в base64. Для этого гуглим любой онлайн сервис, либо же, если у вас ОС на основе Linux, открываем терминал и пишем команду:\"}},{\"id\":\"sPjkLgLjqH\",\"type\":\"paragraph\",\"data\":{\"text\":\"cat << EOF | base64\"}},{\"id\":\"0hrKdtzaxC\",\"type\":\"paragraph\",\"data\":{\"text\":\"После чего пишем свой код и в самом конце нажимаем Enter, потом пишем EOF, потом ещё раз Enter.\"}},{\"id\":\"LKTMfUaWmo\",\"type\":\"paragraph\",\"data\":{\"text\":\"Как это должно выглядеть:\"}},{\"id\":\"wfpsvDuhfD\",\"type\":\"image\",\"data\":{\"caption\":\"\",\"withBorder\":false,\"withBackground\":false,\"stretched\":false,\"file\":{\"url\":\"https://files.congritta.com/615bfe08-f75a-4331-958f-03db91cd7b48.png\"}}},{\"id\":\"gZdtl_9pAk\",\"type\":\"paragraph\",\"data\":{\"text\":\"То, что после EOF, это наш base64-код.\"}},{\"id\":\"Grm1UonQv2\",\"type\":\"paragraph\",\"data\":{\"text\":\"Вы так же можете создать текстовый файл и написать исходный код туда, а потом выполнить команду в терминале:\"}},{\"id\":\"LdYAafsLnK\",\"type\":\"paragraph\",\"data\":{\"text\":\"cat мойФайл.txt | base64\"}},{\"id\":\"Hfc68sxE-C\",\"type\":\"paragraph\",\"data\":{\"text\":\"Полученный base64 мы добавляем в конец нашей ссылки. В итоге получаем\"}},{\"id\":\"bfOgOOZ7bj\",\"type\":\"paragraph\",\"data\":{\"text\":\"data:text/css;base64,aHRtbCB7CiAgbWFyZ2luOiAwOwogIHBhZGRpbmc6IDA7Cn0KCmJvZHkgewogIGZvbnQ6IDFlbSBzYW5zLXNlcmlmOwp9CgpwIHsKICBjb2xvcjogYmx1ZTsKfQo=\"}},{\"id\":\"p8ie8HuuF0\",\"type\":\"paragraph\",\"data\":{\"text\":\"Если вам надо проверить работоспособность ссылки, просто откройте новую вкладку в браузере, вставьте ссылку в адресную строку и нажмите Enter. Если всё откроется как надо, значит ссылка составлена правильно.\"}},{\"id\":\"yGGICpM1JB\",\"type\":\"header\",\"data\":{\"text\":\"А можно ли это расшифровать?\",\"level\":2}},{\"id\":\"sSHanUBs6N\",\"type\":\"paragraph\",\"data\":{\"text\":\"Можно. base64 легко расшифровывается любыми популярными языками программирования и встроенными консольными утилитами в Linux.\"}},{\"id\":\"sB640boUuZ\",\"type\":\"paragraph\",\"data\":{\"text\":\"Использование Data URLs поможет разве что защититься от некоторых парсеров сайтов, если у вас SPA (например если у вас React с клиентской генерацией) или если парсеры лезут в JS код. Но если у кого-то будет задача парсить именно ваш сайт, то использование Data URLs не поможет\"}}],\"version\":\"2.31.0-rc.7\"}","slug","css-js-data-urls","previewText","Есть способ скрыть CSS и JS-код от инструментов разработчика в браузере. Это затруднит доступ, но не сделает код полностью недоступным.","posterFileId","67d249c891acf6af01c7b500","createdAt","2023-07-06T09:03:00.000Z","posterFile",{"_5":16,"_21":22,"_23":24,"_25":26,"_27":28,"_17":29,"_30":31},"type","image/jpeg","size",78275,"path","/opt/projects/blog-backend/uploads/a2afd57a-b7f3-4b12-9b55-77ba9308d578.jpeg","displayName","a2afd57a-b7f3-4b12-9b55-77ba9308d578.jpeg","2025-03-13T02:58:16.687Z","isUsed",true,"root","actionData","errors"]