Какие существуют способы защиты стилей CSS?

Question

[Aleksey Novat]

Меня если честно угнетает тот факт, что учащиеся школ рипают всё, что красиво смотрится. У них НЕТ ни ума, ни фантазии, ни мозгов, ни прямых рук, поэтому они занимаются этим грешным делом. Возникла острая необходимость защитить свой сайт от копирования. Я знаю несколько простых способов защиты, но думаю этих крыс мало что остановит на сегодняшний день. Может подскажете какой-нибудь дихлофоз для этих тараканов, чтобы они не смогли копировать шаблоны? Я, конечно, понимаю, что полностью защитить нельзя, т.к генерация странички идёт на стороне клиента(браузер) ... но всё же, должны же быть какие-нибудь мышеловки.

Comments

[sivabur]

минификация, обфусификация.Но на самом деле css и html это не то что стоит защищать.

Answer 1

[Пума Тайланд]

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

Comments

[Aleksey Novat]

А вот мне кажется, что вы либо не умеете читать, либо вы не правильно поняли меня. Сами подумайте какой идиот будет выкладывать в открытый доступ то, что даже продавать не хочет? Почему Яндекс, ВК и другие компании не выкладывают на гитхаб свои разработки? м?

[Евгений Попов]

И вк и яндекс и "другие компании" очень активно выкладывают свои разработки на гитхаб.
Например:
https://github.com/cocaine
https://github.com/yandex-opensource
https://github.com/vk-com/kphp-kdb/
И это только маленькая толика

[Пума Тайланд]

очень активно они выкладывают и даже многие сотрудники лично выкладывают у них свои личные наработки

[Юрий Лобанов]

Золотые слова насчет мании величия.

[Aleksey Novat]

Опять в другое поле смотрите ребята...

[deburger]

делайте на флеше, раз вам жалко своих «разработок» в css o_0

[Gettoheaven]

Неправильно относишься к этому, вот посмотри на хабр, гитхаб и прочие ресурсы, все выкладывают всем. А что если этих ресурсов ну вообще не было ? Тот же самый htmlbook... По факту у тебя все равно рипать будут или статьи или ещё чего, это было и будет всегда.....

[Mr Crabbz]

deburger: Который тоже можно выкачать и декомпилировать :D Тогда у автора вообще бомбанёт)

[Николай Ковалев]

не беспокойте больного.

[synapse_people]

Пума Тайланд, Даааа, а можно посмотреть реализацию алгоритмов ранжирования от гугла на гитхабе, что-то ссылку потерял?

[v1t3man]

Краб Анархист, лучше сразу на C++. И доступ оставить только по паспорту.

Answer 2

[Юрий Лобанов]

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

Торжественно клянусь ничего не красть.

И еще - если школьник может обойти простейшие способы скрытия кода, то он уже заслуживает уважения. Вы-то конечно учились исключительно открыв стандарт html и читая его, так?

Comments

[Aleksey Novat]

Я только через месяц закончу) Поэтому заранее надо...

[Aleksey Novat]

Да и уникальности там не вижу никакой... Еще один велосипед.
"Пользовательское" облако, аналог Dropbox на базе Amazon S3; интеграция с Soundcloud для поиска музыки с вытягиванием через API всего что нужно; альтернатива 9gag, bash, pinterest, kinopoisk, ivi, depositphotos, twitter, instagram и ещё пару плюшек... В общем всё в одной коробке.

[Юрий Лобанов]

@Artpax и что? Вы не написали ничего из того, о чем спрашиваете. Вы ведь хотите css скрывать. Что там уникального в части css? Хотя бы на словах. Повторяю - уникального.

[Aleksey Novat]

@iiil и в css ничего уникального нет, просто шаблон красивый получается) не хочется, чтобы его кто-нибудь скомуниздил.

[Юрий Лобанов]

@Artpax я дополнил ответ. Насчет шаблона - для этого у Вас есть копирайт. Если Вы пророчите своему проекту будущее, то ни один конкурент не сможет взять Ваш шаблон. Если какой-нибудь школьник скопирует хоть весь шаблон, хоть его часть чтобы впечатлить одноклассницу - что Вам с этого?
Резюмирую, не занимайтесь х..рней. И относитесь с большим уважением к коллегам по цеху, а то у Вас через все эпитеты сквозит самовлюбленность и невероятное эго.

[Aleksey Novat]

@iiil да какие копирайты остановят их? Им глубоко плевать на них.

[Юрий Лобанов]

@Artpax знаете, наскучило мне объяснять Вам простейшие вещи. Копирайт - единственная вещь. которая необходима. Которая защитит Вас в случае разбирательств. Насчет остального я уже высказался.

[Aleksey Novat]

@iiil Я вас до этого вас прекрасно понял. Спасибо за уделенное внимание.

[CptnZapp]

