小编mag*_*ags的帖子

下面的小提琴有三个街区.

块1包含三列.中间列中有两行,每行设置为flex:1.

块2包含三列.中间列中有两行,每行设置为flex:1.第二行包含一张狗的图像.图像不会缩小到包含它的行的高度.

块3仅包含中间列,其中包含两行,每列设置为flex:1.第二行包含一张狗的图像.图像会缩小到包含它的行的高度.

问题是为什么第2块中间栏第二行的图像没有缩小到包含它的行的高度？我可以添加什么CSS规则来实现这一目标？

.block{
    height:100px;
}

.wrapper{
    border:5px solid purple;
    display:flex;
    flex-direction:row;
}

.column{
    flex:1;
    border:3px solid yellow;
}

.middle{
    display:flex;
    flex-direction:column;
}

.first{
    background:red;
}

.second{
    background:orange;
}

.third{
    background:purple;
}

.row{
    flex:1;
    border:1px solid black;
    display:flex;
    align-items:stretch;
}

img{
    flex:1;
}

<div class="wrapper block">
<div class="left column"></div>
<div class="middle column">
  <div class="row first"></div>
  <div class="row second"></div>
      	
</div>
<div class="right column"></div>
</div>

<div class="wrapper block">
<div class="left column"></div>
<div class="middle column">
  <div class="row first"></div> …

我正在浏览所有基于 DOM 的 XSS 预防的 OWASP 规则，并试图全面了解每条规则。我对这个规则有点坚持：

“规则 #2 - 在执行上下文中将不受信任的数据插入 HTML 属性子上下文之前进行 JavaScript 转义”

看这里：

https://www.owasp.org/index.php/DOM_based_XSS_Prevention_Cheat_Sheet#RULE_.232_-_JavaScript_Escape_Before_Inserting_Untrusted_Data_into_HTML_Attribute_Subcontext_within_the_Execution_Context

问题是我不确定前端“javascript转义”时该使用什么方法？我知道这不是一个很可能的用例，因为大多数前端开发人员通常会首先避免将不受信任的数据插入到 html 属性中，但尽管如此，我还是想通过准确理解该规则的含义来完全理解该规则的含义。逃生方法应该是。人们通常在前端使用一种简单的 JavaScript 转义方法吗？谢谢！

编辑：我在 stackoverflow 上找到的其他答案都提到了 html 转义器。我正在专门寻找一个 javascript 转义器，并且我想知道为什么 owasp 专门使用术语“javascript 转义器”，如果正如某些人建议的那样，html 转义器就足够了。

也许这个问题也可以表述为“在 OWASP 的基于 DOM 的 XSS 备忘单的上下文中，html 转义和 javascript 转义之间有什么区别？请给出 javascript 转义的示例。

我正在尝试使用WebdriverIO截取整个页面的屏幕截图。

我读过，最好的方法是使用WebdriverCSS增强我的WebdriverIO流。WebdriverCSS自动截图整个页面？

问题是WebdriverCSS对我不起作用。我认为是因为它尚未与兼容webdriverio@3.0.x。

有什么办法可以使它起作用，或者可以使用其他解决方案？

我的代码：（这是生产什么，但在回调中未定义的值）

// Initialize WebdriverCSS for `client` instance
require('webdrivercss').init(driver, {
    // example options
    screenshotRoot: '../../screenshots',
    failedComparisonsRoot: '../../screenshots/diffs',
    misMatchTolerance: 0.05
});

// ...
// driver gets initialized and url opened
// ...

driver.webdrivercss('page', {
  name: 'body',
  elem: 'body'
}, function(err, res) {
  // here the values of err and res are always undefined
})
.saveScreenshot('../../screenshots/webdrivercsstest.png');
// the screenshot works, but it's not full page

！EDIT： 这是Chromium中的一个已知BUG，很可能不会修复。请参阅此链接以获取更多详细信息。