Как изолировать стили?

Question

[Ярослав Никитин]

Суть проблемы:
Пользователь вводит в одну textarea код HTML и во вторую CSS.
Во время ввода пользователем, генерируется то, что он пишет, иначе сайт.

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

Стили я выводил вот таким дубовым способом(просто в теги обернул код из textarea):

document.getElementById('PressCSS').innerHTML = "<style>"+CSSeditor.getValue()+"</style>";

Вот пример: htmlacademy.ru/courses/4/run/1

Answer 1

[Alexander Sydorenko]

1. Изолировать id-ом для user html контейнера. К пользовательским селекторам автоматически добавлять #user_html в начале каждого правила, чтобы стили распространялись только на то, что внутри контейнера с пользовательским html.
2. но лучше использовать iframe для вывода пользовательского html (stackoverflow.com/questions/620881/putting-html-in... в iframe добавлять пользовательские стили (stackoverflow.com/questions/3714880/how-to-apply-c...

Answer 2

[Сергей Протько]

iframe-ы. Вы можете создать документ и запихнуть его в iframe из JS. И из него же манипулировать. Так же вас может заинтересовать атрибут sandbox для iframe-ов.

www.html5rocks.com/en/tutorials/security/sandboxed...
jsfiddle.net/9k9Pe/2 - динамическое создание iframe-а. Далее с содержимым можно будет работать используя свойства contentDocument у элемента. Но лучше организовать взаимодействие чере postMessage: https://developer.mozilla.org/en-US/docs/Web/API/W...

Comments

[Ярослав Никитин]

А как работать с contentDocument? Примерчик не скинешь?

[Ярослав Никитин]

Сейчас почитаю

[Ярослав Никитин]

Спасибо, все заработало!
У меня к тебе еще один вопрос, как со стороны безопасности такие махинации? sandbox'сом защищаться?