灰烬：在元素中渲染背景图像的正确方法 [英] Ember: correct way to render background image in an element

问题描述

这是 html ：

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

这一切都很好，但仍会收到以下警告：

This renders all good, but keep receiving this warning:

warn.js：48警告：绑定样式属性可能会引入跨站点
脚本漏洞；请确保正确绑定了要绑定的值
。有关更多信息，包括如何禁用此
警告，请参阅
https://emberjs.com/deprecations/v1.x/#toc_binding-style-attribute 。
受影响的样式：背景图片：
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>

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

and many more... No luck yet.

推荐答案

绑定样式的正确方法：

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

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

and then use a computed property to produce a safestring:

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

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

但是，请确保您了解它的作用。如果 person.picture 确实包含任何可能由用户操纵的内容，则您发起XSS攻击！

however be sure you understand what this does. if person.picture does contain anything that may me manipulated by the user you open a XSS attack!

另一种解决方案可能是使用 ember-css-properties

another solution could be to use ember-css-properties

这篇关于灰烬：在元素中渲染背景图像的正确方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！