javascriptphptinymcetinymce-5

Forcing sandbox attribute to specific value in TinyMCE

I'm using TinyMCE as an wyswyg editor, and I'm trying to make it always add a sandbox attribute to every iframe it finds, and resetting it to a specific value, for example "allow-scripts allow-same-origin".

I've tried by adding to valid_elements:

"iframe[name|src|srcdoc|seamless<seamless|width|height|sandbox:allow-scripts allow-same-origin]"

But it doesn't work; also

"iframe[name|src|srcdoc|seamless<seamless|width|height|sandbox:allow-scripts]"

does not seem to work; I've tried with

"iframe[name|src|srcdoc|seamless<seamless|width|height|sandbox:]"

which correctly adds the sandbox attribute if missing, but DOES NOT replace its value with the empty one if the attribute is already present, as I was expecting...

What am I doing wrong?

Thanks!

Solution

  • You can try adding a node filter. The setup function like this should do the job:

    setup: function(editor) {
  editor.on('PreInit', function() {
    editor.parser.addNodeFilter('iframe', function(nodes) {
      nodes.forEach(function(node) {
        node.attr('sandbox', 'allow-scripts allow-same-origin');
      });
    });
  });
}

    It will get each iframe during parsing and force the relevant sandbox attribute to be what you want.

    P.S. using both allow-scripts and allow-same-origin attributes is not a recommended practice (see the note below the attribute descriptions).