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!
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).