When I add conditional inline CSS like so:

  drupal_add_css('body {color: red;}', array('group' => CSS_THEME, 'type' => 'inline', 'browsers' => array('IE' => 'lt IE 7', '!IE' => FALSE), 'preprocess' => FALSE));

This results in this html

<!--[if lt IE 7]>
<style type="text/css" media="all">
<!--/*--><![CDATA[/*><!--*/
body {color: red;}
/*]]>*/-->
</style>

<![endif]>

Which causes Firefox3.6 to show the closing '*/-->' on the page.

Comments

amateescu’s picture

Title: Conditional inline styles don't work correctly » Improper escaping of CDATA for inline css
Component: theme system » base system
Status: Active » Needs review
StatusFileSize
new643 bytes

According to http://en.wikipedia.org/wiki/CDATA#Use_of_CDATA_in_program_output and http://dorward.me.uk/www/comments-cdata/#mandatory-xhtml, this is the correct method for escaping CDATA for css blocks.

Status: Needs review » Needs work

The last submitted patch, 1021622-cdata_escaping_in_xhtml.patch, failed testing.

amateescu’s picture

Status: Needs work » Needs review
StatusFileSize
new1.52 KB

The test for adding inline css has to be fixed too.

k3vin_nl’s picture

Thanks!. I've done some quick tests, and the patch seems to fix the issue.

amateescu’s picture

bfroehle’s picture

The patch in #3 should also change the comments, as they no longer match the proposed code.

See #672954-12: Wrap inline CSS with explicit CDATA for the backstory on these lines of code.

k3vin_nl’s picture

Version: 7.0 » 7.x-dev

@bfroehle
I don't see why the comments should change?

This is the code generated.

<!--[if lt IE 7]>
<style type="text/css" media="all">
/* <![CDATA[ */
body {color: red;}
/* ]]> */
</style>
<![endif]-->

This is the origal comment

  // For inline CSS to validate as XHTML, all CSS containing XHTML needs to be
  // wrapped in CDATA. To make that backwards compatible with HTML 4, we need to
  // comment out the CDATA-tag.

It looks to me like this still applies after the patch?

bfroehle’s picture

