1. JavaScript / Говнокод #27299

    0

    1. 01
    2. 02
    3. 03
    4. 04
    5. 05
    6. 06
    7. 07
    8. 08
    9. 09
    10. 10
    11. 11
    12. 12
    // Since styled-components allows you to use arbitrary input as interpolations, you must be careful to sanitize that input.
    // Using user input as styles can lead to any CSS being evaluated in the user's browser that an attacker can place in your application.
    
    // This example shows how bad user input can even lead to API endpoints being called on a user's behalf.
    
    // Oh no! The user has given us a bad URL!
    const userInput = '/api/withdraw-funds'
    
    const ArbitraryComponent = styled.div`
      background: url(${userInput});
      /* More styles here... */
    `

    в процессе многолетнего пересоздания ruby on rails с нуля фронтендеры умудрились accidentally a bottle of injections

    https://styled-components.com/docs/advanced#security

    Запостил: Fike, 16 Марта 2021

    Комментарии (60) RSS

    • С той же страницы:

      There's no way to give your components complete immunity from the host page's styles, but you can at least boost the specificity of their style rules with babel-plugin-styled-components-css-namespace

      There is a jQuery plugin for that.
      Ответить
      • > complete immunity from the host page's styles

        Лолшто? Они там скоро докер для компонентов запилят, чтобы стили не протекали?
        Ответить
        • есть такое https://learn.javascript.ru/shadow-dom

          https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM

          Если ты хочеш не задеть чужой компонент своей версткой, то ты либо делаешь классам неймспейсы (как еще делал BEM), либо юзаеш shadow dom.

          Например ангулар умеет и так, и так
          Ответить
    • > /api/withdraw-funds

      Хм, ну там же CSRF не даст исполниться? Скучная атака какая-то, с тем же успехом можно юзеру картинку с этой ссылкой скинуть.
      Ответить
      • > не даст исполниться

        Мы говорим про людей, приложения которых исполняют CSS на клиенте.
        Ответить
        • Стоп, так там и ЖСа можно наинжектить что ли через эту подстановку?

          Какой багор )))
          Ответить
          • Напрямую текст в eval не засовывают, но там идет интерполяция, с которой при желании можно хорошо поиграться. Грубо говоря если в

            fn`alpha beta ${context.gamma}`


            получится прокинуть геттер для гаммы, то да.
            Ответить
            • > интерполяция

              Ну т.е. я правильно понимаю, что поверхность атаки -- по сути все-все-все компоненты этого фреймворка. И если какой-нибудь из этих styled.div коряво поклеит хтмл из этих кусков, то кровь-кишки.
              Ответить
              • Т.е. к примеру там внутри:
                function div(style) {
                    return '<div style="' + style + '"></div>'
                }
                Ответить
              • Да, и именно это и есть «‎progressive web app»

                > хтмл

                CSS, для хтмл к счастью есть реакт, который совсем уж хуйней не занимается
                Ответить
                • > progressive web app

                  Кстати, а ничего что тут в одном примере смешали код, разметку и стиль? По-моему пару лет назад за это обоссывали ещё.
                  Ответить
                  • а ты код на React видал?

                    но к чести реакта, он всё эскейпит, конечно
                    Ответить
                    • С реакта я тоже ору

                      > мы придумали разметку чтобы разделить данные и хтмл
                      > теперь добавим туда ContextProvider и другие "элементы" разметки, которые не будут делать нихуя кроме как управлять данными
                      Ответить
                      • Информацию о том, окрыт или закрыт выпадающий список или текущую цветовую тему ты в контроллер положишь или сразу в бд?
                        Ответить
                        • В редукс (свитчи писать тоже кстати пиздец)

                          чем дальше идет, тем больше понимаю какой всё-таки охуенный Vue даже со всей его ебучей автомагией
                          Ответить
                          • >В редукс

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

                            ты похоже в теме, вот скажи мне: ну нахуя хранить состояние формы в сторе?
                            Ответить
                            • а, ты в этом смысле. есть же this.state / useState

                              > ну нахуя хранить состояние формы в сторе?

                              строго говоря для того, чтобы можно было выкинуть нахуй компонент и потом создать его в том же виде. когда заполнил (но не засабмиттил) форму на странице и случайно перешел в другой таб (приложения, не браузера) - это печально.
                              Ответить
                              • так ты вроде против управления данными в реакте
                                Ответить
                                • я против управления данными самой разметкой путем расставления html-alike элементов
                                  Ответить
                                  • jsx это не html даже близко

                                    это просто удобный способ описать реактовое дерево
                                    Ответить
                                    • jsx это разметка

                                      > реактовое дерево

                                      дерево. дерево как функцию от входных данных. дерево, а не сами данные. контекст провайдер не является узлом дерева. error boundary не является узлом дерева.
                                      Ответить
                                      • это разметка в том же смысле в каком любой xml документ это разметка
                                        Ответить
                                        • нет, xml это формат сериализации данных
                                          Ответить
                                          • jsx тоже
                                            Ответить
                                            • зелененький забыл

                                              jsx это не формат сериализации, потому что его результатом является функция. на выходе из jsx ты получаешь React.createElement и вот это всё, а не текстовое или бинарное представление данных.
                                              Ответить
                                              • мне показалось что ты считаешь реакт не тем чем он является, он не похож и не должен быть похожим на html

                                                >jsx это не формат сериализации, потому что его результатом является функция

                                                то что является результатом jsx решает не сам jsx. В реакте он транспилируется в вызовы апи реакта, в других бибилиотеках в вызове других апи, может где-то и в html
                                                сам по себе jsx это именно что формат сериализации
                                                Ответить
                                                • а где я сказал что он является html? не всякая разметка это хтмл.
                                                  Ответить
                                                  • похожим на html или иметь хоть сколько-нибудь похожую семантику react тоже не должен и он этого не делает
                                                    Ответить
                                                    • да откуда ты хтмл взял?
                                                      Ответить
                                                      • >самой разметкой путем расставления html-alike элементов
                                                        Ответить
                                                        • хтмл-alike = выглядящий как хтмл. впрочем, с точки зрения задумки он должен был себя вести таким же образом, да.
                                                          Ответить
                                                • > то что является результатом jsx решает не сам jsx.

                                                  да ты серьезно? jsx это чистая функция. вот тот кто хочет получить из результирующего виртуального дерева хтмл, жсон, или что там конкретный консюмер задумал - вот это он решает.
                                                  Ответить
                                                  • jsx это синтаксис

                                                    это не функция не дерево и вообще нихуя кроме блять расширения файла

                                                    строго говоря jsx не имеет отношения к реакту
                                                    Ответить
                                                    • каким образом это не функция, если jsx это суперсет javascript?
                                                      Ответить
                                                      • jsx это веселые теги в jsx файле и все

                                                        ко всему остальному js это не имеет отношения, ты с таким е успехом можешь писать React.createElement вместо тегов и ничего не зименится
                                                        Ответить
                                                        • > ты с таким же успехом можешь писать React.createElement вместо тегов и ничего не зименится

                                                          Потому что это синтаксический сахар, добавленный в джаваскрипт, ну ёмана, о чем я талдычу тут. Это не "веселые теги", это конструкция яызка программирования. Тернарник, разворачивающийся в if-else по-твоему это тоже просто текст в блокнотике или всё-таки часть синтаксиса языка программирования?

                                                          Давай пойдем в первоисточник, что хотели сделать реактовцы, добавляя подобный сахар? Вообще не трогаем что получилось, идем читать какие цели преследуются.

                                                          https://reactjs.org/docs/introducing-jsx.html

                                                          Раз: This funny tag syntax is neither a string nor HTML. It is called JSX, and it is a syntax extension to JavaScript.

                                                          Два: JSX produces React “elements”. Не что-то там блядь абстрактное что jsx сам не решает, нет, он изначально предназначен как сахар для весьма конкретных вызовов.

                                                          Три: Instead of artificially separating technologies by putting markup and logic in separate files

                                                          markup and logic
                                                          разметка: да
                                                          логика: да (хотя на самом деле она большей частью пишется на ванильном жс в классе / функциональном компоненте, но формально {if (condition) && <Component>} безусловно является логикой)
                                                          данные: нет

                                                          нет никаких данных, это разметка, понимаешь?

                                                          https://reactjs.org/docs/jsx-in-depth.html

                                                          четыре: Fundamentally, JSX just provides syntactic sugar for the React.createElement(component, props, ...children) function. The JSX code: ... compiles into: ...

                                                          тоже мне формат блядь сериализации
                                                          Ответить
                                                          • >Потому что это синтаксический сахар, добавленный в джаваскрипт, ну ёмана, о чем я талдычу тут. Это не "веселые теги", это конструкция яызка программирования. Тернарник, разворачивающийся в if-else по-твоему это тоже просто текст в блокнотике или всё-таки часть синтаксиса языка программирования?

                                                            Для меня это не часть синтаксиса, это примерно как макры в си причем от нестандартного препроцессора

                                                            Спорить с докой реакта я не буду потому что она специально упрощена и кое-что там припизднули, могу отослать к статье https://overreacted.io/react-as-a-ui-runtime/ от члена команды разработки реакта

                                                            Поначалу jsx был только синтаксическим сахаром для реакта, но оброс своим тулингом и пользователями(preact, inferno, https://github.com/ryansolid/solid эти кажется таки в хтмл компилируют) и теперь является форматом сериализации
                                                            Ответить
                                                            • Каждый. Каждый раз на говнокоде одно и то же.
                                                              Ты им факты, уже просто прямые цитаты, они тебе абсолютно левую хуйню, которая до этого вообще не фигурировала в дискуссии и давай смотреть как ты обратно выруливать будешь. Или еще лучше - кинуть ссылку на статью, где говорится ровно то же самое, но с подачей типа "вот ты нихуя и не прав", чтобы ты сидел и обратно статью цитировал.
                                                              Не, в этот раз я туда не пойду, спасибо. Я понимаю что если напишу "они что, припизднули что это синтаксический сахар?" или "а что, preact или inferno это библиотека для упаковки описанных через jsx данных?" мне прилетит такая хуйня, что полночи придется придется опровергать, ссылаясь на такие статьи как "википедия:Логика" и "уголовный кодекс:Умышленное нанесение психических травм".
                                                              Ответить
                                                              • давай вернемся к твоему первому утверждению

                                                                >я против управления данными самой разметкой путем расставления html-alike элементов

                                                                Реакт работает и без jsx и никаких html-alike элементов там и подавно не будет если ты захочешь

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

                                                                Ты блять можешь даже вообще выкинуть апи реакта везде кроме корня и вызывать компоненты как функции и это даже будет работать

                                                                Ты берешь эти две по своей сути декоративных хуйни и пытаешься мне затереть что в них-то и заключается суть реакта. И более того, ты считаешь что новые фичи реакта не соответствуют его изначальным идеям но дело в том что ты неправильно представляешь себе изначальные идеи реакта
                                                                Ответить
                                                                • не-а, не вернемся. я же сказал, я туда не пойду.
                                                                  Ответить
                      • А ты считай компоненты не разметкой, а просто удобным способом сделать фронт.

                        Больше нету "верстки-разметки": есть среда разработки фронтэнд приложения
                        Ответить
                        • Есть разметка. JSX-теги и компоненты это не одно и то же - JSX-теги ссылаются на компоненты, размечая их иерархию.
                          Ответить
                          • Смотри: в джаве я могу написать "new JLabel".
                            Если бы вместо этого я мог бы написать <label text=".."/>", то было бы лучше?

                            Рассматривай JSX просто как способ написать что-то на JS.
                            Ответить
                  • Понятие "разметка" не имеет смысла в современном вебе в отрыве от стилей
                    Ответить
                    • А так же без JS, угу..
                      Прощай, семантическая верстка:)

                      Теперь правильно говорить о "фронте" в целом, без разделения на "верстку" и "программирование"
                      Ответить
                      • Флаттер для веба вон вообще в канвасе рисует
                        Ответить
                        • Ну вот а кстати, нахуя все эти технологии в браузере?

                          Оставить вебасм да канвас. Ну и всякие api для файлов и сети.

                          А языки и разметку пусть разраб сам выбирает. Ну как на десктопе.
                          Ответить
                          • более корректный вопрос: нахуя в браузере эмулировать десктоп?
                            Ответить
                            • Ну тоже верно. Но десктоп пока не научился более-менее безопасно и просто деплоить приложухи. Вот и изъёбываются с тем что есть.
                              Ответить
                            • А нахуя ограничивать SPA возможностями браузера?
                              Ответить
              • это как в сраном пыхе надо не забывать делать htmlentities?
                Ответить
    • да блядь

      There is an upcoming standard to sanitize CSS from JavaScript, CSS.escape. It's not very well supported across browsers yet, so we recommend using the polyfill by Mathias Bynens in your app.

      Именно пост-процессингом проблему идиотских подходов и надо решать.
      Ответить
      • css_real_escape_string

        Астрологи предсказывают неделю даблэскейпа. Веб макаки будут еще пять лет высирать
        url(\\\\\\\'some.png\\\\\\')

        и срать кирпичами
        Ответить
        • CSS.magic_quotes is not well supported across browsers yet, so we recomment using the polyfill:
          CSS.magic_quotes = function(s) {
              s.replace('\\', '\\\\');
          }
          Ответить
    • долбоёбы по сути сделали

      printf("url('%s')", someUserInput);
      Ответить

    Добавить комментарий