Я пишу программу, которая позволяет пользователю создавать страницы с помощью графического интерфейса drag-n-drop.Каждый элемент (изображение, текст и т. Д.) Будет иметь простые в использовании селекторы CSS, такие как background-color и font-size, однако мой клиент попросил возможность при необходимости добавить пользовательский CSS к элементу в качестве окончательного варианта..
Рассматривая опасности пользователей, которые, возможно, вводят и сохраняют допустимые функции javascript, пытаются стилизовать тег body и т. Д. (Я позабочусь об этом, избегая ввода / обработки PDO-данных в PHP),Как я могу написать регулярное выражение (или другую функциональность), который грубо тестирует, если то, что пользователь вводит, является допустимым CSS.Мое регулярное выражение на данный момент таково:
([A-Za-z\-]+?:\s*?[A-Za-z\-]+?;)+?;
И я запускаю его, используя
var reg = /([A-Za-z\-]+?:\s*?[A-Za-z\-]+?;)+?/;
if (reg.test(textarea.val())) {
console.log("yay");
//add CSS to element
} else {
console.log("nay");
//let user know their input is wrong
}
Это прекрасно работает для проверки
css-selector: css-value;
Однако все, что после этогооно все равно будет подтверждено как истинное, потому что первая часть будет истинной:
css-selector: css-value;
invalid-css is here!
Что касается грубо, то, что я имею в виду, все, что я нахожу необходимым проверить, это наличие a: и a;с текстом и, возможно, между ними, нет необходимости проверять, существует ли сам css-селектор на самом деле как атрибут CSS или не является ли CSS-значение допустимым значением указанного селектора.
Isесть ли способ гарантировать, что все входное значение ДОЛЖНО быть истинным?
В качестве последнего замечания, если вы видите потенциальную опасность, не связанную непосредственно со вставкой тегов script или стилизацией потенциальных элементов целой страницы, которые я должен изменитьиз, пожалуйста, дайте мне знать
Редактировать: из-за того, что многие говорят, что я не могу проверить real CSS, я собираюсь уточнить мое требование немного дальше;во-первых, допустимое регулярное выражение:
css-selector: css-value;
other-css-selector: other-css-value;
недопустимое регулярное выражение:
css-selector: css-value;
invalid-css is here!
Во-вторых, то, что мне нужно, это то, что проверяется, если я могу передать строку:
$(element).css(validated-string);
И иметь хром-дескриптор, является ли то, что применено, действительно действительным, очень как это делает, если вы редактируете CSS live
Во-вторых, я упоминаю проверку PHP, но я хочу обновить CSS live, чтобы пользователь могувидеть эффект их правок по мере их добавления