Блог

Главная - Вопросы по программированию - Vue.js предотвращает работу iframe

Vue.js предотвращает работу iframe

#javascript #ruby-on-rails #iframe #vue.js

#javascript #ruby-on-rails #iframe #vue.js

Вопрос:

Я столкнулся с очень странной проблемой, когда мне нужно иметь iframe внутри шаблона vue, а затем редактировать этот iframe позже. Мне удалось свести это к следующему коду: 

 <html>
  <body>
    <div id="app">
      <iframe id="testFrame" src="javascript:''" width="500" height="500">
      </iframe>
      <!-- This iframe is coming from the rails `yield` helper function. However this is the MCVE of our problem. -->
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
    <script>

var doc = document.getElementById('testFrame').contentWindow.document;
doc.open();
doc.write('<html><head><title></title></head><body>Hello world.</body></html>');
doc.close();
new Vue({
  el: '#app'
});

    </script>
  </body>
</html>

Однако созданный iframe показан здесь:

Текущий, неправильный iframe.

Однако желаемое поведение заключается в том, чтобы текст отображался так, как показано ниже:

введите описание изображения здесь

Что может вызвать эту проблему и как мне лучше всего ее исправить? (Пожалуйста, обратите внимание, что это чрезвычайно упрощенная версия минимального полного проверяемого примера очень большого приложения rails, над которым я работаю. )

Комментарии:

1. Vue 1.x или 2.x? Моя первоначальная мысль заключается в том, что когда шаблон будет смонтирован, он полностью заменит тот <iframe> , который у вас есть в вашем <div> теге. Я думаю <iframe> , что это должно быть частью шаблона (если это вообще возможно). Просто предположение.

2. Это версия 2.0, к сожалению, на самом деле невозможно перенести все это в шаблоны vue, поскольку это всего лишь чрезвычайно упрощенная версия. Фактическое приложение использует сочетание webpack, yarn, vue, rails, tinymce и нескольких других программных пакетов.

3. Просто выстрел в темноте, но добавляет ли добавление v-pre в iframe справку?

4. @BillCriswell Нет, похоже, это не имеет значения. Спасибо за предложение, хотя 🙂

Ответ №1:

То, что вы делаете, — это XSS. Браузеры этого не допускают.