Aha, sorry, I missed the /* and */ wrapping the <![CDATA[ tags. Looks good to me, but this is not my area of expertise.

attiks’s picture

Version: 7.x-dev » 8.x-dev
Priority: Normal » Major
Status: Needs review » Needs work

Patch in 3 solves the validation error and the display problems in opera, but this needs to be fixed in Drupal 8 first.

Moving to major since it breaks output on certain browsers.

Niklas Fiekas’s picture

Referencing #1541438: Please lets remove the embed prefix. If we decide to do that, then this would only be applicable to 7.x.

catch’s picture

Issue tags: +Needs backport to D7

Tagging.

xjm’s picture

Issue tags: +Needs tests

Can we confirm whether this is still an issue in current D8?

dags’s picture

Assigned: Unassigned » dags
dags’s picture

Issue tags: +Needs reroll

This does still appear to be an issue in D8. I tested with recent versions of browsers and all rendered the pages ok with no breakage or console errors that I could tell. I imagine that some supported browsers could still break. The last submitted patch no longer applies and needs a reroll.

Sample output:

Opera 12.14:

<!--[if lt IE 7]>
<style media="all">
<!--/*-->
<!--[CDATA[/*-->
<!--*/
body {color: red;}
/*]]>*/-->
<!--[endif]---->
<!--[if lte IE 8]>
<script src="http://d8/core/misc/html5.js?v=11"></script>
<![endif]-->

Firefox 20.0-beta:

-[if lt IE 7]>
<style media="all">
<!--/*-->
    
      <!--[CDATA[/*-->
    
      <!--*/
body {color: red;}
/*]]>*/-->
    
      <!--[endif]---->
    
      <!--[if lte IE 8]>
<script src="http://d8/core/misc/html5.js?v=11"></script>
<![endif]-->

Chrome 25.0.1364.172:

<!--[if lt IE 7]>
<style media="all">
<!--/*-->
<!--[CDATA[/*-->
<!--*/
body {color: red;}
/*]]>*/-->
dags’s picture

Assigned: dags » Unassigned
Status: Needs work » Needs review
Issue tags: -Needs tests, -Needs reroll
StatusFileSize
new1 KB
new1.66 KB

Here's a reroll with a test.

Sample output with patch applied:

Firefox 20.0-beta

<!--[if lt IE 7]>
<style media="all">
/* <![CDATA[ */
body {color: red;}
/* ]]> */
</style>
<![endif]-->

Status: Needs review » Needs work

The last submitted patch, 1021622-cdata_escaping_in_xhtml-15-testonly.patch, failed testing.

xjm’s picture

Status: Needs work » Needs review

Remember to put the test-only patch first so the bot doesn't mess with the status. :)

xjm’s picture

Priority: Major » Normal
Status: Needs review » Reviewed & tested by the community

Downgrading from major since the problem only occurs with certain custom CSS. @dags confirmed that there are no rendering errors with or without the patch in HEAD and the latest browsers above, but per #1, this is still a markup bug.

xjm’s picture

xjm’s picture

Issue tags: +Quick fix
webchick’s picture

Version: 8.x-dev » 7.x-dev
Status: Reviewed & tested by the community » Patch (to be ported)

I was about to mark this needs work for the same thing bfroehle did in #6, but #7 confirms that it's still correct even though it's kinda hard to tell by the diff.

Committed and pushed to 8.x. Thanks! Moving down to 7.x.

dcam’s picture

Backported #15 to D7.

dcam’s picture

Status: Patch (to be ported) » Needs review

Oops. >.>

tstoeckler’s picture

Status: Needs review » Reviewed & tested by the community

Wow, this is one patch that is still literally identical in D8 and D7. Looks good!

David_Rothstein’s picture

Status: Reviewed & tested by the community » Needs review

I read through the issues linked to above and it seems that extra commenting is not superflous; it's there to support older HTML user agents (e.g., #672954: Wrap inline CSS with explicit CDATA links to http://www.webdevout.net/articles/escaping-style-and-script-data).

I am not sure what we're supporting in that regard but there needs to be some discussion of that before committing this to Drupal 7... For example, does this cause issues with the HTML seen by relatively primitive user agents (cURL or drupal_http_request())?

mgifford’s picture

Issue summary: View changes
Status: Needs review » Needs work
Issue tags: +Needs reroll

It would be easy enough to test a rerolled patch with cURL & drupal_http_request().

What other discussion should happen and how would we make it happen more quickly?

dcam’s picture

Issue tags: -Needs reroll
StatusFileSize
new1.54 KB

Rerolled #22.

dcam’s picture

Status: Needs work » Needs review

mgifford’s picture

We still need to address David_Rothstein's concerns in #25.

1) "extra commenting is not superflous"

2) "does this cause issues with the HTML seen by relatively primitive user agents (cURL or drupal_http_request())?"

mikeytown2’s picture

This change will not cause an issue with drupal_http_request() as it doesn't parse the html, only the headers; my guess is the same for cURL. Things further down the line do the parsing http://stackoverflow.com/questions/3409264/how-to-parse-actual-html-from...

Searching D8 code I don't really see this being used though; it is used in here https://api.drupal.org/api/drupal/core!tests!Drupal!Tests!Core!Asset!Css... but the $wrap_in_cdata is never true so it never runs.

  • webchick committed 8f039f0 on 8.3.x
    Issue #1021622 by amateescu, dags, K3vin: Fixed Improper escaping of...

  • webchick committed 8f039f0 on 8.3.x
    Issue #1021622 by amateescu, dags, K3vin: Fixed Improper escaping of...

  • webchick committed 8f039f0 on 8.4.x
    Issue #1021622 by amateescu, dags, K3vin: Fixed Improper escaping of...

  • webchick committed 8f039f0 on 8.4.x
    Issue #1021622 by amateescu, dags, K3vin: Fixed Improper escaping of...

Status: Needs review » Closed (outdated)

Automatically closed because Drupal 7 security and bugfix support has ended as of 5 January 2025. If the issue verifiably applies to later versions, please reopen with details and update the version.