Question

我有一个使用html服务的简单应用程序脚本，我需要：after伪选择器。

将问题归结为一行代码，我有

<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，预期输出将是“现在你看到我现在你不”，但我只得到“现在你看到我了”

如果我删除了：现在你看到了我，正如预期的那样。

FWIW我正在使用.setSandboxMode（HtmlService.SandboxMode.NATIVE）

谁能告诉我我做错了什么？

Answer 1

caja编译器正在删除content: attr()行。在Caja Playground上尝试使用您的代码段，然后检查“渲染结果”，这应该更好地表示从Google Apps脚本提供HTML时将如何清理HTML，而不是jsfiddle。

这是呈现的内容：

<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>

data-hidden标记的<test>属性存活，但样式中没有content属性来包含它。这可能是因为attr()语句似乎是攻击媒介。（example）

如果我们再次使用常量content进行尝试，它会在哄骗中幸存下来：

<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>

由于清理，您无法以attr()方式工作。您可以在Caja Issue Tracker上输入问题。

如何使用Google Apps脚本html服务显示数据属性：after？

1 个答案: