Question

这是html：

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

这使得一切顺利，但继续收到此警告：

warn.js：48警告：绑定样式属性可能会引入跨站点脚本漏洞;请确保绑定的值是适当逃脱。有关更多信息，包括如何禁用此功能警告，见 https://emberjs.com/deprecations/v1.x/#toc_binding-style-attributes。受影响的风格：＆＃34;背景图片： URL（https://www.userImage.com/cuautemok.png）;＆＃34;

尝试：

<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>

然后使用computed属性生成一个safestring：

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：在元素中渲染背景图像的正确方法

1 个答案: