Chrome中的YUI RTF编辑器和相同来源策略

Question

I'm experimenting with YUI 3 Rich Text Editor and came across an incident that I don't understand: 我正在尝试使用YUI 3 Rich Text Editor，并且遇到了一个我不了解的事件：

when I inject an iframe from different origin inside the editable area, then the content of this iframe can be edited as any other content. 当我将来自不同来源的iframe注入可编辑区域内时，该iframe的内容可以像其他任何内容一样进行编辑。 I can put the cursor into the iframe area and for example delete characters. 我可以将光标放在iframe区域中，例如删除字符。

This happens only in Chrome, with Firefox it's not possible to edit the iframe. 这种情况仅发生在Chrome中，而使用Firefox则无法编辑iframe。 How is it possible that the DOM of the inner iframe can be manipulated although it's not of the same origin as the page of YUI Text Editor? 尽管内部iframe的DOM与YUI文本编辑器的页面的起源不同，但如何才能对其进行操纵？

Here is the example coding: 这是示例代码：

<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>

Google Chrome 20: iframe is editable Google Chrome 20：iframe可编辑

Firefox 13: iframe not editable Firefox 13：iframe无法修改

Answer 1

YUI Rich Text Editor creates an iframe for the editable area and sets the designMode of the document to on . YUI富文本编辑器会为可编辑区域创建一个iframe，并将文档的designMode设置为on 。 That means this iframe and all of its descendants are in editable mode. 这意味着该iframe及其所有后代处于可编辑模式。 If you inject then another iframe into the editable area it will inherit this property and be also editable, independent of its origin. 如果您将另一个iframe注入到可编辑区域中，它将继承此属性，并且也可以对其进行编辑，而与它的来源无关。

Therefore the assumption that the YUI Text Editor is somehow manipulating the DOM of the injected iframe is not correct: there is no JavaScript involved, it's purely a user interaction like on any other editable field (like textarea or elements with contenteditable attribute). 因此，关于YUI文本编辑器以某种方式操纵注入的iframe的DOM的假设是不正确的：不涉及JavaScript，它完全像其他任何可编辑字段（例如textarea或具有contenteditable属性的元素）上的用户交互。

Chrome中的YUI RTF编辑器和相同来源策略

问题描述

1 个解决方案

解决方案1
1 已采纳 2012-07-19 08:40:53

Chrome中的YUI RTF编辑器和相同来源策略

问题描述

1 个解决方案

解决方案1 1 已采纳 2012-07-19 08:40:53

解决方案1
1 已采纳 2012-07-19 08:40:53