将PHP变量传递给外部JavaScript（或jQuery）文件的最有效方法

Question

我已经阅读了几篇关于这个问题的帖子，发现this是最简单的解决方案，这是我的代码：

js 内部PHP 代码

<script>
    <!--// 
      var jsBaseurl = <?php echo json_encode(BASE_URL."/"); ?>;
      var jsTitle = <?php echo json_encode($h1_title); ?>;
      var jsSubtl = <?php echo json_encode($h2_title);?>;
    //-->
</script>
<script src="external.js"></script>

和外部 .js

var siteURL=jsBaseurl;
alert(siteURL+jsTitle+jsSubtl)

它工作得很好，我的问题是关于Pang和biplav的以下评论：

  

警告：这可能会导致您的网站失效。示例：

<?php $myVarValue = '<!--<script>'; ?>

     

有关详细信息，请参阅this question。解决方案：使用       JSON_HEX_TAG逃脱＆lt;和＆gt; （需要PHP 5.3.0）。 - Pang

     

另一个缺点是影响初始页面加载时间。 -   biplav

我想知道Pang评论的简单解决方案以及这些如何影响性能（页面加载时间）。非常感谢！

Answer 1

关于问题1：在JSON_HEX_TAG

中使用json_encode()

• 示例1
  考虑一下这段简单的代码。

  <script>
      <?php $myVarValue = 'hello world'; ?>
      var myvar = <?php echo json_encode($myVarValue); ?>;
      alert(myvar);
  </script>
  

  输出：

  <script>
      var myvar = "hello world";
      alert(myvar);
  </script>
  

  它提醒hello world。 不可

• 示例2
  让我们尝试将</script>作为字符串。

  <script>
      <?php $myVarValue = '</script>'; ?>
      var myvar = <?php echo json_encode($myVarValue); ?>;
      alert(myvar);
  </script>
  

  输出：

  <script>
      var myvar = "<\/script>";
      alert(myvar);
  </script>
  

  它提醒</script>。 不可

  如您所见，斜杠（/）已正确转义为\/，

• 示例3
  现在，请考虑这个非常特殊的字符串：<!--<script>

  <script>
      <?php $myVarValue = '<!--<script>'; ?>
      var myvar = <?php echo json_encode($myVarValue); ?>;
      alert(myvar);
  </script>
  

  输出：

  <script>
      var myvar = "<!--<script>";
      alert(myvar);
  </script>
  

  令人惊讶的是，它不会发出任何警报，并且错误控制台中没有任何内容。 什么？！

  如果您查看JSON的规范，<!--<script>中的所有字符都不需要转义，那么出了什么问题？

  

  ^{图片改编自json.org}

如需完整且解释清楚的答案，请阅读this amazing Q & A。简而言之，事实证明，拥有 <!--<script>块中的<script>会混淆HTML解析器。 PHP实际上在json_encode()中正确地完成了它的工作; 你就是不能拥有<!--<script>，即使它是一个完全有效的JavaScript字符串！

我自己做了一些简单的测试。浏览器实际上会忽略<!--<script>之后的所有内容，因此如果它发生在页面中间， 整个页面的后半部分都消失了！我不确定是否有人可以实际注入恶意的东西，比如执行任意 代码，但这已经够糟了。

此外，

• 如果您不只是$myVarValue中的字符串，而是array("key" => array("one", "and<!--<script>two", 3))之类的复杂对象，其中包含<!--<script>，那么它仍然很糟糕。
• 如果您的<!--<script>块中有一个普通的HTML文件（即没有PHP）并且<script>位于任何地方（即使在JavaScript注释中），那么它也很糟糕。
• 如果您正在使用其他非PHP服务器端编程语言并生成<!--<script>，那也很糟糕。
• 如果您的PHP直接输出JavaScript（Content-type: application/javascript），那实际上确定 ^[1] 。

解决方案？使用JSON_HEX_TAG转义<和>（需要PHP 5.3.0）。

<script>
    <?php $myVarValue = '<!--<script>'; ?>
    var myvar = <?php echo json_encode($myVarValue, JSON_HEX_TAG); ?>;
    //                                            ^^^^^^^^^^^^^^
    alert(myvar);
</script>

输出：

<script>
    var myvar = "\u003C!--\u003Cscript\u003E";
    alert(myvar);
</script>

它提醒<!--<script>。的乌拉！

它的工作原理是因为输出中不再有<!--<script>，所以不再有HTML解析问题。

注意：如果您不打印到<script>区块，则不需要JSON_HEX_TAG。

<子> [1]这里，“ok”仅表示它没有<!--<script>问题。建议不要动态生成外部JavaScript文件，因为它有很多缺点，例如here，here，here所述的缺点。

---

关于问题2：初始页面加载时间

实际上，这很明显。如果获得$myVarValue的值所需的时间很长 （例如，你从数据库中获取大量数据），PHP必须等待，浏览器和用户也是如此。 这意味着更长的初始页面加载时间。如果您稍后使用Ajax加载数据，他们将无法使用 等待查看初始结果，但是，Ajax调用将是一个额外的HTTP请求，所以它 意味着服务器的工作量增加，网络负载增加。

当然，每种方法都有其优点和缺点，所以你必须自己决定。我建议阅读this excellent Q & A。

Answer 2

很确定不会破坏它。 json_encode的重点是转储是安全的。

</script> 可能打破它，但默认情况下PHP以/为\/，因此您不必担心它。