YUI富文本编辑器和Chrome中的同源策略

YUI Rich Text Editor and same origin policy in Chrome

本文关键字：策略 Chrome 文本 文本编辑 编辑器 YUI      更新时间：2023-09-26

我正在试用YUI 3 Rich Text Editor，遇到了一个我不理解的事件：

当我在可编辑区域内注入一个来自不同来源的iframe时，这个iframe的内容可以像任何其他内容一样编辑。我可以将光标放在iframe区域，例如删除字符。

这种情况只在Chrome中发生，在Firefox中无法编辑iframe。尽管内部iframe的DOM与YUI文本编辑器的页面不是同一个来源，但它怎么可能被操纵呢？

以下是编码示例：

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
    <script>
     YUI().use('editor-base', function(Y) {
       var editor = new Y.EditorBase({content: '<strong>This is <em>a test</em></strong><strong>This is <em>a test</em></strong> '});
       //Add the BiDi plugin
       editor.plug(Y.Plugin.EditorBidi);
       //Focusing the Editor when the frame is ready..
       editor.on('frame:ready', function() {this.focus();});
       //Rendering the Editor.
       editor.render('#editor');
     });
    </script>
    <script>
     function inject() {
       var ifr = $('<iframe/>', {
         style: 'display: block; width: 300px; heigth: 200px;',
         src: 'http://demo.yarkon.de',
         frameBorder: 0, 
         scrolling: 'no'
       });
       $('#editor').find('iframe').contents().find('body').append(ifr);
     }
    </script>
    </head>
  <body>
    <button onclick='inject()'>Inject</button>
    <div id="editor"></div>
  </body>
</html>

谷歌Chrome 20:iframe可编辑

Firefox 13:iframe不可编辑

YUI Rich Text Editor为可编辑区域创建一个iframe，并在上将文档的designMode设置为。这意味着这个iframe及其所有子代都处于可编辑模式。如果将另一个iframe注入到可编辑区域中，它将继承此属性，并且也是可编辑的，与它的来源无关。

因此，YUI文本编辑器以某种方式操纵注入的iframe的DOM的假设是不正确的：不涉及JavaScript，这纯粹是一种用户交互，就像在任何其他可编辑字段（如文本区域或具有contenteditable属性的元素）上一样。

相关文章：