Способ подключения JS скриптов и приложений на клиент в безопасном режиме SANDBOX
Некоторое время назад rocket chat голоса https://chat.golos.io был встроен в страницы golos.io, его можно было использовать как удобную боковую панель, но как верно заметил @inertia в посте
https://golos.io/en/@inertia/bad-idea - встраивание JS скриптов из "третьих" источников на клиенте голоса, (который является еще и кошельком) - не лучшая идея, так как любой кто имеет доступ к редактированию JS потенциально может включить в него вредоносный код.
Разумеется будет паранойей полагать, что кто-то из rocket chat этим воспользовался бы, но исключать любые возможности кражи ключей - хорошая практика, потому ребята из команды убрали чат из страницы оставив просто ссылку на него.
Однако в своем недавнем посте про собственные клиенты, я упомянул о возможности встраивания виджетов на свой сайт-клиент как способ сделать его привлекательнее:
Уникальный дизайн и дополнительный функционал У вас будет возможность полностью поменять дизайн и даже функционал своего клиента настроив его вид как угодно, в том числе встроить разнообразные чаты, виджеты биржевых котировок, карты
Ваш клиент должен быть не только привлекательным и функциональным, он должен быть так же и безопасным!
И не обязательно отказывать себе в использовании удобных приложений на своем клиенте - достаточно правильно их подключить!
Способ подключения JS приложений в безопасном режиме SANDBOX
Большинство различных чатов, виджетов, кнопок "поделиться" вставляются при помощи подключения JS скриптов непосредственно в тело страницы вашего сайта. И хотя вероятность кражи данных через популярные плагины ничтожно мала, пользователи всегда могут упрекнуть вас в наличии потенциальной угрозы. Ну а в случаях когда JS библиотека из ненадежного источника - меры предосторожности просто необходимы.
Идея достаточно проста и в основе ее лежат принципы безопасности браузеров:
Вы размещаете скрипт приложения не на страницах домена "А", а на странице домена "Б", далее встраиваете iframe с этим приложением на домен "А". Таким образом запросы из iframe инициированные на домене "Б" будут блокированы если попытаются украсть данные с домена "А".
Демо:
https://chain.cf/test/3rdjs.html
Чат по центру страницы встроен не размещением js библиотеки на /test/3rdjs.html, а размещением iframe с атрибутами sandbox
iframe src="https://upvote.ml/chat/index.html" sandbox="allow-forms allow-scripts allow-same-origin"
В примере источник iframe это https://upvote.ml/chat/index.html , в то время как страница сайта -
https://chain.cf/test/3rdjs.html и так как домены upvote.ml и chain.cf разные - браузеры будут блокировать запросы с upvote.ml адресованные chain.cf - это сделает виджет изолированным от вашего сайта. В сочетании с CSP правилами у вас будет возможность оформлять свой сайт по вкусу не переживая о безопасности 3rd party скриптов.
Метод не требует никаких затрат на примере upvote.ml:
Домен upvote.ml - бесплатно на freenom
Хостинг html - бесплатно на Github
Исходник: /3rdjs.html
Другие бесплатные сервисы я упоминал ранее:
Бесплатные сервисы в помощь начинающим разработчикам: Домены, сервера (в т.ч. nodejs), SSL/TLS сертификаты и другое
Долнительно вы можете присвоить каждому iframe свой id и стилизовать его CSS свойствами, а с помощью JS можно сделать окошко виджета перемещаемым, сворачиваемым и т.д.