JavaScript and other tags are being removed after updating to CKEditor 4.1

I've noticed this issue as well with CKEditor 4.1 and the 1.9 module. I don't recall seeing the issue with 4.0.X so maybe this is something new that has been introduced. Another thing that I've noticed is that all classes and ids are also removed when the editor opens a page.

--EDIT--
Digging into this issue a bit shows some interesting changes in the 4.1 changelog.
http://ckeditor.com/whatsnew

It looks like there is a new Advanced Content Filter which might be causing the behavior we're seeing. Looking over the guide quickly, it seems like you can disable this filter with the following command added to the advanced section of the CKEditor profile:
config.allowedContent = true;

I tried this on my DEV box and it preserves my CSS and JS now. Hope this helps.

For those of us who might not want to turn off this rather powerful new feature, there are ways to configure it to allow certain things through. The documentation is spotty at this point since it is so new, but here's an example of what I've been able to figure out so far:

config.extraAllowedContent = 'p(*){*}[*]';

In this example I am telling the editor to allow p tags to have any class (*), any style {*} and any attribute [*]. Another example would be if I wanted to allows ids on any div tag, I would add this rule.

config.extraAllowedContent = 'div[id]';

You can only have a single one of these config statements in your CKEditor profile, so if you wanted both of the rules I showed above, you can combine them like so:

config.extraAllowedContent = 'p(*)[*]{*};div[id]';

I'll be spending some more time playing with this feature and writing a rule for my site over the next few weeks and I'll post it here if anyone is interested in using it.

Finally, it would be great if we could get this new feature built into the module's settings or at least a way to easily disable it.

The full documentation is https://github.com/ckeditor/ckeditor-docs/tree/master/guides/dev/configu...

UPDATE: I found where to add the strings, sorry for the noobie noise. The solution in comment #1 worked for me.
----
Can you please tell me (as a site admin, not a programmer) where I would add one of these strings? Thanks!

[As a side note, sadly, it seems CKE has gotten more obscure and discouraging for the average site administrator to use... we should easily be able to set up a text filter that allows people to do standard things like embed a list of mailchimp newsletters or a google calendar ... I have been struggling with this for a week. Almost ready to revert to an earlier version.]

#6 yes it will stay (and the config is even exportable).

#5 if there is mostly consensus about this option, we can even disable it by default in ckeditor.config.js. However, the library developers will certainly have their idea explained.

How about making ACF configurable, like sashkernel suggested, instead of disabling it totally?

Advanced content filter:
Desc: Configure input data filtering in CKEditor.

( ) Disabled
Desc: CKEditor will not filter any tags and as a result, the user will be able to insert any content into the editor. The content will only be filtered by server-side filters associated with input formats.

(*) Enabled
Desc: CKEditor will only allow tags/attributes/styles provided by CKEditor features. Disallowed content will be removed directly by CKEditor. When configured properly, it helps to ensure a true WYSIWYG experience.

Example: if only Bold and Link buttons are enabled, only <strong> and <a> tags will be allowed. Any <b> tags will automatically be converted into <strong>. The <img> tag will not be allowed, unless the Image button is added to the toolbar.

WARNING: CKEditor will not use the set of tags associated with input format. Only the buttons enabled in the toolbar will determine which tags/attributes/styles are handled by CKEditor. Enabling ACF in CKEditor does not affect server-side filtering done by Drupal in any way.

      Extra allowed content:

      [ TEXTAREA ]

      Desc: Enter any additional rules you would like to allow. See documentation about Allowed Content Rules - String Format. Sample rules: p h2 h3 h4 strong em; a[!href]; img[alt,!src]{width,height};

-------------------------

Apart from this change, we should also automatically append to extraAllowedContent all the clasess used by CKEditor module to indent/outdent/justify content (rte* classes).

Should it be disabled by default for the "backward compatibility"?

BTW the issue in Drupal 8 core #1936392: Configure CKEditor's "Advanced Content Filter" (ACF) to match Drupal's text filters settings.

The problem with backwards compatibility is that this has been turned on by design in CKEditor 4.1. The theory is that one at least should read changelog before updating, in fact we blogged about this a few times and released RC first to give people more time to read about this upcoming change.

