【问题标题】:unable to escape In pug lang无法逃脱在帕格朗
【发布时间】:2021-04-14 13:25:43
【问题描述】:

所以我有一些使用 QuillJS(所见即所得编辑器)生成的用户定义的 HTML。就显示/编辑编辑器内的文本而言,它工作正常,但是当我尝试在我的哈巴狗页面上使用 !{var} 在页面上显示相同的数据时,它显示为字符串“....我的 HTML代码在这里……”

-----这是我从 DB 获取它时的样子----

 "<h1 class=\"ql-align-center\">Essential things to think about before starting a blog</h1><p><br></p><h2 class=\"ql-align-center\">​It takes several ingredients to create a delicious blog&l
    t;/h2><p><br></p><p class=\"ql-align-justify\">It has been exactly 3 years since I wrote my first blog series entitled “Flavorful Tuscany”, but starting it was definitely not easy. Back then, I didn’t know much about blogging, let alone think that one day it could become <strong>my full-time job</strong>. Even though I had many recipes and food-related stories to tell, it never crossed my mind that I could be sharing them with the whole world.</p><p class=\"ql-align-justify\">I am now a <strong>full-time blogger</strong> and the curator of the <a href=\"https://ckeditor.com/ckeditor-4/#\" target=\"_blank\">Simply delicious newsletter</a>, sharing stories about traveling and cooking, as well as tips on how to run a successful blog.</p><p class=\"ql-align-justify\">If you are tempted by the idea of creating your own blog, please think about the
    following:</p><ul><li class=\"ql-align-justify\">Your story
    (what do you want to tell your audience)</li><li class=\"ql-align-justify\">Your audience (who do you write for)</li><li class=\"ql-align-justify\">Your blog name and design</li></ul>"

---------这是 chrome DevTools 中的外观----

<div class="text-justify" id="description">
&lt;h1 class="ql-align-center"&gt;Essential things to think about before starting a blog&lt;/h1&gt;&lt;p&gt;&lt;br&gt;&lt;/p&gt;&lt;h2 class="ql-align-center"&gt;​It takes several ingredients to create a delicious blog&lt;/h2&gt;&lt;p&gt;&lt;br&gt;&lt;/p&gt;&lt;p class="ql-align-justify"&gt;It has been exactly 3 years since I wrote my first blog series entitled “Flavorful Tuscany”, but starting it was definitely not easy. Back then, I didn’t know much about blogging, let alone think that one day it could become &lt;strong&gt;my full-time job&lt;/strong&gt;. Even though I had many recipes and food-related stories to tell, it never crossed my mind that I could be sharing them with the whole world.&lt;/p&gt;&lt;p class="ql-align-justify"&gt;I am now a &lt;strong&gt;full-time blogger&lt;/strong&gt; and the curator of the &lt;a href="https://ckeditor.com/ckeditor-4/#" target="_blank"&gt;Simply delicious newsletter&lt;/a&gt;, sharing stories about traveling and cooking, as well as tips on how to run a successful blog.&lt;/p&gt;&lt;p class="ql-align-justify"&gt;If you are tempted by the idea of creating your own blog, please think about the following:&lt;/p&gt;&lt;ul&gt;&lt;li class="ql-align-justify"&gt;Your story (what do you want to tell your audience)&lt;/li&gt;&lt;li class="ql-align-justify"&gt;Your audience (who do you write for)&lt;/li&gt;&lt;li class="ql-align-justify"&gt;Your blog name and design&lt;/li&gt;&lt;/ul&gt;  
</div>

我做错了什么..

  1. 我尝试将其保存到一个新的 var 中并单独传递给模板。
  2. 我尝试了通过 google 获得的字符串插值方法的替代方法。

【问题讨论】:

  • 当我使用 #description.text-justify= Obj._props[0].Description ---这是我得到的输出 --- <h1 class= "ql-align-center">开始写博客之前要考虑的基本事项

    <br></p><h2 class="ql-align-center"> ... ... ...... </li><li class="ql-align-justify">你的博客名称和设计</li></ul 当我使用 #description.text -justify!= Obj._props[0].Description

    开始写博客之前需要考虑的基本事项


    ​ ...

  • ....
  • 看起来您的数据库在发送到 Pug 之前正在转义所有内容。您需要以某种方式对其进行转义,然后使用 Pug 的未转义插值语法。
  • @sean 你是对的,但问题不在数据库中,但甚至在此之前......去数据库的字符串正在被 XSS-Clean 包转换,HTMl 标签被转换为 HTMl 实体
  • 标签: pug quill string-interpolation jade4j


    【解决方案1】:

    @sean 是对的,代码正在转义但不在数据库中,但在它进入 db 之前,显然一个插件 'xss-clean' 正在将 HTML 标记 转换为 HTML实体

    这是该值的示例,甚至可以在问题中看到:

    &lt;h1 class=\"ql-align-center\">
    

    禁用该插件后,转义开始起作用..

    我强烈建议其他可能面临同样问题的人检查这些小异常并将它们作为调试过程中的一个步骤进行处理。

    PS:我从 Xss-Clean 切换到 Helmet 以及 Xss-clean 的替代品。

    【讨论】:

      猜你喜欢
      相关资源
      最近更新 更多
      热门标签