Self-contained CSS (and JS) should use style (and script) tags rather than data URIs

[alyssarosenzweig]

At the moment, I have markdown files that need to be styled with foo.css. I run the command:

$ pandoc -f markdown -t html --css foo.css --standalone --self-contained bar.md > bar.html

This does work, but it embeds the CSS as a massive data URI included with a link tag, which prevents certain optimizations from occurring outside of pandoc. Instead, foo.css should be placed verbatim (or minified) into a <style> tag, avoiding the data URI entirely.

To work around this bug, I currently use:

$ echo "<style>" > /tmp/open && echo "</style>" > /tmp/close
$ pandoc -f markdown -t html -H /tmp/open -H foo.css -H /tmp/close --standalone --self-contained bar.md > bar.html

This works as expected, but it is decidedly messier than it needs to be.

For text formats (as opposed to self-contained images and the like), is there a good reason to use data URIs?

[jgm]

Using style tags makes sense for CSS. Using script tags makes sense for JS too (though we'd need to decide what to do when it's zipped---that adds some complexity). This just affects Text.Pandoc.SelfContained.

[jgm]

OK, I've pushed a fix. This could use some extensive battle testing.

[alyssarosenzweig]

I just installed from source; it seems to work as expected. Thanks! :-)

[bgrenet]

I've the impression that the current version of pandoc uses the old behavior again, that is embedding css file as data-uri rather than between <style> tags. In that the intended behavior? Is this configurable?

By the way, I would have the same comment about SVG files that could be included as text in a self contained html.

[tarleb]

I've the impression that the current version of pandoc uses the old behavior again, that is embedding css file as data-uri rather than between <style> tags. In that the intended behavior? Is this configurable?

I'm not aware of any changes that might have caused this, and it's certainly not intended AFAIK. Please raise a new issue for this.

By the way, I would have the same comment about SVG files that could be included as text in a self contained html.

This is difficult for various reasons. E.g.: there is a semantic difference between <img> elements pointing to SVG, and raw <svg> elements. Browsers will not run JavaScript in the image source, but will happily execute scripts in the latter case. This can be a potential security issue. Pandoc is not a sanitizer, so this is most likely out of scope.

[bgrenet]

I'm not aware of any changes that might have caused this, and it's certainly not intended AFAIK. Please raise a new issue for this.

I will investigate it a bit more (to be sure of the issue) and raise an issue if needed.

This is difficult for various reasons. E.g.: there is a semantic difference between elements pointing to SVG, and raw elements. Browsers will not run JavaScript in the image source, but will happily execute scripts in the latter case. This can be a potential security issue. Pandoc is not a sanitizer, so this is most likely out of scope.

I was not aware of this difference. I'll think about it, but it may be interesting to have an easy way to insert raw elements in for instance a markdown source, that would be inserted as is in the html output, but as an image in other formats (pdf, etc.). The best way is probably to use some filter.

[jgm]

commit 52e372b71d8ac5168025ad7ec2e9623c74c2dd93
Author: John MacFarlane <jgm@berkeley.edu>
Date:   Wed Nov 1 17:42:33 2017 -0700

    SelfContained: use base64 for css links with media attribute.
    
    This fixes `--self-contained` with s5.  Closes #4026.