@Artpax Не совсем понятно, что вы имеете ввиду говоря об уникальности. Если шаблон получился настолько красивым, что вы переживаете о его сохранности, значит он уникален. Потом вы говорите, что ничего уникального нет. Что же вы так переживаете тогда?

Answer 3

[Евгений Петров]

Крысы?)) Очень смешно. Никогда ничего не выкладывай в сеть, тогда не украдут. А вопрос глуп. Такое редко бывает, но таки бывает.

Answer 4

[Viktor Vsk]

Поверьте, если таки школьники начнут тырить ваш шедевр - это уже будет успех.

Comments

[Aleksey Novat]

Мне это как раз-таки не нравится

[Viktor Vsk]

Не нравится добиться успеха? Зачем вы тогда это все затеяли?

[Viktor Vsk]

Посмотрите, как некоторые люди в IT сообществе (вроде как, относительно успешные) реагируют на плагиат: habrahabr.ru/company/htdt/blog/204652

[Aleksey Novat]

@victorvsk мне не нравится слово "тырить"

[Viktor Vsk]

@Artpax напомню, что гугл "стырил" идею yahoo

Answer 5

[BuhgalterNaHabre]

Единственный способ защитить свое авторство над чем-то визуальным - сделать так, чтобы любой при виде объекта творчества сразу ассоциировал его с именем автора. Попробуйте сейчас выдать копию Джоконды за свою оригинальную картину.
Прятать CSS - признаться, до жути удивился вопросу. CSS верстают из макета-картинки, так что от кражи защитит только ограничение доступа к результату (т.е. записать на флешку и в сейф, другие копии уничтожить). Защищаться от школьников - даже звучит забавно.

Answer 6

[Appp Zooo]

Волков бояться - в лес не ходить!

Answer 7

[Ростислав Григорьев]

1 вариант. Завести на стороне сервера рендер изображений (например, Xvfb), который будет создавать картинку нужного разрешения для страницы сайта и отдельно скрипт, который будет показывать ее в браузере клиенту, к тому же нужно будет расставить по нужным местам ссылки с помощью тега area, например. При необходимости (изменения размера окна, перемотке вниз, клике по меняющемуся блоку) нужно будет подгружать новые изображения и вставлять нужные места. Это все, конечно, очень сложен в реализации, возможно будет тормозить даже если кешировать, и сервер будет испытывать нагрузки намного больше, чем если делать все традиционным методом. Но только так я вижу вариант, что невозможно будет стырить CSS.
2 вариант. Возможно крыс остановит использование языка LESS вместо CSS, на страницы придется вставить еще специальный javascript, который будет конвертить less в css на лету. Если крысы не осилят, как это работает, то некоторая безопасность от копирования будет.

Comments

[Viktor Vsk]

"А потом правительство скажет, что это люди построили Народный Файерволл".

[adisos]

я не школьник, но с less мне наоборот легче было бы :D

Answer 8

[denver]

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

Answer 9

[Par Mactep]

Я бы вот такой подход назвал достойным уважения.
habrahabr.ru/company/htdt/blog/204652

Answer 10

[KhodeN]

Ну можно еще рендерить в canvas. Правда придется написать еще рендер) И, может, свой язык разметки.

Comments

[SagePtr]

И обязательно добавить в скрипт проверку на location.href и дико заобфусцировать это дело. А то сопрут прямо с мясом)

[Pan Propan]

SagePtr: ))) жжешь

Answer 11

[Константин Величко]

По сути есть единственный способ зашиты верстки — это подгрузка и формирование дерева и стилей с помощю js либо расшифровка им же

Comments

[Aleksey Novat]

Этот способ я знаю, раньше использовал. Может есть еще способы? Лазил как-то в страничке твиттера и обнаружил что стили у них не такие простые как кажутся, да и картинки тоже сложнее достать.

[Евгений Попов]

Такие стили после формирования страницы(на этом этапе они уже все подгружены в "адекватном" виде иначе браузер не мог бы их применить и отобразить в консоли) можно спокойно распарсить(кажется даже встречал инструментарий для firebug) в файл.

[Пума Тайланд]

у твиттера твиттер бут страп, он полностью в свободном доступе

[Aleksey Novat]

@opium Это то я знаю, там хитрость есть в самих стилях. Некоторые значения как будто взяты из воздуха.

[Aleksey Novat]

@opium Элементарный firebag нихрена не видит некоторые картинки, да и большинство стилей видно, но не понятно от куда они взялись.

[whats]

@Artpax Если вы этого не понимаете то это еще ни о чем не говорит. Учитесь пользоваться инструментами. Там все понятно. Или давайте пример, я вам скажу что и откуда взялось

[Евгений Петров]

Любой анализатор в современных браузерах построен на анализе десериализованного кода со всеми внесёнными изменениями DOM с помощью скриптов.

Нет никаких способов, кроме canvas, но такой подход даже рассматривать не стоит, в силу очень большой сложности, плохой масштабируемости, управляемости и просто потому, что вопрос задан дилетантом.

Answer 12

[Алексей Кос]

