Ember: 在元素中呈现背景图像的正确方法

Question

这是html:

<div style="background-image: url({{person.picture}});"></div>

这一切都很好，但不断收到此警告：

warn.js:48 WARNING: Binding style attributes may introduce cross-site scripting vulnerabilities; please ensure that values being bound are properly escaped. For more information, including how to disable this warning, see https://emberjs.com/deprecations/v1.x/#toc_binding-style-attributes. Style affected: "background-image: url(https://www.userImage.com/cuautemok.png);"

尝试过：

<div style=background-image: url({{person.picture}});></div>

<div style="background-image: url('{{person.picture}}');"></div>

<div style="background-image: url("{{person.picture}}");"></div>

还有更多...还没有运气。

Answer 1

正确的绑定方式style:

<div style={{style}}></div>

然后使用计算的属性生成安全字符串：

import { htmlSafe } from '@ember/string';

...
style: computed('person.picture', {
  get() {
    return htmlSafe(`background-image: url(${get(this, 'person.picture')});`);
  }
}),

但是请确保您了解它的作用。如果 person.picture 确实包含任何可能被用户操纵的东西，你就发起了 XSS 攻击！

另一个解决方案是使用 ember-css-properties

Ember: 在元素中呈现背景图像的正确方法

Ember: correct way to render background image in an element

ember.js