Поддерживают ли веб-компоненты изоляцию безопасности в виде iframe? - PullRequest
Новая
       32

Поддерживают ли веб-компоненты изоляцию безопасности в виде iframe?

0 голосов
/ 21 июня 2019

Я хочу, чтобы веб-компоненты размещались на одном сайте, а другой сайт не может получить доступ к внутренней DOM или Javascript.Точно так же, как с iframes, но которые можно лучше визуализировать в HTML, например, определение размера для включения их содержимого и т. Д.

Было много дискуссий по этому поводу, но в 2019 году, когда я спрашиваю об этом, что-то реализовано, чтобы сделатьthis?

РЕДАКТИРОВАТЬ: Позвольте мне быть полностью ясным - я хочу, чтобы JS для компонента обслуживался с наших серверов, запросы к нашему серверу выполнялись из JS компонента, рендерил материал в компоненте, но непозвольте вмещающему участку получить это или поместите троянского коня в компонент.Я в порядке с сайтом, предоставляющим CSS, но без HTML или JS.Можно ли это сделать?

Как он будет взаимодействовать с компонентом, аналогичным postMessage?

Наконец, возможно ли для COMPONENTS JS получить доступ к DOM внешнего содержащего веб-сайта и, таким образом, найти другие компонентыи общаться?Последний вариант невозможен при использовании фреймов в другом домене.

1 Ответ

1 голос
/ 21 июня 2019

Простой ответ: Нет.

Веб-компоненты Не изолируйте JS.Только DOM и CSS.

Но вы можете поместить все вашего JS в ваш класс, или в модуль ES6, или в IIFE, и это изолирует его.

Но я сомневаюсь, что веб-компоненты когда-нибудь станут 100% заменой <iframe>.И я не думаю, что они должны были быть такими.

Я не удивлюсь, если <iframe> станет устаревшим и в конечном итоге будет удален из браузеров.

ОБНОВЛЕНИЕ

Хранение ВСЕХ кода JS внутри класса вашего компонента или внутри IIFE несколько защитит код.HTML и CSS уже помещены в песочницу внутри компонента.Если ваш код был в IIFE или в модуле ES6, то другой код должен был бы иметь доступ к исходному файлу и иметь возможность изменять его, чтобы изменить его.

Связь извне с компонентомвыполняется внешним кодом, вызывающим функции компонента или устанавливающим свойства и атрибуты компонента.

Связь между компонентом и внешней средой традиционно осуществляется путем отправки событий.Говорить напрямую от одного компонента к другому - грязный вариант, и его действительно следует избегать.Родительский код должен прослушивать события от всех своих дочерних элементов, а затем вызывать функции или устанавливать свойства / атрибуты для других дочерних элементов.

Если вы используете shadowDOM, то включающий сайт может изменять только CSS ваших компонентов.если вы сделаете определенные аспекты CSS доступными для них.Это делается либо с помощью CSS Varaibles, либо с помощью <slot>, чтобы позволить приложению-оболочке размещать свой собственный HTML / CSS внутри вашего компонента.Это может открыть вам некоторые вещи, которые вы, возможно, не захотите.

Код, который находится в классе или во IIFE, всегда может получить доступ ко всему в DOM.Помните, что JS не имеет песочницы и может делать все, что может делать любой другой JS.Но приложению, которое может быть сложнее, хотя, возможно, и не невозможно, внести изменения в классы компонентов.Убедитесь, что ваши классы заморожены для предотвращения подклассов.

Еще одна вещь, которую нужно знать, это то, что если у вас есть кто-то еще, загружающий их веб-сайт со своего сервера, а затем загружающий файлы компонентов из вашегосервер, то у вас могут быть проблемы с CORS.Особенно, если ваш код пытается загрузить данные с помощью XHR / Fetch , тогда у вас могут возникнуть CORS проблемы .

...