К сожалению нормальной защиты нет так как в броузерах chrome есть такая возможность как "Просмотр кода страницы" вот там и практически весь шаблон.

Comments

[Юрий Лобанов]

только в chrome, да? ))

[Алексей Кос]

Ну я пользуюсь Google Chrome и там есть такая функция, а на других я незнаю

[Евгений Петров]

Ваши сведения неполны, но просто нажмите F12 И поймёте, что скрыть код невероятно трудно.

[Алексей Кос]

не F12, а ПМК по странице и нажимаем на 'Просмотр кода о странице'

[Юрий Лобанов]

о странице ) не смешите людей, мы все поняли, что Вы умеете смотреть код страницы. Для информации, по F12 в chrome вызывается инспектор кода, который удобнее и нагляднее показывает код.

[Алексей Кос]

Уверены?

[Par Mactep]

@djalexsey Вы уверенны что вам стоит давать ответы на какие либо вопросы на этом ресурсе?

[Par Mactep]

@djalexsey Да, кстати... Вот вам задачка: mathiasbynens.be/demo/css-without-html найдете код вашим хромом?

[Юрий Лобанов]

@parmactep ну строго говоря хром у меня пустую страницу показывает, а вот для ff - интересно )

[Евгений Петров]

Всё ещё гадаю, что такое ПМК ru.wikipedia.org/wiki/%D0%9F%D0%9C%D0%9A...
Пермский моторостроительный комплекс? Подростково-молодёжный клуб?

[Алексей Кос]

@parmactep

<html data-savefrom-tab-data="null" g_init="6803">

    <head></head>
    <body data-savefrom-link-count="0">
        <img width="1" height="1" src="//uv.metabar.ru/foo?url=http%3A%2F%2Fmathiasbynens.be%2Fdemo…01407231848&client_id=7f88bf2f2918a23479d&time=1406132989215"></img>
    </body>

</html>

Answer 13

[Aleksey Novat]

Да вы успокойтесь ребят. Самый простой и, пожалуй, единственный способ, уже упомянутый здесь - подгрузка стилей через js. Скорость конечно будет чуть меньше, но так по крайней мере будет сложнее вытащить все стили. FireBag и другие аналогичные дополнения будут видеть отдельные стили, но не смогут увидеть все их вместе.

Comments

[Евгений Петров]

Скорость чего меньше?
Это — очень плохой и никчёмный способ, который ничего спрятать не может. Абсолютно всё, что грузится запросами к серверу, хоть с GET, хоть POST, можно посмотреть, скопировать, а при возможности скачать.

[Aleksey Novat]

@Petroveg скорость загрузки страницы конечно же.

[Евгений Петров]

В чём вы измеряете скорость загрузки страницы? Это не такой простой вопрос, как может показаться.

[ixon]

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

[Евгений Петров]

ixon: На вопрос «В чём измеряется время загрузки страницы?» крайне неожиданно услышать комментарий «Имеется ввиду время загрузки страницы».
Если вы не поняли суть вопроса — в какой момент определяется момент загрузки страницы?

[Riccky]

Не факт что ниже. Тот же mail.ru использует построение на стороне клиента как раз для повышения производительности.

[Алексей Николаев]

Единственный способ - это CSS-in-JS и технологии, которые не предполагают написание css-кода. Это - styled components + react \ vue, платформа BEM. Тогда стили невозможно прочесть и структурировать через инспектор, а сам JS бандл обфусцирован.

Все остальное нормально читается и копируется, это веб, тут всегда так было.

Answer 14

[Максим Гречушников]

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

Answer 15

[Riccky]

Сам то не крадешь чужие идеи причем часто сразу с кодом?

Но если хочешь - заморочься JS, чтобы дизайн генерировался. На основании данных получаемых JS генерилкой с сайта во время построения страницы. Так просто такое не украсть. Есть готовые шаблонизаторы на JS, таких много.

Answer 16

[Georka]

С каждой ситуации есть выход. Как минимум 2. Но я не верю что в данном случае их 2. Просто мы не знаем способа..
Вот например. Если мы возьмем программу которая превращает изображение в zip архив. Создадим маленькое изображение примерно 3x3 px и впехнём через winrar туда таблицу стилей. Далее в в шаблоне перед пропишем полный путь к стилям через zip изображение. мало кто поймёт. Темболее если запаролить архив (тока это уже мой полёт фантазий)

Comments

[denver]

Интересно, на основе каких логических рассуждений ты считаешь что из любой ситуации есть обязательно минимум 2 выхода?

[Georka]

https://habrahabr.ru/post/145073/

Answer 17

[denisgaker]

А что вы набросились? Знаете сколько хитрозадых заказчиков, которым показываешь работу на своём домене, они копируют её и сливаются. Ессно деньги не платят. Так что вопрос актуальный, и дело не в мании величия, а в защите своих интересов.

Comments

[Пума Тайланд]

Сделку без риска придумали сто лет назад