ember.js 使用htmlSafe()避免跨站点脚本漏洞

c3frrgcw 于 2022-11-05 发布在其他

关注(0)|答案(2)|浏览(156)

Hej我是ember.js的新手，我正在尝试构建一个helper函数来处理wordpress上ACF输入字段中的字符串输入。这样做的目的是避免从浏览器中收到关于XSS攻击的警告消息。简单地说：目标是能够通过客户的cms重新设计颜色和梯度。即使字符串很容易地通过助手运行，并产生了一个新的，应该是安全的html字符串的预期效果。我仍然得到警告。
代码片段如下所示：从应用程序/助手中的助手

import {helper} from '@ember/component/helper'
import Ember from 'ember';
import { htmlSafe } from '@ember/string'
const htmlEscape = Ember.Handlebars.Utils.escapeExpression;

export function escapeCSS(string) {
    let safestring = htmlEscape(string);    
    return htmlSafe(safestring);
}

export default helper(escapeCSS)

从模板

<div style="background-image:linear-gradient({{escapeCSS model.page.acf.top_color}}, {{escapeCSS model.page.acf.bottom_color}})" class="/homepage"></div>

ember.js

来源：https://stackoverflow.com/questions/61660319/avoiding-cross-site-scripting-vulnerabilities-in-style-with-htmlsafe

2条答案

按热度按时间

k75qkfdt1#

好消息！已经有人写了这篇文章。请参见https://github.com/romulomachado/ember-cli-string-helpers#html-safe
如果你想让helper也跳出你的css，你可以在它的基础上进行构建。源代码如下：
https://github.com/romulomachado/ember-cli-string-helpers/blob/master/addon/helpers/html-safe.js
我把这一切都安排好了：

import { helper } from '@ember/component/helper';
import { htmlSafe, isHTMLSafe } from '@ember/string';

function escapeCss([stringToEscape]) {
  let cssEscapedString = CSS.escape(stringToEscape);
  let htmlSafeString = htmlSafe(cssEscapedString);
  return htmlSafeString;
}

// copied from https://github.com/romulomachado/ember-cli-string-helpers/blob/master/addon/-private/create-string-helper.js

function wrapFunction(stringFunction) {
  return function([string]) {
    if (isHTMLSafe(string)) {
      string = string.string;
    }

    string = string || '';
    return stringFunction([string]);
  };
}

export default helper(wrapFunction(escapeCss));

您可以在此处查看演示：https://ember-twiddle.com/19f3d8baa3fff404191d5ac3862355a9?openFiles=helpers.escape-css%5C.js%2C

赞(0）回复(0）举报 2022-11-05

gijlo24d2#

动态创建style属性是有风险的。Ember试图避免这样做。我不确定将字符串标记为HTML是否会有所帮助。我建议您不要自己构造style属性，而是使用CSSOM设置CSS样式。ember-style-modifier提供了一种声明性的方法来完成此操作。
免责声明：我是ember风格修改器插件的作者。

赞(0）回复(0）举报 2022-11-05

我来回答

ember.js 使用htmlSafe()避免跨站点脚本漏洞

2条答案

相关问题

热门标签

最新问答