侧边栏壁纸
  • 累计撰写 87 篇文章
  • 累计创建 41 个标签
  • 累计收到 4 条评论

目 录CONTENT

文章目录

bootstrap 3.3.7升级到3.4.1后popover插件提示框内容不完整且无法鼠标移上点击的问题

已删除用户
2020-05-15 / 0 评论 / 0 点赞 / 212 阅读 / 0 字

首先是生成的内容不全,在 The Bootstrap Blog 当中有说到由于 XSS 的问题,禁用了一些属性,你可以手动关闭它,但是你不能用 data-* 的方式。

Earlier this week a developer reported an XSS issue similar to the data-target vulnerability that was fixed in v4.1.2 and v3.4.0: the data-template attribute for our tooltip and popover plugins lacked proper XSS sanitization of the HTML that can be passed into the attribute’s value.
To resolve the issue, we’ve implemented a new JavaScript sanitizer to only allow whitelisted HTML elements in data attribute. You may modify our sanitization implementation to customize the HTML element whitelist, totally disable the sanitization, or pass your own sanitize function (useful if you use your own library). However, for added protection, there is no way to modify the sanitization via data attributes—you must modify these plugin options via the JavaScript API.

另外关于鼠标移上提示框,这是网上早有的案例,但是因为新版本生成的 html 内容放在了 body 的上面,而不是放在同级,所以需要做一些改动:data-trigger 的值修改为 manual,鼠标移出隐藏的 selector 也要修改。

const id = row.userId;
const more = `
  <button class='btn btn-default btn-xs ${resetPwdFlag}' onclick='resetPwd(${id})'><i class='fa fa-key'></i> 重置密码</button>
  <button class='btn btn-default btn-xs ${editFlag}' onclick='authRole(${id})'><i class='fa fa-check-square-o'></i> 分配角色</button>`;
return `
  <button class="btn btn-success btn-xs ${editFlag}" onclick="$.operate.edit(${id})"><i class="fa fa-edit"></i> 编辑</button>
  <button class="btn btn-danger btn-xs ${removeFlag}" onclick="$.operate.remove(${id})"><i class="fa fa-remove"></i> 删除</button>
  <button tabindex="0" class="btn btn-info btn-xs" data-container="body" data-toggle="popover" data-placement="left" data-html="true" data-trigger="manual" data-content="${more}"><i class="fa fa-chevron-circle-right"></i> 更多操作</button>`;
// 气泡弹出框特效(移到元素时)
$(document).on("mouseenter", '.table [data-toggle="popover"]', function () {
  var _this = this;
  $(this).popover({
    // Bootstrap 升级到 3.4.1 后,由于安全策略,在 html 属性值中禁用了一些标签(https://blog.getbootstrap.com/2019/02/13/bootstrap-4-3-1-and-3-4-1/)
    sanitize: false
  }).popover("show");
  $(document).on("mouseleave", ".popover", function () {
    $(_this).popover('hide');
  });
})

// 气泡弹出框特效(离开元素时)
$(document).on("mouseleave", '.table [data-toggle="popover"]', function () {
  var _this = this;
  setTimeout(function () {
    if (!$(".popover:hover").length) $(_this).popover("hide");
  }, 100);
});
0

评论区