根据 IP 地址隐藏或显示 div 元素答案

【问题标题】：Hide or show a div element based on IP address根据 IP 地址隐藏或显示 div 元素
【发布时间】：2014-09-24 11:59:29
【问题描述】：

是否有可能使用 Apache、Javascript 或 CSS（或 Plone 中的其他东西）使 <div> 仅对一组 IP 地址可见？

以下是我希望特定范围的 IP 地址可用的代码：

<div id="user">
    <ul>
        <li><a href="#" title="Login">Login</a></li>
    </ul>
</div>

理想情况下，我希望这仅在 3 组 IP 地址中可见。我有一个单独的站点在 Apache 中运行以下限制（当然，IP 地址已更改）来控制访问，但对整个站点，而不仅仅是一个 div。

Order allow,deny
   Allow from 000.0.00
   Allow from 000.0.01

      # Order deny,allow
      # Deny from all

这样做的目的是将弹出式登录（或登录页面）限制为不从特定位置访问该站点的任何人。即使我可以将“用户”div（未登录时的登录按钮）隐藏给没有从 IP 地址范围访问的任何人，那也没关系。任何帮助将不胜感激，谢谢！

【问题讨论】：

你到底为什么想要这个？希望这不是一种保护（安全）？
理想情况下，我认为这应该在呈现 HTML 时发生在服务器端。我认为 IP 地址是不应该到达客户端的较低级别的详细信息，即 JS/CSS。
这并不是真正的安全，因为任何拥有该 url 的人都可以访问登录页面，更多的是让登录变得不那么明显，除非在某个建筑物中。据我所知，PHP 不可用。
根据 URL 来做呢？这样如果有人访问 www.mysite.com，它是不可见的，但如果他们要访问 www.mysiteeditor.com/mysite，它会是？
IIRC，您应该能够在 URL 上切换（重氮）主题，并且您可以使用重氮去除（略微调整的）公共主题上的股票元素。 Plone 主题文档中可能有一些关于此的内容。

标签： javascript css apache plone ip-address

【解决方案1】：

你需要一些 CSS：

#user {
   display: none;
}

还有一些js：

<script type="application/javascript">
    function getip(json){
      if(json.ip === "127.0.0.1") {
         document.getElementById('user').style.display = 'block';
      }
    }
</script>

<script type="application/javascript" src="http://jsonip.appspot.com/?callback=getip"></script>

我从这里得到这个：https://stackoverflow.com/a/810461/3132718

现在 div 将默认在页面上不可见，但通过查看源代码仍然可以看到。

【讨论】：

【解决方案2】：

您可以使用Products.AutoRole 自动为来自特定 IP 范围的访问者分配一个组，然后调整您的 Plone 模板，以便您的 div 以该组为条件。（对于您的最终问题，我们可能应该提交一个“可以登录”的功能请求，该请求应该与权限相关联，默认情况下将授予匿名权限。）

FWIW，在工作中，我们还在 apache 配置中限制 /login|/login_form。

【讨论】：

很多环境下ip地址可以被前端软件隐藏。在这种情况下，我建议您使用 Products.AutoRoleFromHostHeader

【解决方案3】：

*multiple class hiding*
<script type="application/javascript">
function getip(json){
  if(json.query == "87.1.1.5") {
    var elems = document.getElementsByClassName('price');
    for (i = 0; i < elems.length; i++) {
    elems[i].style.display = 'block';
     }
  }
}

<script type="application/javascript" src="http://ip-api.com/json/?callback=getip"></script>

【讨论】：