Как angularjs препятствует выполнению встроенных тегов скрипта? - PullRequest
Новая
       18

Как angularjs препятствует выполнению встроенных тегов скрипта?

0 голосов
/ 02 февраля 2019

Мне было интересно узнать, как AngularJS предотвращает выполнение встроенных тегов <script> при их включении с помощью директивы ng-include .

После включения шаблона и DOMпроверено, теги сценария, безусловно, существуют, но они не были выполнены.Как их обезвреживают?

Я начал просматривать исходный код, но все попытки, которые я делал, включали тег сценария в DOM самостоятельно (appendChild, innerHTML , innerText, document.write.и т. д.) всегда приводит к его выполнению.

Спасибо.

Ответы [ 2 ]

0 голосов
/ 07 февраля 2019

Это похоже на вызовы ng-include $element.html(ctrl.template); См. Источник на GitHub

Функция html в jqLite затем использует element.innerHTML = value; для вставки содержимого. См. Источник на GitHub

А после тестирования - похоже, этого достаточно, чтобы не выполнять теги <script>.

Я создал jsFiddle здесь. - # 3 является эквивалентом того, что делает AngularJS, и он не выполняет теги сценария.

0 голосов
/ 04 февраля 2019

Это артефакт способа реализации jqLite .

Чтобы теги сценария работали, просто убедитесь, что библиотека jQuery загружена до файла angular.js.

  <head>
    <script src="//unpkg.com/jquery"></script>
    <script src="//unpkg.com/angular/angular.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

DEMO на PLNKR .

если вы объясните больше, что innerHTML достаточно для предотвращения выполнения тегов скрипта, я выберуВаш правильный ответ

HTML5 указывает, что тег <script>, вставленный с innerHTML , не должен выполняться.

Однако есть способы выполнить JavaScriptбез использования элементов <script>, поэтому при использовании innerHTML все еще существует угроза безопасности для установки строк, которые вы не можете контролировать.Например: 

const name = "<img src='x' onerror='alert(1)'>";
el.innerHTML = name; // shows the alert

По этой причине рекомендуется не использовать innerHTML при вставке простого текста;вместо этого используйте Node.textContent.Это не анализирует переданный контент как HTML, но вместо этого вставляет его как необработанный текст.

Для получения дополнительной информации см. Справочник по MDN Web API - Element.innerHTML .

...