Introducing the same synchronization between input formats and CKEditor profile like in Drupal 8 would be quite troublesome, also because of the fact that CKEditor profiles can be attached to more than one text format. (Though I agree that it would be the coolest option)

I'd go with KISS for now, as people are updating to CKEditor 4.1 every day and are having troubles with this new situation. To help people in adopting CKEditor 4.1 and built-in ACF to their sites, I'd post an information on the project page, go ahead with this extra configuration option and release new versions of D6 & D7 modules next week.

You forgot to modify the project page, didn't you? ;)

Even ACF is enabled by default in CKEditor 4.1, in Drupal we try to keep things not to break between libraries updates to have backward compatibility between point releases.

BTW this situation is similar to Drupal core with the itok "new feature" #1934498: Allow the image style 'itok' token to be suppressed in image derivative URLs: while it is considered a security improvement, many people don't like it, and it breaks websites. Also, ACF being changed (black list, wildcard features are planned to be added into ACF), I think we can wait a bit before forcing people using it. For example, I want to use oembed plugin and I trust the 'html' data it returns, so I'd like CKEditor to ignore all markup generated by my oembed plugin. In that case, it want a black list feature to disallow only tags like script or iframe src="script etc". When the widget plugin coming in CKEditor 4.2, I hope it will be easier.

A new configuration option has been added: "Advanced content filter".
Just like described above, it is possible to disable ACF as well as specify extra allowed content. By default no changes are made to the default ACF configuration of CKEditor, so it is set to "on" in other words.

@jcisio - I really understand your argumentation and believe me it is really a hard decision to stick to what I wrote earlier. We had exactly the same doubts when we enabled ACF by default in CKEditor 4.1.
It would be even more confusing to enable it by default at a later stage, so let's just do it right now, when the feature has been introduced.

It should be now possible to understand what ACF is and to disable ACF, by simply visiting the CKEditor profile, so let's hope it will bring less confusion now to the users.

=============

For example, I want to use oembed plugin and I trust the 'html' data it returns, so I'd like CKEditor to ignore all markup generated by my oembed plugin. In that case, it want a black list feature to disallow only tags like script or iframe src="script etc". When the widget plugin coming in CKEditor 4.2, I hope it will be easier.

Black listing should not improve the situation in any significant way for the end user. At least not in a way that would affect the decision whether to come with ACF enabled or not. The key problem was that content was removed, so being able to disable ACF was the key issue.

Note that a feature defines content that should be allowed (or lets say disallowed if black listing will be implemented) by CKEditor instance, not by a feature (plugin). So in this particular case, you still will not be able to use disallowedContent to specify that your plugin can inject (almost) anything and at the same time have the rest of plugins following allowedContent rules. That's simply because when you load the content again into editor, it will not know what part of HTML has been created by your plugin.

An ideal way for such plugin would be to come with a predefined set of tags / attributes that can be injected. Blocking just script tags and iframes does not increase the security, because there are other ways to execute JS (ACF is not a security feature developed to prevent against XSS).

+++++++++++++++++

Not sure if it makes sense to go into details, but you should be able to "trick" ACF already without waitng for widgets, just use toDataFormat / toHtml events and manipulate the data injected/created by your plugin, and use priorities to skip the filter. Convert the "disallowed" content injected by your plugin into e.g. a single img tag with data-* attributes that will not be stripped by CKEditor at the right stage and voilà.

Just a side note, what ACF tries to do is already done in this module through its "security filters". Not at the same layer, but at least, someone can try to insert bad code, but it won't be shown to others.

// Just to avoid confusion by anyone reading this thread ;) ACF does not replace security filters in any way in terms of XSS protection. Indeed the things it does may lead to such observations, but since it was never designed for that (e.g. the values of attributes are not checked, a valid allowed attribute can have a value that executes JS, e.g. <TABLE BACKGROUND="javascript:alert('XSS')">), better to keep it in mind (this particular example should not work anyway, but I guess it explains what I mean).

Thank you ,, its works with me too

config.allowedContent = true;

#1 and #2 didn't quite work for me... I have the following code

<!-- AddThis Button BEGIN -->
<div style="float:right;">
<span class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_google_plusone" g:plusone:count="false"></a>
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_email"></a>
<a class="addthis_button_compact"></a>
</span>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=mysharethisnumber"></script>
</div>
<!-- AddThis Button END -->

