- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
- 11
- 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
Follow us!
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.
Лолшто? Они там скоро докер для компонентов запилят, чтобы стили не протекали?
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
Если ты хочеш не задеть чужой компонент своей версткой, то ты либо делаешь классам неймспейсы (как еще делал BEM), либо юзаеш shadow dom.
Например ангулар умеет и так, и так
В сишке есть неймспейсы!
pthread
CF
Nt
Хм, ну там же CSRF не даст исполниться? Скучная атака какая-то, с тем же успехом можно юзеру картинку с этой ссылкой скинуть.
Мы говорим про людей, приложения которых исполняют CSS на клиенте.
Какой багор )))
получится прокинуть геттер для гаммы, то да.
Ну т.е. я правильно понимаю, что поверхность атаки -- по сути все-все-все компоненты этого фреймворка. И если какой-нибудь из этих styled.div коряво поклеит хтмл из этих кусков, то кровь-кишки.
> хтмл
CSS, для хтмл к счастью есть реакт, который совсем уж хуйней не занимается
Кстати, а ничего что тут в одном примере смешали код, разметку и стиль? По-моему пару лет назад за это обоссывали ещё.
но к чести реакта, он всё эскейпит, конечно
> мы придумали разметку чтобы разделить данные и хтмл
> теперь добавим туда ContextProvider и другие "элементы" разметки, которые не будут делать нихуя кроме как управлять данными
чем дальше идет, тем больше понимаю какой всё-таки охуенный Vue даже со всей его ебучей автомагией
у меня как раз сейчас такой проект где состояние каждой формы, попапа, и даже ебаную подсветку надписи вынесли в стор, как я вас ненавижу
ты похоже в теме, вот скажи мне: ну нахуя хранить состояние формы в сторе?
> ну нахуя хранить состояние формы в сторе?
строго говоря для того, чтобы можно было выкинуть нахуй компонент и потом создать его в том же виде. когда заполнил (но не засабмиттил) форму на странице и случайно перешел в другой таб (приложения, не браузера) - это печально.
это просто удобный способ описать реактовое дерево
> реактовое дерево
дерево. дерево как функцию от входных данных. дерево, а не сами данные. контекст провайдер не является узлом дерева. error boundary не является узлом дерева.
jsx это не формат сериализации, потому что его результатом является функция. на выходе из jsx ты получаешь React.createElement и вот это всё, а не текстовое или бинарное представление данных.
>jsx это не формат сериализации, потому что его результатом является функция
то что является результатом jsx решает не сам jsx. В реакте он транспилируется в вызовы апи реакта, в других бибилиотеках в вызове других апи, может где-то и в html
сам по себе jsx это именно что формат сериализации
да ты серьезно? jsx это чистая функция. вот тот кто хочет получить из результирующего виртуального дерева хтмл, жсон, или что там конкретный консюмер задумал - вот это он решает.
это не функция не дерево и вообще нихуя кроме блять расширения файла
строго говоря jsx не имеет отношения к реакту
ко всему остальному js это не имеет отношения, ты с таким е успехом можешь писать 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: ...
тоже мне формат блядь сериализации
Для меня это не часть синтаксиса, это примерно как макры в си причем от нестандартного препроцессора
Спорить с докой реакта я не буду потому что она специально упрощена и кое-что там припизднули, могу отослать к статье 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 функции и возвращать вызовы апи реакта, и чаще всего тебе даже лишних рендеров за это не будет
Ты блять можешь даже вообще выкинуть апи реакта везде кроме корня и вызывать компоненты как функции и это даже будет работать
Ты берешь эти две по своей сути декоративных хуйни и пытаешься мне затереть что в них-то и заключается суть реакта. И более того, ты считаешь что новые фичи реакта не соответствуют его изначальным идеям но дело в том что ты неправильно представляешь себе изначальные идеи реакта
Больше нету "верстки-разметки": есть среда разработки фронтэнд приложения
Если бы вместо этого я мог бы написать <label text=".."/>", то было бы лучше?
Рассматривай JSX просто как способ написать что-то на JS.
"new" не нужен
Прощай, семантическая верстка:)
Теперь правильно говорить о "фронте" в целом, без разделения на "верстку" и "программирование"
Оставить вебасм да канвас. Ну и всякие api для файлов и сети.
А языки и разметку пусть разраб сам выбирает. Ну как на десктопе.
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.
Именно пост-процессингом проблему идиотских подходов и надо решать.
Астрологи предсказывают неделю даблэскейпа. Веб макаки будут еще пять лет высирать
и срать кирпичами