使用 htmlSafe() 避免跨站脚本漏洞的风格

Question

Hej 我是ember.js的新手，我想建立一个帮助函数来处理wordpress上ACF输入栏的字符串输入。我们的目的是避免从浏览器收到关于XSS攻击的警告信息。简单的说：我们的目标是通过客户端的cms创建颜色和渐变的重新设计。然而，即使字符串很容易通过助手运行，并产生一个新的，所谓的安全，html字符串的预期效果。我仍然收到警告。

代码片段在这里：来自apphelpers中的帮助程序。

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>

Answer 1

好消息！有人已经写过了。有人已经写了这个。请看 https:/github.comromulomachadoember-cli-string-helpers#html-safe。

如果你想让这个助手也能转义你的css，你可以在它的基础上进行开发。源代码在这里。

https:/github.comromulomachadoember-cli-string-helpersblobmasteraddonhelpershtml-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.com19f3d8baa3fff404191d5ac3862355a9?openFiles=helpers.escap-css%5C.js%2C。

Answer 2

动态地创建一个 style 属性是有风险的。Ember试图避免它。我不确定将字符串标记为HTML是否会有任何帮助。我建议你不要用 style 属性，但使用CSSOM设置CSS样式。ember-style-modifier 提供了一个声明式的方式来实现这一点。

免责声明：我是 ember-style-modifier addon 的作者。