And it gets reduced to :

<!-- AddThis Button BEGIN -->
<div style="float:right;">
<span class="addthis_toolbox addthis_default_style "> </span>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=mysharethisnumber"></script>
</div>
<!-- AddThis Button END -->

All the "a" tags get stripped out. The strange thing is that I can enter "a" tags manually and they work ok (except that they get an extra "p" tag around it.

This is really annoying because I cannot set ckeditor to be enabled by default nor can I edit text in a node that has some code entered manually...

Willynux,

I can reproduce the issue you mention with all of the a tags getting stripped out in my drupal setup. I'm not exactly sure what ckeditor is doing here other than just removing what it thinks to be empty tags. Two easy ways I found to work around this would be to either give your a tag's the name property:

<!-- AddThis Button BEGIN -->
<div style="float:right;">
<span class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_google_plusone" g:plusone:count="false" name="plusone_one"></a>
<a class="addthis_button_preferred_1" name="plusone_two"></a>
<a class="addthis_button_preferred_2" name="plusone_three"></a>
<a class="addthis_button_preferred_3" name="plusone_four"></a>
<a class="addthis_button_email" name="plusone_five"></a>
<a class="addthis_button_compact" name="plusone_six"></a>
</span>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=mysharethisnumber"></script>
</div>
<!-- AddThis Button END -->

or put a   within them.

<!-- AddThis Button BEGIN -->
<div style="float:right;">
<span class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_google_plusone" g:plusone:count="false">&nbsp;</a>
<a class="addthis_button_preferred_1">&nbsp;</a>
<a class="addthis_button_preferred_2">&nbsp;</a>
<a class="addthis_button_preferred_3">&nbsp;</a>
<a class="addthis_button_email">&nbsp;</a>
<a class="addthis_button_compact">&nbsp;</a>
</span>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=mysharethisnumber"></script>
</div>
<!-- AddThis Button END -->

In both examples my ckeditor leaves the a tags intact. I know this probably isn't the ideal fix, but to find that you'll have to read up on how/why ckeditor strips empty tags.

It's a nice way to circumvent the empty tag stripping. It didn't occur to me that the tags were empty... thank you Johns966!

I didn't see anyone mention this method but you can customize CKEditor in the module's settings like so. Use this for any filter format you need to adjust. This assumes you just want to ignore the new feature in CK and let Drupal handle stripping tags using the filter system as usual.

admin/config/content/ckeditor/edit/Full
->
ADVANCED OPTIONS
->
Custom JavaScript configuration
->
Paste in:
config.allowedContent = true;

SAVE

it's actually suggested in the very first comment - and it didn't make any difference for my sites.

#1 worked for me. Thank you!

Hi,

wwalc, you forgot to include extraAllowedContent to the CKEditor settings.

Patch attached. Please review

Thanks Taran2L. Committed and pushed.

I found Answer #21 to be the best answer.

Here is the some code example list
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.form...
Try this.

Comment 21 worked for me as well after updating from ckeditor module 1.12 to 1.13 and ckeditor library 3.x to 4.3.x. Before adding the line in comment to 21 to the ckeditor profile configuration, it was stripping any extra html even if it was allowed in the full html text format.

I've tried both 1, #2 and #21, which seem to be workign for others, but #1 and #2 don't work for me, and I cannot access #21 because all of the administrative options-like links are disabled. I've cross-posted the issue here: https://drupal.org/node/2220607

To johns996, your answers is great. I'm exhausted with ckeditor's doc, but still not find out the exact format for extraAllowedContent, after read your post, finally it resolved. Thanks man, and the document sucks.

Hi, I'm using both of #1 and #19 together, and it seems being working
(pinterest embed pin)
drupal 7.26
drupal ckeditor 7.1.13
ckeditor 4.2.2

This is getting very frustrating. I've tried everything. I have disabled the Advanced Content Filter. I've set "config.allowedContent = true;" in both my ckeditor profile and in config.js.

I can save an image such as follows and it works fine:
<img src="xyz.jpg" style="style="width: 400px; height: 267px;"/>

Yet, the next time I edit that content, ckeditor converts it to:

<img src="xyz.jpg" class="c1"/>

Who thought this was a good idea? Is there anyway around this? I know we should have presentation in css, but my site has hundreds of historical pages, and if someone goes in to make one minor edit, all the image sizes and inline formatting should not disappear. Is there any solution to this?

I just discovered what was causing the error in my comment #35 above. It turns out the HTML Tidy module was rewriting my inline styles. It wasn't ckeditor's fault after all.

None of the above work for me.

drupal 7.28
drupal ckeditor module 7x-1.14
ckeditor 4.4.1

the obvious solution is to switch editors

I have the same problem as everyone else recently (#35). Solution #1 doesn't work.

Drupal 7.28
Drupal CKeditor - WYSIWYG HTML editor 7.x-1.14+2-dev
CKeditor Library 4.4.1 (is this the problem?)

I don't see any other modules enabled that could be conflicting.

I tried all the solutions above and none of them worked for me. The only way I could get this to work was to enable htmlpurifier to disable scripts altogether in the wysiwyg editor and instead add the necessary javascript via js_injector

htmlpurifier install:
0. if you don't have it already, download and enable the https://www.drupal.org/project/libraries module
1. extract http://htmlpurifier.org/releases/htmlpurifier-4.6.0-lite.zip into your /sites/all/libraries folder
2. rename "htmlpurifier-4.6.0-lite" folder to "htmlpurifier"
3. create a file in the htmlpurifier folder called "VERSION" with the following text: 4.6.0 (or via commandline: echo 4.6.0 > htmlpurifier/VERSION)
4. download and enable the https://www.drupal.org/project/htmlpurifier module
5. go to /admin/config/content/formats/full_html and in the "Enabled filters" section check "HTML Purifier (advanced)", then click "Save configuration"

js_injector install:
1. download and enable the https://www.drupal.org/project/js_injector module
2. go to /admin/config/development/js-injector/add and add the desired javascript (make sure to use "The listed pages only" option to restrict the javascript to the appropriate page)

Obviously, this is less than ideal because from an outsider's perspective there is "magic" javascript behavior on a page and other developers/maintainers would not know how it is being inserted. Still, it worked for our needs.

Thanks very much for all of the comments on this thread. I have only recently started using ckeditor 4.xx and was truly baffled by some aspects of its behaviour, as were a couple of colleagues. For the time being I have disabled Advanced Content Filter until we work out some rules to allow inclusion of our essential tags and scripts.

Excellent - #21 provided nice and clear instruction for this annoying issue. Baffled as I'd used the same version of ckeditor library and module before and not come across this problem.

It was image insertion that was causing me a problem. Now sorted. Thank you!

How to waste two hours of your life...

#21 worked for me.

Thanks!!!

none of these are working for me with the dev of wysiwyg and ckeditor 4.3.3

#21 worked for me too. I've use ckeditor 4.4.5

I want to allow all tags except script, iframe tag which cause an issue of XSS. Please let me know if anybody know the solution.

This seems like something that should be added into the WYSIWYG module, the ability to add custom settings to editors is a pretty widespread requirement. But in the absence of that, I still recommend not editing the module itself since it would break on upgrades... fortunately the module does provide a call to `drupal_alter`, so in a custom module:

 function mymodule_wysiwyg_editor_settings_alter(&$settings, $context){
    	//check if the editor is ckeditor and the version is at least 4.0
    	if($context['profile']->editor=='ckeditor' && $context['editor']['installed version'][0]>3){
    		//add custom settings for ckeditor 4.+ here
    		$settings['allowedContent'] = TRUE;
    	}
    }

where "mymodule" is obviously the name of your custom module. This accomplishes the task without editing someone elses module.

Hi ,

This patch doesn't worked for me.

#1 works for me.

Thanks

#1 works for me.

Thanks

For anyone still having problems with filtered content, and you're sure you've turned off the ACF, I found that the Teaser Break plugin being enabled was still causing me problems. I had ACF turned off, but CKeditor would still remove my script tags, just by toggling between source mode and wysiwyg mode. Turning off the Teaser Break plugin fixed it. I'm not sure why this is, but I'm sure that was the source of the problem!

Thanks @John Carbone (#21), that fixed it.

#1 also works for me . Thanks a lot johns996

#50 worked for me, thanks!

#1 worked for me, but only after I updated the JQuery setting per https://www.drupal.org/project/wysiwyg/issues/1334694#comment-8989063 (#14)