Question

我遇到了一个非常奇怪的问题，我需要在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应用程序。）

Answer 1

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

Vue.js阻止了iframe的功能

1 个答案: