Vue.js 阻止 iframe 的功能答案

【问题标题】：Vue.js prevents the function of iframeVue.js 阻止 iframe 的功能
【发布时间】：2016-10-17 18:48:38
【问题描述】：

我遇到了一个非常奇怪的问题，我需要在 vue 模板中添加一个 iframe，然后再编辑这个 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 显示在这里：

然而，期望的行为是呈现如下所示的文本：

什么会导致这个问题，我应该如何最好地解决它？（请注意，这是我正在开发的一个非常大的 rails 应用程序的一个极其简化的版本，即最小完整可验证示例。）

【问题讨论】：

Vue 1.x 还是 2.x？我最初的想法是，当安装模板时，它将完全替换您在<div> 标签中的<iframe>。我认为<iframe> 需要成为模板的一部分（如果可能的话）。只是猜测。
它是 2.0 版本，不幸的是，将它全部移动到 vue 模板中是不可能的，因为这只是一个极其简化的版本。实际应用程序混合使用了 webpack、yarn、vue、rails、tinymce 和其他一些软件包。
只是在黑暗中拍摄，但将v-pre 添加到iframe 有帮助吗？
@BillCriswell 不，似乎没有什么不同。不过感谢您的建议:)

标签： javascript ruby-on-rails iframe vue.js

【解决方案1】：

你正在做的是 XSS。浏览器不允许这样做。

【讨论】：