How can I get Google Apps script html service to display data- attributes using :after?

Question

I have a simple apps-script that uses the html service and I need the :after pseudo-selector .

Boiling down the issue to a line of code, I have

<style>
test:after {
  content: attr(data-hidden);
  display: inline-block;
  font-weight: bold;
}
</style>

<test data-hidden="Now you don't">Now you see me </test>

Per jsfiddle, the expected output would be "Now you see me Now you don't", but I only get "Now you see me"

If I remove the :after I get Now you see me, as expected.

FWIW I am using .setSandboxMode(HtmlService.SandboxMode.NATIVE)

Can anyone tell me what I am doing wrong?

Answer 1

The content: attr() line is being stripped by the caja compiler. Try your code snippet on the Caja Playground, and inspect the Rendered Result, which should be a better representation of how HTML will be sanitized when served from Google Apps Script than you'll get at jsfiddle.

Here's what is rendered:

<caja-v-html>
  <caja-v-head>
    <style>
      .CajaGadget2___ caja-v-test:after{
        display:inline-block;
        font-weight:bold;}
    </style>
  </caja-v-head>
  <caja-v-body>
    <caja-v-test data-caja-data-hidden="Now you don't">Now you see me </caja-v-test>
  </caja-v-body>
</caja-v-html>

The data-hidden attribute of the <test> tag survives, but there's no content attribute in the style to contain it. That's probably because the attr() statement appears to be an attack vector. (example)

If we try again with a constant content, it survives cajoling:

<caja-v-html>
  <caja-v-head>
    <style>
      .CajaGadget2___ caja-v-test:after{
        content:"waffles";           <<<<<<
        display:inline-block;
        font-weight:bold;}
    </style>
  </caja-v-head>
  <caja-v-body>
    <caja-v-test data-caja-data-hidden="Now you don't">Now you see me </caja-v-test>
  </caja-v-body>
</caja-v-html>

Because of the sanitization, you're not going to be able to make attr() work this way. You could enter an issue on the Caja Issue Tracker.